Preloaders and Repeaters

Ask the community
,
1

Hi Guys!

First of all thanks for your support.

I have a repeater implementet on my site and a search bar linked to it created from userinput and then some coding. I am then wondering if its possible to make a loading text or image when you as user is using the search/(søg) bar:

980×692 498 KB

i have this coding at the moment and it works great, but there are still some loadtime, which should be shown as an preloader.

import wixData from “wix-data”;
let debounceTimer;
export function iTitle_keyPress(event, $w) {
if(debounceTimer) {
clearTimeout(debounceTimer);
debounceTimer = undefined;
}
debounceTimer = setTimeout(() => {
filter($w(‘#iTitle’).value);
}, 200);

}
let lastFilterTitle;
function filter(title) {
if (lastFilterTitle !== title) {
$w(‘#dataset1’).setFilter(wixData.filter().contains(‘title’, title));
lastFilterTitle = title;
}
}

So is it possible to do a preloader on the repeater when searching? i tried this function, with the “onchange” export function also, instead of the “onClick”

$w.onReady(() => {
waitForLoading();
});
export function button6_onClick(event) {
$w(‘#preloader’).show();
waitForLoading();
}
function waitForLoading() {
setTimeout(() => {
$w(‘#preloader’).hide(‘FadeOut’);
}, 1500); }
Hope you guys can help me!

2

Hey Alexander,

setFilter method of dataset returns promise that can be used to help with this, since it should be resolved once filter is applied.

$w('#dataset1')
  .setFilter(wixData.filter().contains('title', title))
  .then(() => {
    // filter is set time to hide preloader
    $w('#preloader').hide('FadeOut'); 
  })

Let me know if it helps.

Best regards, Max