Help needed with preloader code

Hi,
I’m looking to create a preloader page. I followed a video on YouTube:
https://www.youtube.com/watch?v=P4ewOH-ItDI&t=607s
The code provided:
$w.onReady(() => {
waitForLoading();
});
export function button6_onClick() {
$w(‘#stripColumn1’).show();
waitForLoading();
}
function waitForLoading() {
setTimeout(() => {
$w(‘#stripColumn1’).hide(‘FadeOut’);
}, 3000);
}

To summarise the video: a gif is attached to a strip, which covers the entire page. The code is used in relation to that particular strip. A white background with a loading gif is the preloader. Once the page has loaded, it then fades out to reveal the page.

I used this same format but for my own gif.

The original video used to make the gif is 3 seconds long, so I set the timeout to 3000. I want the bold writing at the end of the gif to be the final writing seen before the page has loaded completely and the gif (and strip it’s attached to) disappears.
It seems to be very temperamental. It sometimes will show one word and then disappear immediately, rather than play the entire gif.
Is there a better code I could be using to make it work more reliably? Do I need to adapt the gif?
Any help is greatly appreciated.

That code example was provided by Michael Strauch and not Wix themselves, therefore I would suggest that you contact him directly if you any questions about it yourself.
https://www.wixtrainingacademy.com/
https://www.wixtrainingacademy.com/wix-design-pro-michael-strauch

Otherwise, you can always look at other preloader examples that are out there already too.
https://www.wix.com/corvid/example/promotional-preloader

Preloader that works from previous forum posts.
https://www.wix.com/corvid/forum/community-discussion/real-preloader-on-a-wix-website