Sharing my Simple Page Loader for Wix Studio

Show and tell
, , , ,
1

Hello everyone,

I’ve been struggling to optimize my site — which isn’t easy. I managed to reach 27 points on Google Page Speed (mobile version). I’ve removed absolutely all animations and heavy elements.

My main challenge is that my store site tends to be heavy, but I can’t remove much more without making it too basic. I chose Wix Studio because I wanted a complete, professional result where clients can explore everything — even if that comes with some speed trade-offs.

I’ve reduced my homepage loading time from 8 seconds to 6, and that’s as far as I can get. The site has over 10,000 products, and I’ve worked hard on the design entirely on my own. I’ve been a Wix user for a long time, but this is my first project built with Wix Studio — before, I used the classic Wix editor.

Today I wanted to give something back to the community by sharing this small script: a basic page loader that simply does its job. The only thing I haven’t managed yet is making it trigger when clicking products inside a Slider Gallery. I tried everything, but couldn’t get it working — though it’s only about 3 seconds of loading, so for now, the rest of the site works perfectly fine.

Here’s the script:

import { timeline } from 'wix-animations';
import wixLocation from 'wix-location';

$w.onReady(() => {
    // === Initialize the loader fade-out on page ready ===
    const clickableElements = ['Button', 'Image', 'Text', 'Box', 'Menu'];
    const tl = timeline().add($w('#loading'), { opacity: 0, duration: 600 });
    tl.play();

    // === Add event listeners for clicks on different element types ===
    clickableElements.forEach(type => {
        if (type === 'Menu') {
            $w(type).onItemClick(() => triggerLoader());
        } else {
            $w(type).onClick(() => triggerLoader());
        }
    });

    // === Add listeners to check if the user clicked the same URL ===
    clickableElements.forEach(type => {
        if (type === 'Menu') {
            $w(type).onItemClick(() => sameUrlCheck());
        } else {
            $w(type).onClick(() => sameUrlCheck());
        }
    });
});

// === Function: show the loader animation ===
function triggerLoader() {
    const tl = timeline().add($w('#loading'), { opacity: 1, duration: 600 });
    tl.play();
}

// === Function: check if the user clicked the same page ===
let lastUrl = null;

function sameUrlCheck() {
    setTimeout(() => {
        const current = wixLocation.url;

        // If user clicked the same URL, hide the loader again
        if (current === lastUrl) {
            const tl = timeline().add($w('#loading'), { opacity: 0, duration: 600 });
            tl.play();
            console.debug("🟠 Same URL detected — loader hidden:", current);
        }

        lastUrl = current;
    }, 200); // Delay to let the router update the current URL
}

You should place this inside your masterpage.js file, and make sure that the #loading element is attached to the header — otherwise, the master page won’t detect it.

The #loading element starts visible, and the script will hide it automatically once $w.onReady() runs.

I’ve tested many loaders that run through Custom Code, but they never worked quite right — they either stayed longer than needed, or didn’t appear properly. This method turned out to be the most stable and simple solution I found.

I’m still a beginner in coding and Wix Studio, but I think this is a great option for anyone who hasn’t managed to implement a working loader yet. Plus, it’s easy to set up.

Feel free to visit my site: www.cuentaplay.com.ar

I still have one small bug — when scrolling, the submenu hides and the loading element remains floating — but I’ll fix that soon. If anyone’s interested in how I made the collapsible submenu, let me know and I’ll happily explain how to do it.

Thanks for reading!
Best regards,
Angelo

1 Like