Comparison
Skeleton screenvsSuspense boundary
Skeleton screen
you show grey blocks the shape of the content instead of a spinner while the data loads.
A placeholder that mimics the layout of the content that is coming. It improves perceived speed and, more usefully, reserves the space so nothing shifts when the real content lands. It becomes a liability when the skeleton's shape does not match the result, which turns one layout shift into two.
Full entry →Suspense boundary
you wrapped the slow part in a boundary and the rest of the page rendered without waiting for it.
A declared point in the tree where a fallback is shown while descendants are still loading, letting the rest of the page render around it. It replaces per-component loading flags with one place that decides what the pending state looks like. Where you place the boundary is a design decision, not a technical one: too high and the whole page flashes, too low and the layout fills in as a series of jumps.
Full entry →