fix: no multiple suspense containers for bottom tabs stack itself (?)

web-ridge · Jan 4, 2025 · 28c8c51 · 28c8c51
1 parent 4a86f06
commit 28c8c51
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 27 deletions.
diff --git a/src/NavigationNestedProvider.tsx b/src/NavigationNestedProvider.tsx
@@ -18,9 +18,8 @@ function NavigationNestedProvider({ children }: { children: any }) {
   const id = React.useId();
   const rootKey = 'navigationModalProvider_' + id.replace(':', '--');
   const { theme } = React.useContext(OptimizedContext);
-  const { screens, navigationRoot, ...rest } = React.useContext(
-    RidgeNavigationContext
-  );
+  const { screens, navigationRoot, SuspenseContainer, ...rest } =
+    React.useContext(RidgeNavigationContext);
 
   const rootNavigator = React.useMemo(() => {
     const stateInfos = [
@@ -36,7 +35,11 @@ function NavigationNestedProvider({ children }: { children: any }) {
         route: makeVariablesNavigationFriendly(
           rootKeyAndPaths(rootKey, screen.path)
         ),
-        renderScene: () => <screen.element />,
+        renderScene: () => (
+          <SuspenseContainer>
+            <screen.element />
+          </SuspenseContainer>
+        ),
         trackCrumbTrail: true,
         preloadId: screen.path,
       })),
@@ -48,7 +51,7 @@ function NavigationNestedProvider({ children }: { children: any }) {
     navigator.navigate(rootKey);
 
     return navigator;
-  }, [rootKey, screens]);
+  }, [SuspenseContainer, rootKey, screens]);
 
   const navigationRootWithModal = React.useMemo(
     () => ({
@@ -67,6 +70,7 @@ function NavigationNestedProvider({ children }: { children: any }) {
       value={{
         screens,
         ...rest,
+        SuspenseContainer,
         rootNavigator,
         navigationRoot: navigationRootWithModal,
       }}
@@ -81,11 +85,7 @@ function NavigationNestedProvider({ children }: { children: any }) {
             return (
               <>
                 <HiddenNavbarWithSwipeBack />
-                <OptimizedContextProvider
-                  withSuspenseContainer={false}
-                  state={state}
-                  data={data}
-                >
+                <OptimizedContextProvider state={state} data={data}>
                   {state.key === rootKey ? children : state.renderScene()}
                 </OptimizedContextProvider>
               </>

diff --git a/src/NavigationProvider.tsx b/src/NavigationProvider.tsx
@@ -155,7 +155,11 @@ export default function NavigationProvider<ScreenItems extends BaseScreen[]>({
                       route: makeVariablesNavigationFriendly(
                         getScreenKey(rootKey, tab, screen.path)
                       ),
-                      renderScene: () => <screen.element />,
+                      renderScene: () => (
+                        <SuspenseContainer>
+                          <screen.element />
+                        </SuspenseContainer>
+                      ),
                       trackCrumbTrail: !isTheSame,
                       screen,
                       preloadId: screen.path,
@@ -171,7 +175,11 @@ export default function NavigationProvider<ScreenItems extends BaseScreen[]>({
                 key: rootKey,
                 route: rootKey,
                 trackCrumbTrail: false,
-                renderScene: () => <root.child.element />,
+                renderScene: () => (
+                  <SuspenseContainer>
+                    <root.child.element />
+                  </SuspenseContainer>
+                ),
                 screen: root.child,
                 preload: () => preloadRoot(rootKey),
                 preloadId: root.child.path,
@@ -181,7 +189,11 @@ export default function NavigationProvider<ScreenItems extends BaseScreen[]>({
                 route: makeVariablesNavigationFriendly(
                   rootKeyAndPaths(rootKey, screen.path)
                 ),
-                renderScene: () => <screen.element />,
+                renderScene: () => (
+                  <SuspenseContainer>
+                    <screen.element />
+                  </SuspenseContainer>
+                ),
                 trackCrumbTrail: true,
                 screen,
                 preloadId: screen.path,
@@ -191,7 +203,7 @@ export default function NavigationProvider<ScreenItems extends BaseScreen[]>({
       })
       .flat();
     return new StateNavigator(navigators, getHistoryManager(basePath));
-  }, [basePath, navigationRoot, preloadRoot, screens]);
+  }, [SuspenseContainer, basePath, navigationRoot, preloadRoot, screens]);
 
   const preloadLink = React.useCallback(
     (url: string) => {
@@ -333,11 +345,7 @@ export default function NavigationProvider<ScreenItems extends BaseScreen[]>({
         <NavigationHandler stateNavigator={rootNavigator}>
           <NavigationStackWrapper>
             {children && (
-              <OptimizedContextProvider
-                state={null}
-                data={undefined}
-                withSuspenseContainer={false}
-              >
+              <OptimizedContextProvider state={null} data={undefined}>
                 {children}
               </OptimizedContextProvider>
             )}

diff --git a/src/contexts/OptimizedContext.tsx b/src/contexts/OptimizedContext.tsx
@@ -23,12 +23,10 @@ export function OptimizedContextProvider({
   data,
   state,
   children,
-  withSuspenseContainer = true,
 }: {
   data: any;
   state: State | null;
   children: any;
-  withSuspenseContainer?: boolean;
 }) {
   const {
     preloadedCache,
@@ -37,7 +35,6 @@ export function OptimizedContextProvider({
     preloadScreen,
     preloadElement,
     theme,
-    SuspenseContainer,
   } = React.useContext(RidgeNavigationContext);
   const {
     stateNavigator,
@@ -73,11 +70,7 @@ export function OptimizedContextProvider({
   );
   return (
     <OptimizedContext.Provider value={value}>
-      {withSuspenseContainer ? (
-        <SuspenseContainer>{children}</SuspenseContainer>
-      ) : (
-        <React.Suspense fallback={null}>{children}</React.Suspense>
-      )}
+      <React.Suspense fallback={null}>{children}</React.Suspense>
     </OptimizedContext.Provider>
   );
 }