Everything on the repeater without slowing down the page!

Ask the community
,
1

I have a page, that has Search Box and Combo Box filtering system with more than 600+ entries in the searchable name list.

Issues:

  • When I set the dataset settings to 1000 to display, it takes a long time for the page to load.

Required Solution

  • Is there a way I show all the names on the database without slowing down the loading process?

Page URL:
https://www.seaawards.sg/classof2020

2

Hi Kesavan,
You can add a box & hide it on load (in properties panel) . You need to set your dataset settings to only show 40 items . Then you can move your box to a section down your page. Then you can add this code in your page code panel:

$w("#myElement").onViewportEnter( (event) => {
$w("#myDataset").loadMore()
});

When the user scrolls down to the box (which is hidden), the rest of your repeater items will show. If you manage to do this well, you will be able to show all the database items without the user even knowing that you loaded more at a point of your page!

3

Assuming that #myElement will be my Box’s ID?

I tried, it didn’t load more…

4

@kesavan You also need to change your dataset id to #myDataset because, the code loads more items from #myDataset dataset. Then your dataset items should load more.

5

@arthurvalatin I did, change to #myDataset to the name of the dataset in the page.

6

@arthurvalatin Could it be because I have other code in the page?

Below is the rest of the code for Search & Combo box:
import {local} from ‘wix-storage’ ;
import wixData from ‘wix-data’ ;

$w.onReady(() => {
wixData.query( ‘recipientlist’ )
.ascending( “cat” )
.distinct( “cat” )
.then(r => {
let options = r.items.map(e => ({label: e, value:e}));
options.unshift({label: “All” , value: “all” });
$w( ‘#catdropdown’ ).options = options;
$w( ‘#catdropdown’ ).value = “all” ;
})
});

let debounceTimer;
let lastFilterName;
let lastFilterCat;
let lastFilterCourse;
let lastFilterSchool;

export function inputsearch_keyPress(event, $w) {
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w( ‘#inputsearch’ ).value, lastFilterCat);
}, 100 );
}

function filter(name, cat, course, school) {
if (lastFilterName !== name || lastFilterCat !== cat || lastFilterCourse !== course || lastFilterSchool !== school) {
let newFilter = wixData.filter();
if (name)
newFilter = newFilter.contains( ‘name’ , name);
if (cat)
newFilter = newFilter.eq( ‘cat’ , cat);
if (course)
newFilter = newFilter.eq( ‘course’ , course);
if (school)
newFilter = newFilter.eq( ‘school’ , school);
$w( ‘#dataset1’ ).setFilter(newFilter);
lastFilterName = name;
lastFilterCat = cat;
lastFilterCourse = course;
lastFilterSchool = school;
}
}

export function catdropdown_change(event, $w) {
filter(lastFilterName, $w( ‘#catdropdown’ ).value);
}

$w( “#loadmorebox” ).onViewportEnter( (event) => {
$w( “#dataset1” ).loadMore()
});

7

Wait. Sorry. I wasn’t thinking strait. Ok, let me think…

8

@arthurvalatin Got it!

I did like how you mentioned:
export function loadmorebox_viewportEnter(event) {
$w( “#dataset1” ).loadMore();
}

It still didn’t work… Any idea why it could not be working?

9

That is strange because it works for me: https://arthurvalatin.wixsite.com/website-1/help-results

10

So the url to your page with the repeater is https://www.seaawards.sg/classof2020 ?

Have you also published your site?

11

@arthurvalatin Yes that is the URL with my repeater placed, at the end of the page you can notice the empty section where the box is placed.

12

@kesavan You need to move your box in more above. Also you need to hide the box on load (in properties panel).

13

@arthurvalatin In my page I have my repeater right after the repeater. So would you recommend my box to overlap the repeater?

My box is Hidden on load!

14

@kesavan Yes. That is ok. Just make sure that the box is moved to the upper or middle part of your page. It can’t be in the bottom part of your page.

15

@arthurvalatin it is done and published, yet doesn’t load. Do you think search code or combo box code could be some sort of reason for it not loading?

16

Hey @kesavan …
The solution is simple and you don’t need to know how to code

Just add a Pagination onto your site and attach it to your dataset
(I have used a pagination to show only 6 items a page) [https://www.donboscochurchvadodara.com/environmental-spirituality](https://www.donboscochurchvadodara.com/environmental-spirituality

You)

You can find the pagination in the editor Add>>Interactive>>Pagination

Just attach it to your dataset and set the repeater to show only 6 items a page…

This will drastically improve your website loading speed.

Do let me know if it worked for you…

You can reach out to me for help if required
Daniel Robin
danieluthup2@gmail.com

17

Hi Daniel,
ANYONE knows about the pentagon bar. It is too easy to use. It isn’t as good as the load more function. Also, this forum is for Wix code related stuff only. And why did you have to downvote my answer? I am a bit hurt.

18

This works! but then technically speaking, I would want my users ideally just scroll through the name list with least amount of interaction…

Thanks though!

19

Dear @Arthur Valatin is there anyway that I can make the load more work? What do you think the error could be?

  • My box is Hidden on load
  • Load More is called at onViewportEnter event
  • Code used:
    export function loadmorebox_viewportEnter(event) {
    $w( “#dataset1” ).loadMore();
    }

Did I miss out anything?

20

@kesavan Technically speaking your user will have to click that many times ‘Load More’ for the contents to be seen or the site may still load slow…