Lazy Component
Performance-optimized lazy loading components with intersection observer, progressive loading, and smart prefetching capabilities for optimal user experience.
Pro features
What the Pro version adds to this component.
Intersection Observer
Viewport detection with customizable threshold and rootMargin
Automatic Retry
Re-attempts a failing load retryCount times, retryDelay apart, then reports it through onError
Performance Analytics
Measured load and visibility timings delivered to analyticsCallback as a typed LazyLoadMetrics object
Batch Loading
Load large lists in optimized batches as they scroll into view
List Virtualization
Optional windowed rendering for very large lists with configurable overscan
Progressive Enhancement
Blur-up placeholders while content loads via enableProgressiveEnhancement and blurDataURL
Smart Prefetching
prefetch prepares below-the-fold content after prefetchDelay so it is ready before the reader arrives
Installation
Install via CLI
npx @moontra/moonui-cli add lazy-componentUsage
Examples
Lazy Image Gallery
Images decode only as they approach the viewport. aspectRatio reserves the box up front so nothing shifts, blurDataURL paints a placeholder, and priority opts the first tile out of lazy loading.
Progressive Image Loading
enableProgressiveLoading streams download progress through onProgress, fallbackSrc covers a broken source, and onLoad/onError drive the surrounding UI state.
Lazy List with Batch Loading
Items arrive in batches as the sentinel scrolls into view. onBatchLoad reports each range, and the scroll container is a focusable region so keyboard users can reach it.
Virtualized List
enableVirtualization windows the DOM to the visible slice plus overscan rows. Toggle the dataset to see the emptyState branch.
Progressive Content Loading
Heavy sections mount only when they approach the viewport. triggerOnce={false} releases a section again once it leaves, keeping long dashboards light.
Smart Prefetching
prefetch prepares the content prefetchDelay milliseconds after mount without waiting for the viewport, so the card is already rendered by the time the reader scrolls to it. The right-hand card keeps the default viewport-driven behaviour for comparison.
Retry & Error Handling
When the load callback throws, LazyComponent re-attempts up to retryCount times with retryDelay between attempts and finally reports the failure through onError. Use the button to switch the demo between a healthy and a failing load.
Load Analytics
enableAnalytics turns on timing collection and analyticsCallback receives the measured load and visibility durations, ready to forward to your RUM pipeline.
Blur-Up Progressive Enhancement
enableProgressiveEnhancement paints blurDataURL in place of the default skeleton until the section is ready, then fades the real content in over fadeInDuration.