How do I prevent layout shifts when lazy loading?

The skill suggests granular Suspense boundary placement combined with skeleton loading patterns to maintain visual stability and improve CLS (Cumulative Layout Shift).

Does it handle network failures during loading?

Absolutely, it provides Error Boundary patterns specifically designed to catch and gracefully handle network failures when a lazy-loaded module fails to fetch.

Can I use this for route-based splitting?

Yes, it includes specific patterns for React Router 7 and standard route-based dynamic imports to ensure pages are only loaded when navigated to.

How does this skill help with React 19 performance?

It provides standardized patterns for the new use() hook and updated Suspense behaviors to ensure efficient, non-blocking resource loading and promise unwrapping.

React Lazy Loading Patterns

Name: React Lazy Loading Patterns
Author: yonatangross

byyonatangross

•

Design Tools

Optimizes web performance using React 19 code splitting, Suspense boundaries, and advanced preloading strategies.

Standardize your frontend performance optimization with proven patterns for lazy loading and code splitting. This skill equips Claude with the expertise to implement route-based splitting, intersection observer-triggered loading, and sophisticated preloading techniques using React.lazy and Suspense. It focuses on reducing initial bundle sizes, improving Core Web Vitals, and managing complex loading states through granular boundaries and skeleton screens, ensuring a seamless user experience in large-scale React applications while maintaining a clean architectural footprint.

Key Features

01Intersection Observer patterns for deferred loading of below-the-fold content

0269 GitHub stars

03Intent-based preloading and prefetching strategies on hover or focus

04Standard React.lazy and Suspense implementation for component splitting

05Vite and Rollup bundle analysis integration with manual chunking advice

06Route-level splitting configurations for React Router 7.x

Use Cases

01Reducing initial page load time and TTI for large Single Page Applications

02Optimizing Core Web Vitals by prioritizing critical above-the-fold assets

03Delaying the load of heavy third-party libraries like charts or text editors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit lazy-loading-patterns

For use in Claude.ai and ChatGPT

Key Features

01Intersection Observer patterns for deferred loading of below-the-fold content

0269 GitHub stars

03Intent-based preloading and prefetching strategies on hover or focus

04Standard React.lazy and Suspense implementation for component splitting

05Vite and Rollup bundle analysis integration with manual chunking advice

06Route-level splitting configurations for React Router 7.x

Use Cases

01Reducing initial page load time and TTI for large Single Page Applications

02Optimizing Core Web Vitals by prioritizing critical above-the-fold assets

03Delaying the load of heavy third-party libraries like charts or text editors

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit lazy-loading-patterns

For use in Claude.ai and ChatGPT