Repeater slow load time and bugs

Ask the community
,
1

I have a repeater connected to a dataset. I have a couple of questions:

1)The repeater always takes a while to load. Are there any ideas as to how I can cut down this time?
2) I have text coded to display the number of results on the page. Often, it simply displays “0,000” rather than the correct number.
3)I have a button labelled “Advanced Search” that is coded to expand a section when clicked. Often it does not work.

Are there any ideas as to how to fix these bugs? Thank you!

Repeater page: https://www.singertoolkit.com/rep-genie

2

I think these links might be of use to you:

I’d recommend you code these elements to load only when your database is loaded using its onReady.

$w(“#myDataset”).onReady( () => { ); } );

3

Thank you! I am sure you are right. I apologize for my ignorance about this, but where do I put the onReady function? I tried inserting it at the top and almost ruined the whole thing! Here is my current page code:

import wixData from ‘wix-data’;
let lastFilterTitle;
let lastFilterVoiceType;
let lastFilterGenre;
let lastFilterMood;
let lastFilterAge;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
//console.log($w(‘#iSearch’).value);
if (debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iSearch’).value, lastFilterVoiceType, lastFilterGenre, lastFilterMood, lastFilterAge);
}, 200);

}

export function iFilterVoiceType_change(event, $w) {
filter(lastFilterTitle, $w(‘#iFilterVoiceType’).value, lastFilterGenre, lastFilterMood, lastFilterAge);
}

export function iFilterGenre_change(event, $w) {
filter(lastFilterTitle, lastFilterVoiceType, $w(‘#iFilterGenre’).value, lastFilterMood, lastFilterAge);
}

export function iFilterMood_change(event, $w) {
filter(lastFilterTitle, lastFilterVoiceType, lastFilterGenre, $w(‘#iFilterMood’).value, lastFilterAge);
}

export function iFilterAge_change(event, $w) {
filter(lastFilterTitle, lastFilterVoiceType, lastFilterGenre, lastFilterMood, $w(‘#iFilterAge’).value);
}

function filter(title, voiceType, genre, mood, age) {
if (lastFilterTitle !== title || lastFilterVoiceType !== voiceType || lastFilterGenre !== genre || lastFilterMood !== mood || lastFilterAge !== age) {
let newFilter = wixData.filter();
if (title) {
var list = title.split(" ");
//newFilter = newFilter.contains(‘title’,list[0]).or(newFilter.contains(‘musical’,list[0])).or(newFilter.contains(‘composers’,list[0]));
var i;
for (i = 0; i < list.length; i++) {
newFilter = newFilter.contains(‘title’, list[i])
.or(newFilter.contains(‘musical’, list[i]))
.or(newFilter.contains(‘composers’, list[i]))
.or(newFilter.contains(‘voiceType’, list[i]))
.or(newFilter.contains(‘age’, list[i]))
.or(newFilter.contains(‘premiereDate’, list[i]))
.or(newFilter.contains(‘mood’, list[i]))
.or(newFilter.contains(‘genre’, list[i]));
}
//newFilter = newFilter.contains(‘title’,title).or(newFilter.contains(‘musical’,title)).or(newFilter.contains(‘composers’,title));
}
if (voiceType) {
if (voiceType !== “All”)
newFilter = newFilter.eq(‘voiceType’, voiceType);
else
newFilter = newFilter.contains(‘voiceType’, “”);

    }

if (genre) {
if (genre !== “All”)
newFilter = newFilter.contains(‘genre’, genre);
else
newFilter = newFilter.contains(‘genre’, “”);

    }

if (mood) {
if (mood !== “All”)
newFilter = newFilter.contains(‘mood’, mood);
else
newFilter = newFilter.contains(‘mood’, “”);

    }

if (age) {
if (age !== “All”)
newFilter = newFilter.contains(‘age’, age);
else
newFilter = newFilter.contains(‘age’, “”);

    } 

    $w('#dataset1').setFilter(newFilter).then((num) => { 
        console.log($w('#dataset1').getTotalCount(), "heres count"); 
        $w('#SearchCount').text = $w('#dataset1').getTotalCount().toString(); 
    });; 
    lastFilterTitle = title; 
    lastFilterVoiceType = voiceType; 
    lastFilterGenre = genre; 
    lastFilterMood = mood; 
    lastFilterAge = age; 
}

}

export function iSort_change(event, $w) {
var val = $w(‘#iSort’).value;
if (val == “DateNewtoOld”)
$w(“#dataset1”).setSort(wixData.sort().descending(“premiereDate”));
else if (val == “DateOldtoNew”)
$w(“#dataset1”).setSort(wixData.sort().ascending(“premiereDate”));
else
$w(“#dataset1”).setSort(wixData.sort().ascending(val));

}

$w.onReady( function () {
$w(“#iFilterVoiceType, #iFilterGenre, #iFilterMood, #iFilterAge”).collapse();

});

export function button5_click_1(event, $w) {
if ($w(“#iFilterVoiceType, #iFilterGenre, #iFilterMood, #iFilterAge”).collapsed) {
$w(“#iFilterVoiceType, #iFilterGenre, #iFilterMood, #iFilterAge”).expand()
$w(“#button5”).label = “Hide Advanced Search”;
/$w(“#button5”).collapse();/
} else {
$w(“#iFilterVoiceType, #iFilterGenre, #iFilterMood, #iFilterAge”).collapse();
$w(“#button5”).label = “Advanced Search”
}
};

wixData.query(“repgeniemusicaltheater”)

.count() 
.then((num) => {

let resultsNum = num;
console.log(resultsNum);
$w(“#SearchCount”).text = resultsNum.toString();
});

4

You only need this handler whenever you’re calling your dataset to action, such as when you are calling your function:

$w(’ #dataset1 ‘).setFilter(newFilter).then((num) => {
console.log($w(’ #dataset1 ‘).getTotalCount(), “heres count”);
$w(’ #SearchCount ‘).text = $w(’ #dataset1 ').getTotalCount().toString();
});;
lastFilterTitle = title;
lastFilterVoiceType = voiceType;
lastFilterGenre = genre;
lastFilterMood = mood;
lastFilterAge = age;
} }

Basically, try adding this
$w(“#dataset1”).onReady( () => { ); } );
whenever you reference your dataset unless you are defining a function. i.e.:

$w(‘#dataset1’).onReady(() => {
$w(‘#dataset1’).setFilter(newFilter).then((num) => {
console.log($w(‘#dataset1’).getTotalCount(), “heres count”);
$w(‘#SearchCount’).text = $w(‘#dataset1’).getTotalCount().toString();
});
lastFilterTitle = title;
lastFilterVoiceType = voiceType;
lastFilterGenre = genre;
lastFilterMood = mood;
lastFilterAge = age;
}
);

This shouldn’t improve your load time, rather it will only allow an action to be called when the dataset is loaded and ready to function properly so that weird glitches and errors won’t occur. I have had to replace repeaters with other elements such as galleries on my mobile version in order to improve load times so if your aim is to do so, consider making one element for your desktop site and a different for your mobile even if you have to sacrifice a bit of functionality.

Good Luck!

5

Thank you so much for your help! No more glitches!

6

Good to hear!

7

Hi.
I am new to code so sorry if I am missing something but I am pretty sure my code elements are all loading only it’s Ready $w(" #myDataset ").onReady( () => { ); } ); as you suggested here.
The rate hasn’t changed when I reduced the temp to display either. Appreciate your help.
Thanks.

import wixUsers from ‘wix-users’;
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;
$w.onReady( () => {
if (wixUsers.currentUser.loggedIn) {
$w(“#login”).label = “Logout”;
$w(“#profileButton”).show();
$w(“#image”).show();
}
else {
$w(“#login”).label = “Login”;
$w(“#profileButton”).show();
$w(“#image”).show();
}
} );

export function loginButton_click(event,$w) {
// user is logged in
if (wixUsers.currentUser.loggedIn) {
// log the user out
wixLocation.to(/);
wixUsers.logout()

  .then( () => {

// update buttons accordingly
$w(“#login”).label = “Login”;
$w(“#profileButton”).show();
$w(“#image”).show();
} );
}
// user is logged out
else {
let userId;
let userEmail;

// prompt the user to log in
wixUsers.promptLogin( {“mode”: “login”} )
.then( (user) => {
userId = user.id;
return user.getEmail();
} )
.then( (email) => {
// check if there is an item for the user in the collection
userEmail = email;
return wixData.query(“Members”)
.eq(“_id”, userId)
.find();
} )
.then( (results) => {
// if an item for the user is not found
if (results.items.length === 0) {
// create an item
const toInsert = {
“_id”: userId,
“email”: userEmail
};
// add the item to the collection
wixData.insert(“Members”, toInsert)
. catch ( (err) => {
console.log(err);
} );
}

// update buttons accordingly
$w(“#login”).label = “Logout”;
$w(“#profileButton”).show();
$w(“#image”).show();
} )
. catch ( (err) => {
console.log(err);
} );
}
}
export function profileButton_click(event) {
wixLocation.to(/Member-Profile/${wixUsers.currentUser.id});
}

import wixWindow from ‘wix-window’;

$w.onReady( () => {
if (wixWindow.rendering.renderCycle === 1) {
if (wixUsers.currentUser.loggedIn) {
$w(“#login”).label = “Logout”;
$w(“#profileButton”).show();
$w(“#image”).show();
}
else {
$w(“#login”).label = “Login”;
$w(“#profileButton”).show();
$w(“#image”).hide();
}
}
} );

8

Not sure what you’re asking, Yakup.

Some part of your code isn’t working?