Background:
I have a page with a repeater (lets call it /games). Each item in the repeater has a Title, a Thumbnail Image and a link to its individual page.
Also on the page are Selection Tags and a text search option, so users can narrow down the games and find specific ones they are looking for. I save the selection tags and text search term in Session Storage, so that users can click on thumbnails and go to that individual game’s page, then come back to all the games and have their search filters active. Users like this feature because they will often search for a few terms, and then use 3 or so activities back-to-back, before searching for different terms.
Problem:
When users return to /games, they first witness a flash/flicker/blink of the entire repeater, before the repeater gets narrowed-down to the items in their searches.
See the video here:
Question:
How can I prevent this flash/flicker/blink?
$w.onReady( function() {
loadFiltersOnFirstTime();
loadPageNumberIfSaved();
showSearchFilterInstructions();
$w('#languageTags').onChange( function(event) {
selectionTagsOnChange('language', '#languageTags')
})
...
$w('#clearButton').onClick( function(event) {
clearSelectionTags();
clearSearchBar();
session.clear();
loadDataToRepeaterForAllFilterCategories();
})
$w('#pagination1').onClick( function() {
pageNumber = $w('#pagination1').currentPage;
saveNewPageNumber($w('#pagination1').currentPage);
})
})
function loadFiltersOnFirstTime() {
searchQuery = loadSearchQuery();
$w('#searchBar').value = searchQuery;
if (filterCategoriesIsEmpty(filterCategories) && searchQueryIsEmpty(searchQuery)) {
loadDataToRepeaterForAllFilterCategories();
} else {
setSelectionTagsVisually();
loadDataToRepeaterForAllFilterCategories();
}
}
function loadDataToRepeaterForAllFilterCategories() {
$w(dataset).onReady( function() {
var filter = wixData.filter();
for (var fieldCategory in filterCategories) {
if (filterCategories[fieldCategory].length > 0) {
filter = filter.hasAll(fieldCategory, filterCategories[fieldCategory]);
}
}
filter = filter.contains(searchQueryColumn, searchQuery);
$w(dataset).setFilter(filter)
.then(() => {
const pageCount = $w(dataset).getTotalPageCount();
const totalCount = $w(dataset).getTotalCount()
$w('#paginationInfo').text = `There are ${pageCount} pages (${totalCount} results).`
})
$w(dataset).refresh();
});
}
... more code that may not be relevant ...