Lottie Loading time + Page Load

Hi all, here is a project I am working on (first Webflow project, so trying to work it all out)
I have a lottie animation with mouse interaction, but due to the size of the lottie it is slow to load. (I will do some optimising at a final polish stage, but think the issue will still remain)
I can’t seem to find out how to hide everything on the page until all visible elements are loaded.
Do I need to implement a ‘loading page’ or is there another alternative?

Help is much appreciated.
Cheers


Here is my public share link: Webflow - WeAre8 2024 V2

Hi all, hoping someone can give some guidance. All I want to do realistically is hold on the loading page until the lottie is confirmed as loaded.

Increase the loading time from the interactions panel

I feel like that is a guessing game though. Ie i could set it to 2 seconds (is currently just set to short so I dont have to sit through it when previewing the build)
Is there a way to set it to trigger based off all in view elements loading, or even just target a single element (the lottie?)

New read only link here:

https://preview.webflow.com/preview/weare8-2024-v2?utm_medium=preview_link&utm_source=designer&utm_content=weare8-2024-v2&preview=1a563bad8535e95edac0b09386a90a7d&workflow=preview

Anyone able to assist with this one? I’m stumped.