Hi all,
I have a page which fetches about 40 records from a Dataset which is taking about 10 secs to load.
The data is filtered from a larger collection of items, total items in the collection is about 80.
Images are logos which are 90x90 pixels and sizes range from 3 - 40KB each.
I call a function after each item using onItemReady in my repeater. (Page code below)
I’ve also tried delaying the data load using async/await in my dataset.onReady function, but it doesn’t seem to help with the page load time.
Could it be to do with the function that runs for each item? It’s is pretty straightforward stuff with sessions and hide/show elements.
I have read through the forums and documentation and it seems to suggest that if I ditch the Dataset API and worked directly with the Data API in the backend, it should improve performance?
Was hoping that someone could take a look at my code in the page to confirm if the above will indeed have significant performance improvements before I jump in and effectively re-code all my other pages, which is quite a lot of re-work.
I have 5 other such pages which are performing at acceptable levels, but I did have to add pre-loaders to let the user know that it’s loading (on mobile version). This is because although the page URL changes immediately on-click of a link, the page itself remains on the current page and doesn’t switch to the new page immediately. Again, this seems to be more obvious on the mobile view. Does anyone else have this experience?
Editor link to the ‘slow’ page: https://editor.wix.com/html/editor/web/renderer/edit/84d598ad-fbcd-44d3-a190-68a1fc62a7f0?metaSiteId=04e192bd-dbd0-409f-bdf3-24ac944e5fff&editorSessionId=c909774d-21fa-49be-beaa-b008da720ae9&referralInfo=dashboard
Link to my actual site: https://tribal.sg
Thanks in advance for any suggestions.
$w.onReady(function () {
//TODO: write your page related code here...
$w("#slideshow3").changeSlide(1)
if (session.getItem("selectedList") === "undefined" ||
session.getItem("selectedList") === null)
{
var container = []
session.setItem("selectedList", JSON.stringify(container))
}
var selectedList = [];
selectedList = JSON.parse(session.getItem("selectedList"));
//display added items upon dataset loading
$w("#dataset1").onReady(async () => {
/* $w("#dataset1").setFilter(wixData.filter()
.eq("category", "Beauty"))
.catch( (err) => {
console.log(err);
} )*/
while($w('#dataset1').getCurrentPageIndex() < $w('#dataset1').getTotalPageCount()) {
await $w('#dataset1').loadMore();
}
});
$w("#repeater1").onItemReady(($item, itemData, index) => {
let itemID = itemData._id;
if (session.getItem(itemID) === "true") {
changeButtonView($item);
}
});
function changeButtonView($item){
let buttonText = $item("#button36").label
let itemObj = $item("#dataset1").getCurrentItem();
let itemID = itemObj._id;
if (buttonText === "Add to plan") {
//change button text and show banner
$item("#button36").label = "Remove from plan";
$item("#vectorImage27").show("slide", slideOptions2);
$item("#text114").show("slide", slideOptions2);
//set item as selected to true
session.setItem(itemID, "true");
//update session data for selectedList of benefits
const index = selectedList.indexOf(itemID);
if(index === -1){
selectedList.push(itemID);
console.log("Added " + itemID)
console.log(selectedList.length + " selected list length");
session.setItem("numberofSelected", selectedList.length)
$w("#text28").text = session.getItem("numberofSelected")
$w("#text28").show();
}
console.log("Added " + itemID)
console.log(selectedList + " Array")
session.setItem("selectedList", JSON.stringify(selectedList))
console.log(session.getItem("selectedList") + " Session")
}
if (buttonText === "Remove from plan") {
//change button text and hide banner
$item("#button36").label = "Add to plan";
$item("#vectorImage27").hide("slide", slideOptions2)
$item("#text114").hide("slide", slideOptions2)
//set item as selected to false
//console.log(itemID + " changeButtonView False");
session.setItem(itemID, "false");
//console.log(session.getItem(itemID) + " changeButtonView False");
//update session data for selectedList of benefits
const index = selectedList.indexOf(itemID) ;
if (index > -1) {
selectedList.splice(index, 1)
console.log("Removed " + itemID)
console.log(selectedList.length + " selected list length");
session.setItem("numberofSelected", selectedList.length)
$w("#text28").text = session.getItem("numberofSelected")
$w("#text28").show();
}
console.log(selectedList + " Array")
session.setItem("selectedList", JSON.stringify(selectedList))
console.log(session.getItem("selectedList") + " Session")
}
}