Filter causes layout shift momentarily

  • Hello,

    So overall the plugin works really well, is it quite complex in terms of possible options, customizations that you can do which is cool. However I’m facing an issue with layout shift, visit the url I provided take a look at the left sidebar you’ll find “Brand” filter there and then once you see it try to refresh the page again, you will experience momentarily the layout shift that “Brand” filter causes, at first you see shortly you should see that brand filter is expanded and it shows all “Brands” almost for a second, and then after that it collapses and it shows 10 brands.

    I’d like to know if there is any way to fix this so that it doesn’t occupy more height for that short amount of time, so while loading it should stay the same displaying 10 brands at all times.

    Maybe there’s some kind of JavaScript that when the page loads it collapses that Brand list down to 10 items, maybe it is possible to change that somehow, so it’s properly collapsed down to ten brands. A couple of site visitors informed me about this layout shifting issue which they said experienced for a longer time, when using cellphone it’s even more noticable since it takes a little longer to load the website and of course the device height is much smaller in that case.

    I would be endlessly grateful for any help.

    • This topic was modified 3 years, 6 months ago by Elvinas.
    • This topic was modified 3 years, 6 months ago by Elvinas.
    • This topic was modified 3 years, 6 months ago by Elvinas.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Dmytro Holovnia

    (@dholovnia)

    Hello,

    Thank you for the message.

    First of all this script should be updated – https://j6c3v8n6.stackpathcdn.com/wp-content/cache/min/1/wp-content/themes/enfold/js/prekes_zenklas.js?ver=1630934277

    It provides more issue than solutions. After will applied brand filters are not visible. It duplicate filters each time you click the arrow.

    As for the request you have – we will check the filters we have now and will try to make it for all of them. I think you are right and Javascript should be applied to the element before it is shown.
    But this is not a hotfix. We need to partially rewrite the code we have. So it will take some time. I hope to see it in relelase this month.

    Regards,
    Dima

    Thread Starter Elvinas

    (@elvinas)

    Hello, thank you so much for your fast response, yep, sure it is understandable that it can take some time to implement this, in the meantime I will take a look at this js code, it seems like it is doing a lot of stuff and could cause unexpected behavior.

    Also may I ask what do you mean: “It duplicates filters each time you click the arrow?” Expanding icon works fine for me, I mean at first you see ten brands, then each time you click expand icon it adds +10 more.

    Best regards,

    Elvinas

    Plugin Author Dmytro Holovnia

    (@dholovnia)

    Not sure why but in some step it was showing me the same brands every time I click the arrow.

    Thread Starter Elvinas

    (@elvinas)

    Really strange, but thanks for pointing that out, it seems to work fine, I see the plugin has the option to minimize the widget, but probably there is no option to hide some brands, so it starts at showing only 10 brands?

    • This reply was modified 3 years, 6 months ago by Elvinas.
    Plugin Author Dmytro Holovnia

    (@dholovnia)

    “starts at showing only 10 brands” – plugin settings page tab General setting The number of Attribute Values.

    Regards,
    Dima

    Thread Starter Elvinas

    (@elvinas)

    Thank you, I’m really sorry for bothering you, but could you point me where should I find this option? https://ibb.co/3rXKVq4 Can’t seem to find it.

    Thread Starter Elvinas

    (@elvinas)

    Sorry I misunderstood that option, I thought that It will add expand more icon button. Since “The number of Attribute Values” option works really well for me, it’s just that then it’s impossible to make it expand to show more Brands. But it solves the issue as it doesn’t cause the layout shift, also removed that custom JS.

    I’m really grateful for your support, I would gladly pay for it.

    • This reply was modified 3 years, 6 months ago by Elvinas.
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Filter causes layout shift momentarily’ is closed to new replies.