Preloader - Mobile Only? Also Ability to remove data-sets for Mobile only?

Ask the community
,
1

Does anyone know if there’s a way to have a pre-loader for mobile only on Wix Studio (not mobile app, just for normal mobile website breakpoint)?

I’ve stripped my mobile site down to the bare-minimum, used web speedy, used collection indexing, etc etc, and it’s still not fast enough (to our agency standards for google page insights), hence the need for a mobile only pre-loader.

Additionally, is there a way to remove a data sets (in terms of connecting to Collections from a page) for mobile breakpoint, only I’ve noticed if you remove a data connection for mobile, it removes it from ‘all’ breakpoints.

Any advice would be greatly appreciated.

Thanks

Stephen

Product:
Wix Studio

2

Hi Stephen! Optimizing mobile performance in Wix Studio can definitely be tricky. Here are some tips to help address each of these challenges

Mobile-Only Preloader in Wix Studio
You can implement a mobile-only preloader by using a simple Velo code solution that detects the device type:

import wixWindow from ‘wix-window’;

$w.onReady(() => {
if (wixWindow.formFactor === “Mobile”) {
$w(“#mobilePreloader”).show(); // Show only on mobile

// Optional: Auto-hide after 2.5 seconds
setTimeout(() => {
  $w("#mobilePreloader").hide("fade", { duration: 500 });
}, 2500);

} else {
$w(“#mobilePreloader”).collapse(); // Hide on desktop/tablet
}
});

This way, you can ensure the preloader only appears on mobile devices.

Disabling Dataset Connections on Mobile Only
Currently, Wix Studio’s dataset connections are global across all breakpoints. If you remove a dataset for mobile, it will affect all breakpoints (this is by design).

However, you can prevent the dataset from loading content on mobile by applying an empty filter via Velo:

import wixWindow from ‘wix-window’;
import wixData from ‘wix-data’;

$w.onReady(() => {
if (wixWindow.formFactor === “Mobile”) {
$w(“#myDataset”).setFilter(wixData.filter().eq(“id", "__”)); // Prevent dataset from loading
}
});

Improve Mobile Performance
If you’re still facing performance issues after implementing indexing and minimizing the mobile design, I highly recommend using Website Speedy App. It’s specifically designed to optimize Wix and Wix Studio sites, boosting page speed and improving Core Web Vitals, including mobile performance.