Fix notification provider order, add comments (#1905)

* Fix notification provider order, add comments

* Remove log

3 files changed, 61 insertions, 45 deletions

diff --git a/src/App.native.tsx b/src/App.native.tsx
index 5c4918f91..60bce0578 100644
--- a/src/App.native.tsx
+++ b/src/App.native.tsx
@@ -72,22 +72,28 @@ const InnerApp = observer(function AppImpl() {
     return null
   }
 
+  /*
+   * Session and initial state should be loaded prior to rendering below.
+   */
+
   return (
-    <ThemeProvider theme={colorMode}>
-      <analytics.Provider>
-        <RootStoreProvider value={rootStore}>
-          <I18nProvider i18n={i18n}>
-            {/* All components should be within this provider */}
-            <RootSiblingParent>
-              <GestureHandlerRootView style={s.h100pct}>
-                <TestCtrls />
-                <Shell />
-              </GestureHandlerRootView>
-            </RootSiblingParent>
-          </I18nProvider>
-        </RootStoreProvider>
-      </analytics.Provider>
-    </ThemeProvider>
+    <UnreadNotifsProvider>
+      <ThemeProvider theme={colorMode}>
+        <analytics.Provider>
+          <RootStoreProvider value={rootStore}>
+            <I18nProvider i18n={i18n}>
+              {/* All components should be within this provider */}
+              <RootSiblingParent>
+                <GestureHandlerRootView style={s.h100pct}>
+                  <TestCtrls />
+                  <Shell />
+                </GestureHandlerRootView>
+              </RootSiblingParent>
+            </I18nProvider>
+          </RootStoreProvider>
+        </analytics.Provider>
+      </ThemeProvider>
+    </UnreadNotifsProvider>
   )
 })
 
@@ -102,19 +108,21 @@ function App() {
     return null
   }
 
+  /*
+   * NOTE: only nothing here can depend on other data or session state, since
+   * that is set up in the InnerApp component above.
+   */
   return (
     <QueryClientProvider client={queryClient}>
       <SessionProvider>
         <ShellStateProvider>
           <PrefsStateProvider>
             <MutedThreadsProvider>
-              <UnreadNotifsProvider>
-                <InvitesStateProvider>
-                  <ModalStateProvider>
-                    <InnerApp />
-                  </ModalStateProvider>
-                </InvitesStateProvider>
-              </UnreadNotifsProvider>
+              <InvitesStateProvider>
+                <ModalStateProvider>
+                  <InnerApp />
+                </ModalStateProvider>
+              </InvitesStateProvider>
             </MutedThreadsProvider>
           </PrefsStateProvider>
         </ShellStateProvider>
diff --git a/src/App.web.tsx b/src/App.web.tsx
index 7bb6cb256..b734aea08 100644
--- a/src/App.web.tsx
+++ b/src/App.web.tsx
@@ -60,22 +60,28 @@ const InnerApp = observer(function AppImpl() {
     return null
   }
 
+  /*
+   * Session and initial state should be loaded prior to rendering below.
+   */
+
   return (
-    <ThemeProvider theme={colorMode}>
-      <analytics.Provider>
-        <RootStoreProvider value={rootStore}>
-          <I18nProvider i18n={i18n}>
-            {/* All components should be within this provider */}
-            <RootSiblingParent>
-              <SafeAreaProvider>
-                <Shell />
-              </SafeAreaProvider>
-            </RootSiblingParent>
-          </I18nProvider>
-          <ToastContainer />
-        </RootStoreProvider>
-      </analytics.Provider>
-    </ThemeProvider>
+    <UnreadNotifsProvider>
+      <ThemeProvider theme={colorMode}>
+        <analytics.Provider>
+          <RootStoreProvider value={rootStore}>
+            <I18nProvider i18n={i18n}>
+              {/* All components should be within this provider */}
+              <RootSiblingParent>
+                <SafeAreaProvider>
+                  <Shell />
+                </SafeAreaProvider>
+              </RootSiblingParent>
+            </I18nProvider>
+            <ToastContainer />
+          </RootStoreProvider>
+        </analytics.Provider>
+      </ThemeProvider>
+    </UnreadNotifsProvider>
   )
 })
 
@@ -90,19 +96,21 @@ function App() {
     return null
   }
 
+  /*
+   * NOTE: only nothing here can depend on other data or session state, since
+   * that is set up in the InnerApp component above.
+   */
   return (
     <QueryClientProvider client={queryClient}>
       <SessionProvider>
         <ShellStateProvider>
           <PrefsStateProvider>
             <MutedThreadsProvider>
-              <UnreadNotifsProvider>
-                <InvitesStateProvider>
-                  <ModalStateProvider>
-                    <InnerApp />
-                  </ModalStateProvider>
-                </InvitesStateProvider>
-              </UnreadNotifsProvider>
+              <InvitesStateProvider>
+                <ModalStateProvider>
+                  <InnerApp />
+                </ModalStateProvider>
+              </InvitesStateProvider>
             </MutedThreadsProvider>
           </PrefsStateProvider>
         </ShellStateProvider>
diff --git a/src/state/queries/preferences/index.ts b/src/state/queries/preferences/index.ts
index 4f10b01a6..7e16d4e9a 100644
--- a/src/state/queries/preferences/index.ts
+++ b/src/state/queries/preferences/index.ts
@@ -32,6 +32,7 @@ export const usePreferencesQueryKey = ['getPreferences']
 export function usePreferencesQuery() {
   const {agent, hasSession} = useSession()
   return useQuery({
+    enabled: hasSession,
     queryKey: usePreferencesQueryKey,
     queryFn: async () => {
       const res = await agent.getPreferences()
@@ -83,7 +84,6 @@ export function usePreferencesQuery() {
       }
       return preferences
     },
-    enabled: hasSession,
   })
 }