loading.tsx is a Suspense boundary around the whole segment
It is convenient and it is coarse: the entire route shows the skeleton until the slowest thing resolves. A boundary around 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 whose data is all slow. Use inline boundaries when only part of it is.
nextjs