Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 2, 2021 at 8:34 pm #1313988
    Phet

    Hey guys,

    I’ve inserted a Masonry Gallery on this page: https://www.pinetreeparkcoop.com/fr/attraits-et-services/

    This gallery has a “Load More” button.

    When I try out the “Preview Changes” button in the page builder, and during the preview I use the “Load More” button of this gallery, there’s a super cool Preloader Spining Wheel that appears and the nest batch of images loads in super smoothly. But in the “live” version of the page, it’s all the contrary: the next batch of images makes the page “jiggles” (for the lack of words…) and no super cool Preloader Spining Wheel.

    This is happening on Chrome and Firefox.

    Here is a screen capture I’ve done: https://www.awesomescreenshot.com/video/4699295?key=6119c1fb1022b19776e60cb86f196297

    August 5, 2021 at 9:07 am #1314582
    Ismael

    Hey Phet,

    Thank you for the inquiry.

    It might be the same issue with the loading icon that we encountered in the following thread. For some reason, the loading spinner causes the whole document to shake, or jiggle as you put it. Removing the loading icon seems to help fix the issue.

    Please check the following thread.

    // https://kriesi.at/support/topic/shaking-on-load-more-button-click/#post-1238460

    Best regards,
    Ismael

    August 5, 2021 at 5:03 pm #1314692
    Phet

    Hey Ismael,

    The CSS in that post did solved the “shaking” issue. But the thing is… I would like to retain that spinning wheel that we see the the “Preview Changes” mode. This help users to be a bit more patient whilst the script does it’s thing. Is that possible?

    I don’t understand why we see it in the “Preview Changes” mode, but not in the “Live” mode…

    Thanks again for the help,
    Phet

    August 9, 2021 at 4:35 am #1315195
    Ismael

    Hi,

    Thank you for the update.

    Try to replace the previous css with the following code to retain the spinner and prevent the page from shaking. 

    .avia_loading_icon {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    top: 0;
}

.av-siteloader {
	top: 50%;
	transform: translateY(-50%);
}

    Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

    Best regards,
    Ismael

    August 9, 2021 at 5:48 pm #1315886
    Phet

    Nice! Thanks Ismael.

    I’ve added this to the first rule .avia_loading_icon : background:#9494949e. This makes it that it gives a background color to the spinning wheel loader during the loading process.

    Can we add this to the next update?

    .avia_loading_icon {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    top: 0;
    background:#9494949e;
}

.av-siteloader {
	top: 50%;
	transform: translateY(-50%);
}

    We can close this one.

    Regards,
    Phet

    August 11, 2021 at 1:26 pm #1316265
    Günter

    Hi Phet,

    I could locate the problem.

    CSS for .avia_loading_icon, …. was located in enfold\config-templatebuilder\avia-shortcodes\portfolio\portfolio.css, this file might not be loaded when portfolios are not used.

    I moved the stylings to enfold\css\shortcodes.css and kept the default background:

    
background: rgba(0,0,0,0.7);

    Will be in next update 4.8.6.2

    Best regards,
    Günter

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.