Fix notification provider order, add comments (#1905)

* Fix notification provider order, add comments

* Remove log

src/App.native.tsx

@@ -72,7 +72,12 @@ const InnerApp = observer(function AppImpl() {
     return null
   }
 
+  /*
+   * Session and initial state should be loaded prior to rendering below.
+   */
+
   return (
+    <UnreadNotifsProvider>
       <ThemeProvider theme={colorMode}>
         <analytics.Provider>
           <RootStoreProvider value={rootStore}>
@@ -88,6 +93,7 @@ const InnerApp = observer(function AppImpl() {
           </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>
             </MutedThreadsProvider>
           </PrefsStateProvider>
         </ShellStateProvider>

src/App.web.tsx

@@ -60,7 +60,12 @@ const InnerApp = observer(function AppImpl() {
     return null
   }
 
+  /*
+   * Session and initial state should be loaded prior to rendering below.
+   */
+
   return (
+    <UnreadNotifsProvider>
       <ThemeProvider theme={colorMode}>
         <analytics.Provider>
           <RootStoreProvider value={rootStore}>
@@ -76,6 +81,7 @@ const InnerApp = observer(function AppImpl() {
           </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>
             </MutedThreadsProvider>
           </PrefsStateProvider>
         </ShellStateProvider>

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,
   })
 }