Relume
Log in

Community forum for knowledge and support

Updated 3 months ago

Loader flashes page before showing despite display flex styling

At a glance

The community member is experiencing an issue with Loader 3 where the page flashes before the loader is shown, despite applying .preloader { display: flex !important; }. Other community members provide suggestions, such as moving the loader to the top, unlinking it from the instance, ensuring eager loading of images, and placing the custom CSS in the <head> section. The community members eventually determine that the correct class to use is .loader3_component { display: flex !important; }, which resolves the issue. However, adding !important breaks the whole thing.

Useful resources
MMax Wilson
·

With Loader 3 I am having a problem with it flashing the page before the loader shows, I do have .preloader { display: flex !important; } applied but problem persists

M
M
13 comments
MMatt Johnson

would you mind sharing a read-only link?

MMax Wilson

Thanks here https://preview.webflow.com/preview/anchoa-2023?utm_medium=preview_link&utm_source=des[…]3&preview=318a968660df71b3422ac24c5cad4534&workflow=preview – and actually this is the project you helped me with a week or two ago [understanding a move to Relume components and CF2.1 without starting a new project]

MMatt Johnson

hmm guess I might need the published URL as well because I'm not seeing the flicker in the webflow designer preview.

MMax Wilson

sorry ! https://www.anchoamagazine.com/

MMatt Johnson

really hard to troubleshoot since it barely happens but on the first load and only happens on the published site.

I would try these things:

  1. Move the loader to the very top.
  2. Unlink it from the instance.
  3. Ensure that any images are eager load instead of lazy load within the loader.
  4. Make sure your custom CSS is within the custom code section <head> of the page.

The idea is to try to get the loader higher in the DOM so its the first thing loading before anything else. Especially the code that is supposed to show it before anything else.

MMax Wilson

Thanks for looking at it – I understand it’s hard to diagnose, thanks for explaining. It’s odd, I see it flash more regularly than only the first load. I’ll go through your step though – to check “.preloader { display: flex !important; } ” is the only custom CSS to go within the custom code section <head> of the page?

MMatt Johnson

Oh also that class might not be right!

MMatt Johnson

.loader3_component { display: flex !important; }
this is the custom code that should go in the head

MMatt Johnson

pretty sure anyway - there's no preloader class in your project

MMatt Johnson

nothing you did wrong here really its just the instructions were not made specifically for loader3

MMatt Johnson

and we've had so many other issues with this loader that I neglected to check basics first

MMax Wilson

D’ooooh! That’s on me really isn’t it, I didn’t understand the instruction was to change it to the class of the loader you’re using. They all work now, no flash!

p.s. “!important!” I added that and it actually breaks the whole thing

MMax Wilson

Thanks again

Add a reply
Sign up and join the conversation on Slack