Lyearn's website has configurable user homepage that links to a lot of content—courses, articles, live learning sessions, and various event cards such as meetings, habit tracking, todos, and more. Each of these cards was powered by its own MongoDB document. In other words, this was a full-blown dashboard.

Initially, all of the data was fetched using a single homepage GraphQL query. This query collated data from a multitude of MongoDB documents, which meant that users had to wait for several seconds for the complete API response before anything appeared on the screen. A loader was shown until the data arrived, but on longer dashboards, the waiting time could leave a poor first impression.

a loader annoyed informed the users that their content was loading

To address this challenge, I rethought the frontend data fetching strategy:

• Lightweight Initial Query:

  I created a new homepageLight query that only fetched the dashboard’s layout along with widget IDs and names. This significantly reduced the response time, delivering the basic structure in under half a second.




• Progressive Widget Loading:

  Instead of waiting for every piece of data, I loaded the widgets separately. As users scrolled, widgets were fetched and displayed dynamically. In the meantime, I applied a subtle shimmering effect to indicate that content was loading.




• Batch Processing with a Custom React Hook:

  I further refined the solution by loading widgets in batches of three. Here’s the approach:

  1. Initial Load: Fetch the lightweight dashboard layout using homepageLight.

  2. Batch Loading: Using a custom React hook, load the first batch of three widgets immediately. As soon as these loaded, trigger the next batch, and so on until all widgets were displayed.

  
  

  This method drastically improved the perceived performance, reducing the overall wait time and ensuring that users quickly saw the dashboard’s structure even if the detailed content loaded gradually.

Sneak peek of the logic 👀

In our development instance, these changes brought the homepage loading time down from over three seconds to under half a second with barely any backend modifications. This experience taught me the value of rethinking data fetching strategies. Sometimes, the key to a better user experience is simply breaking down a big problem into smaller, more manageable parts - visible progress helps, and this isn’t just about coding :)

Before (top) and after (bottom) the optimization