Preloader doesn't fit the whole page

Hi there!
I’m adding a preloader to a site as a strip that is connected to this code:

$w.onReady(() => {
waitForLoading();
});
export function button6_onClick(event) {
$w(‘#preloader’).show();
waitForLoading();
}
function waitForLoading() {
setTimeout(() => {
$w(‘#preloader’).hide(‘FadeOut’);
}, 1500);
}

This applies only to the first section of the page and I want the whole page to be hidden until the prealoder goes off.
I’ve tried to do this through the properties panel by selecting ‘hidden on load’ but basically that hides most of the site forever, it never loads. And then tried ‘collapsed on load’ but same result.
Anybody knows how to fix this?

this is the site
www.getsmartmirror.com

Hi.

You can stretch the ‘preloader’ strip further down so that it overlaps with other strips as shown below:

To make sure that the preloader strip stays in front, you can send the rest to back as instructed here .

Good luck!