How do you implement skeleton screens or loading states for CSR data fetching?

Question

Accepted Answer

Skeleton screens are placeholder UI that mirror the layout of final content, showing users what to expect while data loads. In CSR-heavy Next.js applications, they're essential for reducing perceived latency and preventing jarring layout shifts. You can implement them through conditional rendering with loading states, CSS-based skeleton components with shimmer animations, and for more advanced scenarios, React Suspense boundaries integrated with data fetching libraries like SWR or React Query that handle loading states automatically . Conditional rendering with useState: Track loading state manually with boolean flags and render skeleton components while data loads . CSS skeleton components: Create reusable skeleton components that mimic your content's structure with animated gradient backgrounds . Suspense integration: Use React Suspense with data fetching libraries that support suspense mode, allowing skeleton fallbacks at component boundaries . SWR/React Query built-in states: Leverage the isLoading, isValidating, and error states returned by these hooks to conditionally render skeletons . ```jsx 'use client'; import { useState, useEffect } from 'react'; import { SkeletonCard } from '@/components/SkeletonCard'; import { ProductCard } from '@/components/ProductCard'; export default function ProductsPage() { const [products, setProducts] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { fetch('/api/products') .then(res => res.json()) .then(data => { setProducts(data); setLoading(false); }) .catch(err => { setError(err.message); setLoading(false); }); }, []); if (error) return

Error: {error}

; return (

{loading ? Array(6).fill(0).map((_, i) => ) : products.map(product => ) }

); } // components/SkeletonCard.tsx export function SkeletonCard() { return (

); } ``` ```css /* styles/skeleton.css */ .skeleton { background: linear-gradient( 90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75% ); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Apply to skeleton elements */ .skeleton-text { height: 1rem; border-radius: 0.25rem; } .skeleton-image { width: 100%; height: 200px; border-radius: 0.5rem; } ``` ```jsx // components/ShimmerSkeletonCard.tsx import '@/styles/skeleton.css'; export function ShimmerSkeletonCard() { return (

); } ``` SWR provides built-in loading states that make skeleton implementation cleaner. The `isLoading` flag indicates the initial load, while `isValidating` shows background re-fetches. You can combine these with skeleton components that automatically show and hide based on data availability. The key advantage is that SWR handles caching and revalidation, so after the first load, users may see cached data instantly while skeletons only appear during the initial visit or when cache is invalidated . ```jsx 'use client'; import useSWR from 'swr'; import { SkeletonProfile } from '@/components/SkeletonProfile'; const fetcher = (url) => fetch(url).then(r => r.json()); export default function UserProfile({ userId }) { const { data, error, isLoading } = useSWR( `/api/users/${userId}`, fetcher ); if (error) return

Failed to load user

; if (isLoading) return ; return (

{data.name}

{data.bio}

); } // components/SkeletonProfile.tsx export function SkeletonProfile() { return (

); } ``` React Query offers similar capabilities with its `useQuery` hook returning `isLoading`, `isFetching`, and `error` states. The pattern is nearly identical to SWR, but React Query provides additional features lik

How do you implement skeleton screens or loading states for CSR data fetching?

Implement skeleton screens in CSR using conditional rendering with loading states, CSS skeleton animations, and Suspense boundaries for data fetching with libraries like SWR or React Query

How do you implement skeleton screens or loading states for CSR data fetching?

Implement skeleton screens in CSR using conditional rendering with loading states, CSS skeleton animations, and Suspense boundaries for data fetching with libraries like SWR or React Query

Scenario Questions

Follow-up Questions