Dataset loadMore Method "breaks" Slide Deck Gallery

Ask the community
, , , ,
1

Good day,

I’ve setup an algorithm to incrementally load a Dataset, and subsequently the connected gallery, during run-time, to improve performance.

I’ve done so based on the assumption that a gallery (Slide Deck Gallery) will be loaded with a page of data, from it’s connected Dataset - and I don’t want to end up with a situation where the dataset page has many items, and the gallery attempts to load all the items, on page load.

First Question : Is my assumption correct, will the gallery attempt to load all the items from the dataset page, all at once??? (…see, I don’t know how the internals of the Wix platform work, nor where to find that information)

If my assumption is correct, and the use of the following algorithm is merited, why does it “break” the gallery when I use the loadMore function, but not when I use the setPageSize function?

export function pFMnGlryDS_currentIndexChanged( currItmIndx ) // Dataset Event Handler
{
// Load pFMnGlry Incrementally - To Optimize Loading Time
//--------------------------------------------------------------------
let orgPgSz = session.getItem( “pFMnGDS_oPS” ); // Store original Page Size in Session

if (
( $w( “#pFMnGlry” ).items.length < $w( “#pFMnGlryDS” ).getTotalCount() )
// Gallery Slide Indices are Moving in a Positive Direction ( Incrementing )
&&
( ( currItmIndx % orgPgSz ) === ( orgPgSz - 2 ) )
// Current Item Index is the Second-To-Last Item on Current Dataset Page
&&
$w( “#pFMnGlryDS” ).hasNextPage()
// Dataset has Next Page
)
{
// $w( “#pFMnGlryDS” ).loadMore(); // “Breaks” Gallery ( Gallery Disappears )

// So instead I use setPageSize 

$w( "#pFMnGlryDS" ).setPageSize( $w( "#pFMnGlryDS" ).getPageSize() + 1 ) 
  .then( () => { $w( "#pFMnGlryDS" ).setCurrentItemIndex( currItmIndx ) } ); 
    // Maintain Index Positon After Change

}
}

Quick explanation -

So when the dataset current index changes, due to the gallery scrolling through the items, I check to see if the current index is the second to last index for the current page :
( If dataset page size is Three(3), then second-to-last index on first page is One(1), on second page it would be Four(4), on third page it would be Seven(7), etc.)

Second to last item indicates that dataset is about to run out of items for gallery to scroll through, and so, if more pages exist, I load another - only problem is that when I use loadMore the gallery “crashes”/disappears, but if I instead increase the dataset page size, the new items are “loaded”/added to the gallery, and the gallery can continue showing items (the .then() is just used so that the gallery doesn’t start over at the beginning after using setPageSize).

It’s not the best solution, as a matter of fact, it isn’t even that optimal, because setPageSize causes a continuous reload of the gallery, also, the page size is eventually going to reach a size where it has many items to load (hoping that browser caching will help to mitigate this) - but, for now, this is where I am at, any help with the loadMore “crash” issue, or any help at all, is much appreciated.

2

I’m not sure about the answer to your question in particular, but I would think that the determining factor here is what the dataset is doing, and not the gallery. The dataset is doing the work of retrieving all of the data, so you could do it through queries instead.

I would query the gallery data chunks at a time using .skip() to change index, and then add results to the gallery’s items on a timer or as the index increases or something. Something like this:

const galleryData = initialData.concat(newFetchedData);
$w('#gallery').onCurrentItemChanged(()=>{
    $w('gallery').items = galleryData;
});

//or possibly:
const galleryData = await fetchNewData();
$w('#gallery').onCurrentItemChanged(()=>{
    $w('gallery').items.push(galleryData);
});
3

Thank you very much, for taking the time to read my long post, and giving your input.

I implemented your concept (with a slightly different ordering of the step) and got it to work.

Thanks for simplifying it for me.

4

Awesome!