Custom Suspense Fallback for Layouts
Dawid Michota
Introduce a way to define a default Suspense fallback for:
- All routes globally,
- Or, at minimum, for all routes rendered by a specific layout.
Expected benefits:
- Remove redundant Suspense wrappers in every route file.
- Guarantee a unified UX by enforcing one loading indicator without manual repetition.
- Make architecture cleaner and maintenance substantially easier for large codebases with many async routes.
Example:
Allow specifying a fallback prop on layouts, e.g.:
export function Layout({ children }) {
return (
<Suspense fallback={<LoadingIndicator />}>
<Stack>
...
</Stack>
</Suspense>
);
}
or
<Stack
suspenseFallback={<LoadingIndicator />}
>
<Stack.Screen/>
<Stack.Screen/>
<Stack.Screen/>
/Stack>