lazy-loading_skill

Overview

This skill helps teams avoid loading all data upfront by guiding when and how to fetch only what the user actually needs. It focuses on reducing initial page load time, saving bandwidth and memory, and improving perceived performance. Use it to decide which data is critical at render and which can be deferred.

How this skill works

The skill inspects common eager-loading patterns and recommends replacing broad Promise.all or bulk-fetch strategies with targeted lazy-loading techniques. It describes load-on-interaction, load-on-scroll (Intersection Observer), route-based code/data splitting, and pagination/infinite scroll. It also gives a pressure-resistance protocol to rebut common rationalizations for eager loading.

When to use it

• Initial page load is slow or exceeds 1–2 seconds
• Pages that fetch data for hidden tabs, collapsed sections, or below-the-fold content
• Dashboards or lists that currently load many independent resources in parallel
• When you fetch large blobs or full histories that are rarely viewed
• When network or memory usage is a concern on mobile or low-bandwidth users

Best practices

• Load only immediately visible and critical data on initial render
• Use useQuery/useLazyQuery patterns to defer noncritical fetches until interaction, mount, or intersection
• Prefer pagination or infinite scroll over loading full lists at once
• Parallelize only the small set of critical requests; lazy-load expensive or optional resources
• Instrument perceived performance and measure load times before and after applying lazy loading

Example use cases

• Dashboard: fetch profile and preferences on mount; load analytics when analytics tab is selected
• Notifications: load when header mounts or when user opens the notifications panel
• History/Activity: load when scrolled into view using an Intersection Observer
• Analytics page: lazy-load route bundle and data with React Suspense or route-level code splitting
• Order list: implement pagination or load-more to avoid fetching full history