Skip to content

Commit 080f770

Browse files
committed
Update the suspense and pending UI guidance
1 parent e583f2d commit 080f770

1 file changed

Lines changed: 5 additions & 3 deletions

File tree

versioned_docs/version-8.x/suspense.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,11 @@ const RootStack = createNativeStackNavigator({
5959

6060
This fallback is still shown during the initial render, when there is no previously displayed screen to keep visible, or if a component suspends because of a state update that isn't wrapped in a transition.
6161

62-
This can be useful for [stack navigators](stack-navigator.md), where you'd keep the current screen visible during navigation and [show pending UI on the current screen](#showing-pending-ui-on-the-current-screen).
62+
This can be useful to keep the current screen visible during navigation in [stack navigators](stack-navigator.md). When blocking navigation this way, it's also important to [show pending UI on the current screen](#showing-pending-ui-on-the-current-screen) so it's clear that navigation is in progress. Otherwise, the user may not realize that tapping a button did anything.
6363

64-
It's not recommended for native tab navigators, where switching tabs by tapping the native tab bar doesn't run as a transition, so the fallback would hide the tab bar if a screen suspends.
64+
Because this boundary wraps the whole navigator, every screen that suspends keeps the current screen visible and blocks navigation until the destination is ready. If you'd rather show a loading UI right away for some screens, add a boundary around those screens instead.
65+
66+
A boundary around the navigator isn't recommended for native tab navigators, where switching tabs by tapping the native tab bar doesn't run as a transition, so the fallback would hide the tab bar if a screen suspends.
6567

6668
### Around each screen
6769

@@ -83,7 +85,7 @@ const RootStack = createNativeStackNavigator({
8385
});
8486
```
8587

86-
This is ideal for tab and [drawer navigators](drawer-navigator.md), as it keeps the tab bar or drawer visible and shows the loading UI only in the screen's area.
88+
This works well for all navigators. It's especially important in tab and drawer navigators, where it keeps the tab bar or drawer visible and shows the loading UI in the screen's area as soon as you navigate.
8789

8890
### Around a section inside a screen
8991

0 commit comments

Comments
 (0)