BUG - Preloader delay issue - loading page can be seen for a split-second before preloader

Community resources Bugs
1

Hi,

I used the ‘Dulce’ template but found that my preloader fails to work in the same way. My half-loaded page can be see for a split second before the preloader kicks in despite my preloader being set to begin as fully visible on initial state on page load (set to white background colour, absolutely positioned, full, flex etc. I double checked it against the relevant Webflow tutorial video here: https://www.youtube.com/watch?v=VthMa3jXjJ4 and it all seems right, so I cannot find the source of the issue.

Here is how the interactions panel appears now:

interactions-panel
interactions-panel2071×2284 239 KB

Here is my public share link: https://preview.webflow.com/preview/plandek?utm_source=plandek&preview=2fada44c70e77672d1ac310d7615db01

Any help appreciated.
Thanks

1 Like
2

Does the problem occur on preview or live?

I seem to not have the problem on preview.

3

It occurs on both about 25% of the time:

bug
bug800×644 3.95 MB

4

Waow, if everyone took the time to craft a nice diagram as you did :smiley: Thanks!

I’m not witnessing the flash, it may have to do with the order of loading of the elements but I don’t know much about how to control that.

However such flashs appears with IX, sometimes it’s on the inverse scenario, when you want something to be invisible at first and show up after. The solution for this can also apply to you.

Your structure is pretty simple and all your content is in one DIV. So use a onload IX that is going to hide the content of the page (initial state) and show it 200 or 300ms later, the time for your preloader to show up and finish running. If the content still flashes before being masked by the UI, then just set the content opacity zero in the style panel and make the IX bring it to 100% 300ms
later.

5

Have you solved the problem? If noy can you pls. try one thing.
Before publish the site set the preloader to flex, not hidden. Publish and try.

I did have a similair problem looooong time ago and that did the trick for me

1 Like
6

@JanneWassberg Yes, this is what I did as a short term fix. I published the fix to live but unpublished it to preview to demonstrate it is still an issue - this isn’t a proper solution because it requires this fix action every single time I republish the site which isn’t very practical for my client.

@vincent I haven’t tried your suggestion yet, but I will look in to it and report back.

7

ok @agentjungle looks like the initial state bug is back. Will move this to the BUG section

8

@Brando moved this to the BUG section. Looks like the initinal state bug is back. I did have this problem looong time ago

1 Like
9

Hi @JanneWassberg @agentjungle

It looks like this is a result of FOUT (Flash of unstyled text). This usually occurs when text is finished loading before the Webfont and is not uncommon with Google Fonts. In this case the flash is interrupting your preloader page load animation.

Two potential workarounds:

  1. Add the following custom code to the head of the site:

    <style> .wf-loading * { opacity: 0; } </style>

  2. Download the fonts directly from Google, then upload them as custom fonts to your Webflow project settings.

Here are some good resources:

Can you please try one of these workarounds, then republish the site?

2 Likes
10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.

11

Hey!

I was busting my head about this and a simple solution I found to work is just adding initial state as code, not just in interactions initial state.

If your preloader has initial state set to display:block, you just need to add css to the project settings custom code head area.

<style>
 .element-class {
 display: block;
}
</style>

I hope this helps! :webflow_heart:

3 Likes