Best Way to Use a Preloader

I’m trying to use a preloader on one of my clients’ websites. I have created the preloader and set its display value to none, the interaction responsible for the animations is setting the display property to ‘flex’ on the initial stage yet there is a brief moment of flashing on the website -just before making the preloader visible. When I set the display value to flex as default the problem is not pursuing -the same approach I’m taking when using ‘raw’ coding- yet this means the preloader is visible at all times in the designer which is not ideal for the client. I would love to hear your thoughts on how to tackle this!

Kindly see the structure via the following link, I duplicated the home page to use both preloader versions: