As the number of apps increases day by day, I had to find an optimum solution to incrementally load the content.
So I run into the so called "Interception Observer", an observer whose role is to trigger some action, for example, when an element on the viewport became visible.
So the idea was to initially load 8 apps, then when the user scrolls and reaches the end of the page (or, the beginning of my footer), load other 8 apps.
This is the final IntersectionObserver code I am using:
var isLoading = false;
let footer = document.querySelector('footer');
let observer2 = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
// if I do not check isLoading, I risk to call loadMore while another request is still running, causing duplicates in the output
if (entry.isIntersecting && !isLoading) {
isLoading = true;
// show the loading spinner
$("#main").show();
// an ajax call to get 8 more apps and add them to the viewport
loadMore();
}
});
}, {threshold: 0.1, root: null });
observer2.observe(video);
Thanks to this code I've achieved a great speedup in the first loading.
I didn't measure it but it's noticeable (loading 8 apps instead of all of them is a big difference).
Take a look if you're interested!