[Bug]: FOC when Loaded

[JMKelley]

Description

Got it working like a charm - the grid works flawlessly. Though, after initial render, I get a flash of content over the top of the data.

I assume it's the rest of the data being loaded in and the position is getting calculated for a quick moment, causing a flash of content?

Reproduction

• Load a large data set in - around 100 items. (https://www.reddit.com/r/gifs/top.json?raw_json=1&limit=100)
• After initial load, you should see a flash of content over the top of the loaded content.

Additional context

No response

Preferences

• I want to be assigned to and work on this issue myself

[DerYeger]

Are you using SSR and have configured the ssr-columns prop?

[JMKelley]

Yes. Code below:

        <div class="container px-6 py-3" :class="{ 'max-w-screen-lg m-auto px-0' : this.layoutOption <= 2}">
          <masonry-wall :ssr-columns="parseInt(this.layoutOption)" :gap="16" class="px-5" :items="reddit">
            <template #default="{ item }">

Could it be lazy loading? Using nuxt-lazy-load

[DerYeger]

Yes, lazy-loading might cause this issue.

[DerYeger]

Closed due to no follow-up.