What is there to render but loading states when there's no data?
I know I sound like a broken record, but these two deep dives answer all these questions:
1. https://reactjs.org/docs/concurrent-mode-suspense.html
2. https://reactjs.org/docs/concurrent-mode-patterns.html
I hope they’re helpful.
const myApp = () => (
<Header />
<Body />
<Footer />
Body can make the network request, and store the result in state. Since the network request took 200ms, Header and Footer have already rendered.
Everything else, or nothing prior to some threshold, or what you specify and where within the Suspense abstractions. Since you don't know exactly when all of the data is ready in different parts across time, manually coordinating all of it without a cohesive declarative paradigm results in more code and more errors, and more bad UX of flashing spinners and flickering loading states.
The point of concurrent rendering and Suspense are to abstract at a higher lever, or more general terms what to do and what to render when there's no data.