Loading states are present for async content (skeletons, spinners)

Async components that render blank space while fetching data feel broken to users — they perceive the app as frozen, tap repeatedly, or abandon the page before content arrives. On 3G and flaky mobile networks the gap between navigation and first paint can stretch to several seconds, directly degrading Interaction to Next Paint and Cumulative Layout Shift (Core Web Vitals that feed Google ranking signals). Missing loading states also mask real failures: a stalled fetch looks identical to a successful empty state, so users cannot tell whether to wait or retry.

Wrap every async component with a loading state — either an isLoading guard returning a skeleton, or a <Suspense> boundary with a fallback. Skeleton screens that mirror the final layout reduce perceived latency more than generic spinners. Example:

import { Suspense } from 'react'

export default function Page() {
  return (
    <Suspense fallback={<CommentSkeleton count={3} />}>
      <CommentList />
    </Suspense>
  )
}