What stays visible when a Suspense boundary moves: five loading cases
A search request makes the heading and input disappear along with the results. Moving Suspense around the results can change that behavior. Keeping previously displayed results also depends on how the update is scheduled. This experiment checks the DOM in five configurations of boundary placement, transitions, and keys. Put controls that must remain available outside the boundary, then decide…
React's Suspense boundary can affect what remains visible during a loading state. By adjusting the scope of the boundary, developers can control whether certain elements, like a search input or previous results, stay on the screen while new data loads. This test examines how different configurations impact visibility.
To evaluate the effect, five scenarios were created by varying the placement of the Suspense boundary, transitions, and keys. Each scenario involved a search request that initialized a promise, which resolved to display a result. The DOM was inspected at various stages to observe which elements remained visible.
In the broad boundary configuration, which includes all elements under the shell, only the fallback was visible when the initial promise was pending. However, once the result resolved, the broad boundary showed the new result with no fallback. In contrast, the narrow boundary, which only encompasses the result, displayed both the heading, input, and the new result during the transition, but the fallback was hidden.
The experiment showed that a transition alone does not guarantee that the loading UI won't be displayed. If previously available controls or instructions disappear, they should be moved outside the boundary. Suspense's granularity focuses on how content appears together, not the number of components.
When a result is already available, it is considered visible only when its text is displayed. A changed key in the narrow boundary resets the assumption about retaining content, even during a transition. The input remains unaffected by the boundary's key changes and retains its value throughout the process.
In summary, the experiment highlights the importance of strategic boundary placement and the use of transitions in React's Suspense to maintain visibility of certain elements during loading states.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
