⏳ Loading States and Fallback UI

? Quick Overview

Loading states inform users that content is being fetched and the application is responsive. React uses Suspense and fallback UI to handle asynchronous component loading smoothly.

? Key Concepts

• Suspense boundaries
• Fallback UI components
• Skeleton loaders
• Concurrent rendering

? Syntax / Theory

React Suspense allows you to delay rendering until a component finishes loading while displaying a fallback UI.

? Code Example — Basic Suspense

// Lazy loading a component with Suspense fallback
import React, { lazy, Suspense } from "react";

const Profile = lazy(() => import("./Profile"));

function App() {
return (
<div>
<Suspense fallback={<p>Loading profile...</p>}>
<Profile />
</Suspense>
</div>
);
}

export default App;

? Spinner Loader Example

// Reusable loading spinner component
function LoadingSpinner() {
return (
<div className="spinner">
Loading...
</div>
);
}

export default LoadingSpinner;

? Skeleton Loader Example

// Skeleton placeholder mimicking content layout
function ProfileSkeleton() {
return (
<div>
<div className="skeleton title"></div>
<div className="skeleton text"></div>
</div>
);
}

export default ProfileSkeleton;

? Live Explanation

Fallback UI is shown until the component finishes loading. Skeletons reduce layout shifts, while spinners show activity.

? Use Cases

• API-driven dashboards
• Lazy-loaded routes
• Media-heavy pages
• Slow network simulations

? Interactive Diagram

?️ Interactive Playground