4
0 Comments

IntersectionObserver 0, Mauro 1

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!

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 47 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 27 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments How I Launched FrontendEase 13 comments