Hi all,
My website uses one database to populate different repeaters on the same page which are filtered with code.
When the site loads, first all the content except the repeaters load, then the repeaters load with NO filtering (showing all items), and THEN each repeater updates to show only its’ properly filtered content.
Any tips on how to make this process faster? Can I filter the repeaters before the page is ready somehow so that the user doesn’t see incorrect database items before the filtering happens?
Here is my page code:
import wixData from ‘wix-data’;
$w.onReady( function () {
//TODO: write your page related code here…
//featured events repeater
$w(“#dataset1”).onReady( () => {
let d = new Date(); // get today’s date
wixData.query(“events”)
.include(“venue”)
.ge(“date”, d)
.eq(“approved”, true )
.eq(“featured”, true )
.ascending(‘date’)
.limit(3)
.find()
.then((results) => {
$w(“#featuredRepeater”).data = results.items;
});
});
//upcoming events repeater
$w(“#dataset1”).onReady( () => {
let d = new Date(); // get today’s date
wixData.query(“events”)
.include(“venue”, “category”)
.ge(“date”, d)
.eq(“approved”, true )
.ascending(‘date’)
.limit(10)
.find()
.then((results) => {
$w(“#todaysEventsRepeater”).data = results.items;
});
});
});
2 Likes
Hello Stacey,
The worst case scenario is that you hide the repeater until the filtering process is done and then show it when it is done filtering.
I would suggest filtering through the dataset and not through code as it will make it faster as well.
Can you post here the code for how you filter the dataset, maybe it can be optimized.
Thanks,
Majd
Hi Majd,
Thanks so much for the suggestion! I tried filtering the dataset by date, and it seems to make no difference on preview, the repeaters are still loading the old events first and then refreshing to include the correct ones. On publish, the same thing is happening, AND the further filters for each repeater are ignored. Here is the code (all within OnReady). Any suggestions?
let d = new Date(); // get today’s date
$w(“#dataset1”).setFilter( wixData.filter()
.ge(“date”, d)
.eq(“approved”, true )
);
//featured events repeater
$w(“#dataset1”).onReady( () => {
wixData.query(“events”)
.include(“venue”)
.eq(“featured”, true )
.ascending(‘date’)
.limit(3)
.find()
.then((results) => {
$w(“#featuredRepeater”).data = results.items;
});
});
//upcoming events repeater
$w(“#dataset1”).onReady( () => {
wixData.query(“events”)
.include(“venue”, “category”)
.ascending(‘date’)
.limit(10)
.find()
.then((results) => {
$w(“#todaysEventsRepeater”).data = results.items;
});
});
@staceynl what is (" #todaysEventsRepeater "). ? i’m getting an error on that ?
I too, am having this issue, as I have to use the corvid filtering to implement an OR condition.
$w.onReady( function () {
$w("#MyData").setFilter(wixData.filter()
.contains(“street”, “Street 1”)
.or(wixData.filter().contains(“street”, “Street 2”))
)
});
Loaded into the page code.
The unfiltered version loads in before it is replaced with the filtered version.
Furthermore, I’ve been trying to have the repeater load in collapse and expand upon the completion of the filter, but with having .expand right after the filter, the unaffected repeater still shows before the completion of the filter.
full code used:
$w.onReady( function () {
//TODO: write your page related code here…
$w(“#myData”).setFilter(wixData.filter()
.contains(“street”, “Street 1”)
.or(wixData.filter().contains(“street”, “Street 2”))
)
$w(“#repeater1”).onItemReady(($item, itemData) => {
$item(“#PhyAddress”).text = ‘’;
let newAddress = ‘’;
if (!(itemData.unitNum === null )) {
newAddress = newAddress + itemData.unitNum + ', ';
}
if (!(itemData.houseNum === null )) {
newAddress = newAddress + itemData.houseNum + ' ';
}
if (!($item.street === null )) {
newAddress = newAddress + itemData.street + '\n' + itemData.municipality + ', ' + itemData.province;
}
if (newAddress !== ‘’) {
$item("#PhyAddress").text = newAddress;
}
});
Did you ever find a solution? I see the same behavior.
Effectively what happened was that, since I was using the UI dataset implementation, it was loading the data from that dataset first, with the corvid javascript kicking in after it was loaded in. I believe I solved it by applying filters via the UI that would make nothing show up. Its important to note that sorts applied via UI will still exist after the javascript has taken its effect (if you didn’t alter them via corvid afterwards).
This won’t solve the problem entirely, but instead of data disappearing and reappearing differently, it just takes a small moment for your database to pop up. In my case I made a loading message that appeared until it was fully loaded in.
I suspect the most optimal solution (one that would remove the momentary load) would be to remove the UI dataset entirely, and introduce it to the page entirely via Corvid.
@andrewwsom Thanks - that’s actually what I’m doing now!
adding .then clause after adding you filter statement does the job.
See this link → https://www.wix.com/velo/forum/coding-with-velo/repeater-loads-before-it-is-filtered-properly
$w("#dataset1").setFilter(wixData.filter().ne("gender",firstItem.gender)
)
.then(()=>{$w("#repeater1").show();})