Suspense

<Suspense fallback={...}>children</Suspense> shows fallback while any resource read inside it is loading for the first time.

• The reader's boundary decides. A resource holds the Suspense that encloses the place where data() is read, not the place where useResource was called. Creating a resource in a page component and reading it inside a Suspense below shows that boundary's fallback.
• Children are created once and stay alive. While the fallback is visible the child components still exist, keep their state, and their resources keep loading. The boundary only switches what is displayed.
• Lists wait for the reveal. The boundary's content is not inserted into the page while the fallback is shown, so nothing reads the lists inside it: the rows of a For or Index (and their resources) are built when the content is first displayed. Components written directly in the children and Show branches that are already open are built at once.
• User effects wait for the first resolve. useEffect and onMount created below a boundary are held while the boundary has a pending first load, and start once it has resolved for the first time. Render effects (the DOM bindings) are never held, and a boundary that has resolved once never holds again.
• Nested boundaries are independent. A pending resource suspends only the nearest boundary around its reader.
• Only the first load suspends. After a value exists, refetch() and source changes move the state to refreshing and keep showing the old value. The fallback does not come back.
• No boundary, no hold. A pending read outside any Suspense returns undefined; nothing waits.
• latest, state, loading and error never suspend. Read them for inline loading indicators.

Put the boundary as close to the loading content as makes sense. One boundary around the page shows one spinner for everything; one around each independent block lets blocks appear as they arrive.