Repeater with huge data gets stuck

Hi,

I am creating a tool which is basically a collection of about 300 words and the user can select some words from this collection by clicking on the words.
The dataset just contains ‘The Word’ and ‘The Description’.
Ideally, I want all the 300 words displayed in small boxes on a single page.
I had implemented a repeater to do this, but the load times are insane.
Split it across multiple pages but still, the repeater responds very slow.
I thought this might be an issue with getting the data from the DB, so I moved all the data into a local array from which I populated the repeater. The page loads now after 40-50 seconds but still, the repeater response is very slow.
Is this is a known limitation with repeaters and large datasets?
I thought that this might not be a huge overhead since each data element just contains only a pair of words (value/description).

Can someone suggest any other alternatives or solutions?

The screenshot of the page/repeater is present below.
This takes about a minute to load and even after that the repeater sort of hangs.

Thank you for your response.

Hi Shadab

Are you on a published version of your site, or in the preview mode of the editor ?

I have found that usually, the editor takes more time to load and can “freeze” or “hang” as you experienced, when the published version can be quicker and smoother.

If you are in the editor, try on the published version and tell us if it is better.

Also, have you turn the cache ON because this may help.

That said, I also find repeater with large database to be a bit slow, but my data are usually more complex than yours (images, multiples texts).

Thanks for responding Oscar. :slight_smile:

In preview mode, it crashes. The published version takes about a minute to load and even after that performance of the repeater is not smooth.
I have 2 events on the container: OnClick and OnMouseIn.
If I click on a container, it takes a few seconds to reflect that.

Forgot to mention, the cache is also ON.

Hello together,

i have the same problem with my repeater. My repeater also loads very slow.
By activating the “CACHE” i could improve the load-times a little bit and it lodas a little bit faster now, but still not fast enough like it should be.

So my question is the same like yours, “are there more possibilities to improve the loading-times of repaters (site-loading)” ???

A few days ago i have read an article about something like “server-side” & “client-side” rendering, or something like that. There were a code-snipet, which asked if the rendering goes twice, or just one-time on server-side, or something like that, but can’t find that post anymore. :tired_face::sleepy:

If you find that the data can be readily queried quite quickly and it’s specifically repeaters that are slow you could just do this in HTML. Custom element would be best, but you might not yet have this enabled in your account. You’d then have to use an iFrame and postMessage() the DB content into it.

I think this can help you understand what is front-end and back-end :

@ Oscar,
thanks for reply. I understand now a little bit more the difference between front-end and back-end, but still not 100%.

Do you have more stuff concerning to “front-end / back-end”?

@Lee
Perhaps it is a good idea to do it with an iFrame, but i’m not sure that i am able to do that, perhaps i just started with “Wix & Corvid”.

The repeater what i am talking about is to find on this site here…
https://mt2-king.wixsite.com/website/schwarzmarkt

Perhaps somebody can take a look at this and give a comment on this.
Is there still more possibilities to improve the loading-times of the repeater.

The more is loaded in repeater, the slower gets all the system.

For example:

1-10 loaded items into repeater (loading-time per item = ca. 1-3sec)
11-20 loaded items into repeater (loading-time per item = ca.3-5sec)
21-30 loaded items into repeater (loading-time per item = ca. 5-8sec)

And when using the green “page-switch”-buttons while you have 10 or more items on stage, the loading-time EXPLODES rapidely.

And this is already my improved version, because i already have activated the “CACHE”. :expressionless::persevere:

@russian-dima It’s not correct to have more than one dataset onReady() . I would suggest you put one dataset.onReady() function in your page’s onReady() function like this:

$w("#DATAschwarzmarktREAD").onReady( () => {
    startLoadingData();
} );

Then in the startLoadingData() function, remove the dataset.onReady() functions and just call loadMore() where you want.

@russian-dima Also, the performance will be greatly improved if you limit how many items are displayed in the Repeater, and page the Repeater’s contents.

@ Yisrael the “Brewmaster”
BIG THANKS for your reply!!!

I will try to change my code as you have it written down in your post.
I hope i will do everything right.

I think it will take a few days, i will write back, wehen all changes are done.
I really appriciate your suggestion, THANKS!

Greetings from Germany (:grin: sorry there was no beer-icon in the icon-collection)

And now, let’s work a little bit on my code.
See-Ya! :sunglasses:

Hello,
as i have promised, i’m back to give some results.

@yisrael-wix
I tried to do what you said, i changed my code and eleminated all " dataset.onReady() functions", except just “one dataset.onReady() functions”.

I hoped it would realy improve the loading-speed, but i could not see any changes in performance. The repeater do not react faster now then before.

Here an example where i eleminated (deactivated) the onReady-functions…

function startLoadingData (){
if (EndStripStatus === 0 && StartStripStatus === 0 ) {
console.log("Bedingung-1 erreicht!"),
$w('#TXTerror').hide(),
$w('#TXTsuccess').hide(),
$w('#TXTloadingData').hide(),
$w('#IMGloading').hide(),
$w('#BTNloadMoreData').show();
setze_Zählerdaten()
}
else if (StartStripStatus === 0 && EndStripStatus === 1 && Zwischenstatus != "kontakt" && $w('#BOXsearch').isVisible==false && $w('#SWITCHautoscroll').checked==true ) {
console.log("Bedingung-2 erreicht!")
$w('#IMGloading').show(),
$w('#TXTloadingData').show(),
$w('#BTNloadMoreData').hide(),
//              $w("#DATAschwarzmarktREAD").onReady( () => {
$w("#DATAschwarzmarktREAD").loadMore()
.then( () => {
$w('#IMGloading').hide(),
$w('#TXTloadingData').hide(),
$w('#BTNloadMoreData').show()
} );
//              } );
RepeaterAusgangsgröße = $w("#repeater1").data.length
setze_Zählerdaten()
}
else if (StartStripStatus === 1 && EndStripStatus === 1 && Zwischenstatus != "kontakt" && $w('#SWITCHautoscroll').checked==true) {
console.log("Bedingung-3 erreicht!"),
$w('#GRPcounter').show()
$w('#IMGloading').show(),
$w('#TXTloadingData').show(),
$w('#BTNloadMoreData').hide(),
//              $w("#DATAschwarzmarktREAD").onReady( () => {
$w("#DATAschwarzmarktREAD").loadMore()
.then( () => {
$w('#IMGloading').hide('FadeOut'),
$w('#TXTloadingData').hide('FadeOut');
$w('#GRPcounter').hide('FadeOut')
setze_Zählerdaten();
} );
//          } );
}
else {
if ($w('#SWITCHautoscroll').checked==false) {
$w('#BTNloadMoreData').show()
setze_Zählerdaten()
}
console.log("Bedingung-4 erreicht!");
}
}

//  $w("#DATAschwarzmarktREAD").onReady( () => {
$w('#IMGloading2').hide('FadeOut')
$w('#repeater1').expand()
$w('#repeater1').show('FadeIn')
$w('#ENDSTRIP').expand()
$w('#ENDSTRIP').show('FadeIn')
$w('#SWITCHautoscroll').enable()
setze_Zählerdaten();
//  });

…and a few more.

But it took no effect on the performance. Still to slow without any speed-improvement.

Do i do something wrong?:roll_eyes:

[“@CODE-NINJA Also, the performance will be greatly improved if you limit how many items are displayed in the Repeater, and page the Repeater’s contents.”]

But i created already the possibility to load a specific number of items to the stage and also gave the possibility for switching pages.

Ok, i could make a total limit for examlple of 30-50 items in the column, but even a limitation of 50-items is already not the best end-result.

Already when 30-items are loaded on stage, the loading-time are already very long.

The user has also the possibility to switch sites (page-flip). He can first load 3,4,5 or even more items onto the stage and then do a page-flip (page-switch).

But already if there are 5-items on stage and you try to make a page-switch, the loading-time is already bigger then 10-15 sec.

Yes i am sure, that i have to set a limitation , but my question is, if it is still possible to improve the loading-times and my results in this case are wrong, because i made something wrong in my optimized code?

I hope you can take a look one more time and tell me what i did wrong, because i could not see any effective improvement in loding-times of the items after updating my code (following your instructions).

Big thanks!