Preloader + Webflow Editor Issue

[cmoen89 (Corey Moen)]

Hello! I have an issue that is found on other forum posts where a preloader that is rendered with Interactions 2.0 is showing the page for a split second before displaying. To get around this, I found that if I set the preloader class to display: block in the site wide custom code then it will render that first, and then I use an interaction to set the preloader back to display:none after the page loads.

However, now this solution blocks the view of the page content when using the Webflow Editor. I am looking for any custom code help to possibly set the preloader to display:none if/when someone is using the Webflow Editor?

Here is a read-only link for one of the projects I would implement this on:
https://preview.webflow.com/preview/webreg-test?utm_source=webreg-test&preview=5b58e56353c9825550f9f6518aa24e13

And here is the published link: http://webreg-test.webflow.io/

Here is a screenshot of the Editor view of the site. When you first load the Editor the preloader goes away with the Interaction as it should, but then it acts like it reloads the page for a second and thus shows the preloader again, blocking the content to be editd.

[ketan_kulkarni]

Hi @cmoen89, I am also stuck in same issue I have a preloader and navbar of fixed height, when client enters in editor mode he only see the preloader, I have added interaction on “when page starts loading” and set preloader and navbar display to hide and then to block but still navbar is is displaying only on home page and hidden on some pages

[brettscreativestudio]

I am dealing with this same issue. The editor only shows the preloader element that is set to display: fixed. On the live site, the IX hides the preloader element on page load. But in the editor it is just static on the preloader.

https://preview.webflow.com/preview/spice-first?utm_medium=preview_link&utm_source=designer&utm_content=spice-first&preview=932d822adad13cc68dbc3d21d260d086&workflow=preview

[derartas (arthur)]

Hi, any news for this problem?? i could need some help with that too.

[Chirantan (Chirantan Aditya)]

So I spoke to the webflow support team about the same issue and they said

When I was investigating your project and page load animation for issues I noticed that you had no ‘initial state’ set in the ‘page load’ interaction and the display setting of the preloader was set to fixed. This is causing the ‘preloading-animation’ element to always be visible in the Webflow Designer since the display property is set to flex.

To fix this issue you need to set the initial display state of the preloader to “flex” in the interaction settings and also set the 'preloading-animation" class to display:none.

[Eli11 (Eli Shmerler)]

@cmoen89 @ketan_kulkarni @brettscreativestudio @derartas @Chirantan

Solved! I managed to solve this for my projects.

This is how:

1. Give the loader the class “page-load-animation” (in the Designer you can set it to display “Hidden”, this way you can continue working on the project).

2. Create a “Page load” interaction “When page finishes loading”.
   With “page-load-animation” selected, create two steps.
   Opacity = 0 and then a separate action of Hide/Show = Hidden. > Done.

3. Go to Project settings > Custom code > Add the following to the head tag:

<style>
  .page-load-animation {display:block;}
  .w-editor-body .page-load-animation {display:none;}
</style>

This way you can continue working on the project via the Designer or the Editor without having the loader blocking the view.

On the live site, the loader will show by default and disappear based on the interaction.

Hit the like button if this helped you