Skip to content

.tip

· one of the small things

loading.tsx is a Suspense boundary around the whole segment

It's convenient, and it's coarse: the whole route shows the skeleton until the slowest thing resolves. A boundary around just the one slow component keeps the rest of the page instant.

<Suspense fallback={<ChartSkeleton />}>
  <Chart range={range} />
</Suspense>

Use loading.tsx for the first paint of a route where all the data is slow, and inline boundaries when only part of it is.

nextjs