September 23, 2019

IntersectionObserver 0, Mauro 1

Mauro @onipot

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!

Loading comments...
Today's Top Milestones
  • Hit $2,000 MRR from 300 paying subscribers!
    Big milestone for the two of us at Plausible Analytics today! We've just hit $2,000 MRR from 300 paying subscribers with our s
  • Trended as #1 repo on GitHub over the weekend! 🔥
    After Addy Osmani tweeted about our app last Thursday, there was a lot of noise about Res
  • First paying customer🎉🎉
    I took some days off to visit Viena during the weekend. On Sunday night I opened the mail and found one of the best notifications that I've ever recei
  • MVP release
    Today I am happy to announce that KnowEthereum is live and available to the public! It took me a bit longer than expected as I wanted to make sure tha
  • Technology investment, blog, and COVID stuck 🐜
    Our blog section becomes alive ❤️ https://scrapingant.com/blog/ And even some articles were at the main of HackerNews. 🤓 Blog writing is a pretty goo
  • New logo
    Maybe the logo creation is not as important as the rest of the items that need to be created, but enjoying what you do is. There are many other things
  • Update 98: Added $100 in MRR, $1600 MRR
    Happy Monday, Indie Hackers! 1. What we worked on last week and how well did we achieve our goals? ✅ Added 1 new customer. +$100 MRR. We are currently
  • Turning visits to users
    I'm getting quite a lot of traffic at getdevinsight.com but so far getting them to sign up has been quite a challenge. Following lots of feedback and
  • Light Blue Vue Admin Template is on Product Hunt
    ⚡️Light Blue Vue Admin Template is on Product Hunt today! Try it out, and share your first impressions with our team. We read all reviews with interes
  • Finished the Project
    It took 6 weeks, but I'm finally done building the minimum viable product i.e. SQL Transaction Log Recovery. I worked mostly nights and weekends, and