Default values apply first, then the props, resulting in a flicker on page load
seanlloydbooth opened this issue · comments
Hi,
I've noticed that on page load, the default values of 2 columns and 0 gutter is applied, before the values I've specified in the props (:cols = "{default: 1, 9000: 2, 1024: 1}", gutter="16"). I set the default to 1 and the next upper bound to 9000, to try and force the default to go to 1, but that didn't work.
You can see it on my site here: Sean Lloyd
In a smaller (mobile) view, it briefly loads the two columns before pinging back to one:
On the larger (desktop) view, it's already set to 2 columns fortunately, but the gutter bounces to 16 once the page has loaded:
Is there anything I can do about this? On slower connections, it seems to take longer to reposition the elements, so I'm guessing masonry waits for DOMContentLoaded or something similar before running - can we run it sooner?
Something to note is that the elements are not loaded with the page, and more elements are added with lazy loading as the user scrolls - not sure if that's what is causing the issue!
Almost immediately solved my own problem!
Moving my loading logic into "mounted" rather than "created" changed the order of the load - my guess is that the masonry layout is applied once the component is mounted, since it can rely on the content being added.