Webpage is blinking/showing for a second before loading nicely

When loading a webpage, the texts and background-color blink for a short second and then they load properly with the intended animation.

I made a short video to show you what I mean: https://vimeo.com/331182527

Is there any way to put a loading animation so that this doesn't happen? What exactly is the problem? If there is no good solution, is there a way of just making the page completely white for around 0,5 seconds to hide the blinking?

Sadly I am just a self-taught squarespace user, so I dont have any deeper insight into how this could work and I am completely lost.

Header code:

<script src="https://unpkg.com/scrollreveal@4"></script>
<script>

window.sr = ScrollReveal({
    distance: '50px',
    duration: 2000,
    easing: 'ease',
    mobile: true,
    reset: false,
    viewFactor: 0.4,
  });

</script>

Footer code:

<script>   
sr.reveal('body p',{
    origin: 'bottom',
});

    sr.reveal('h1',{
    origin: 'bottom',
      delay: '1000',
});
</script>

It would be very helpful if someone could point to where the issue lies or can solve the problem :)