Issue - images grouped/squashed together in ImageGallery - Doesn't happen in Preview mode

Ask the community
,
1

I’ve noticed an intermittent issue with an ImageGallary appearing collapsed ONLY in live mode.
That said, it’s not a straight forward image gallery as the images are being randomized to display in a different order every time. If everything works well, it should look like this:

2876×1084 607 KB

IF it appears collapsed, it will look like:

3000×1408 413 KB

The code related to this is:

import wixData from "wix-data";
$w.onReady(function () {
    wixData.query("EMU1")
        .eq("title", "GlideN64")
        .find()
        .then((results)=> {
        $w("#text00").text = results.items[0].verDate;
    });
    wixData.query("EMU2")
        .eq("title", "STATUS")
        .find()
        .then((results)=> {
        $w("#text0").text = results.items[0].version;   
    });   
       wixData.query("yGLideN64") //<--- This is the Query related to searching/retrieving images
        .eq("title", "EMU2")
        .find()
        .then((results)=> {
        let items = results.items[0].gallery; //<--randomizing image order
        items = shuffle(items);
        $w("#gallery1").items = items;  
    });  
})
export function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
 const j = Math.floor(Math.random() * (i + 1));
   [array[i], array[j]] = [array[j], array[i]];
}
return array;
}

Could this be a timing issue in Live mode? Maybe in relation to the process of searching/retrieving/displaying? With that in mind, I tried showing/expanding the image gallery right before the Query but it still causing issues in LIVE mode.

Note, this problem never occurs in Preview mode.

Thanks for your help in advance…

2

It still happens and I keep trying different ways to resolve this but nothing works. It clearly seems like a loading/fetching/sorting & the gallery displaying images timing issue