import-on-visibility

To lazy load React components on demand, use an IntersectionObserver-based wrapper to dynamically import modules when they become visible in the viewport. This pattern delays loading off-screen content until needed, improving initial page performance.

Import on visibility is a web performance technique that dynamically loads off-screen components only when they enter the viewport. By deferring non-visible content, it reduces initial bundle size, saves bandwidth, and improves perceived load speed.

Yes, you can use IntersectionObserver with compatibility-focused React libraries like react-lazyload or react-loadable-visibility. These tools provide wrapper components to trigger dynamic imports for below-the-fold content as users scroll.

The best way to reduce initial bundle size for a heavy React dashboard is applying visibility-based lazy loading. By dynamically importing charts and media tiles only when they enter the viewport, you significantly improve Largest Contentful Paint.

Lazy loading components requires browser compatibility checks because the IntersectionObserver API may not be supported in older browsers. You must implement proper loading fallbacks to ensure modules still load correctly if the API is unavailable.