[Auth rework] Add a header to login flow (#9368)

src/view/com/auth/LoggedOut.tsx

@@ -1,10 +1,14 @@
-import React from 'react'
+import {useCallback, useEffect, useState} from 'react'
 import {View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useQueryClient} from '@tanstack/react-query'
 
 import {PressableScale} from '#/lib/custom-animations/PressableScale'
+import {STALE} from '#/state/queries'
+import {profilesQueryKey} from '#/state/queries/profile'
+import {useAgent, useSession} from '#/state/session'
 import {
   useLoggedOutView,
   useLoggedOutViewControls,
@@ -35,7 +39,7 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
   const insets = useSafeAreaInsets()
   const setMinimalShellMode = useSetMinimalShellMode()
   const {requestedAccountSwitchTo} = useLoggedOutView()
-  const [screenState, setScreenState] = React.useState<ScreenState>(() => {
+  const [screenState, setScreenState] = useState<ScreenState>(() => {
     if (requestedAccountSwitchTo === 'new') {
       return ScreenState.S_CreateAccount
     } else if (requestedAccountSwitchTo === 'starterpack') {
@@ -48,11 +52,26 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
   })
   const {clearRequestedAccount} = useLoggedOutViewControls()
 
-  React.useEffect(() => {
+  const queryClient = useQueryClient()
+  const {accounts} = useSession()
+  const agent = useAgent()
+  useEffect(() => {
+    const actors = accounts.map(acc => acc.did)
+    void queryClient.prefetchQuery({
+      queryKey: profilesQueryKey(actors),
+      staleTime: STALE.MINUTES.FIVE,
+      queryFn: async () => {
+        const res = await agent.getProfiles({actors})
+        return res.data
+      },
+    })
+  }, [accounts, agent, queryClient])
+
+  useEffect(() => {
     setMinimalShellMode(true)
   }, [setMinimalShellMode])
 
-  const onPressDismiss = React.useCallback(() => {
+  const onPressDismiss = useCallback(() => {
     if (onDismiss) {
       onDismiss()
     }

src/view/com/util/layouts/LoggedOutLayout.tsx

@@ -42,11 +42,11 @@ export const LoggedOutLayout = ({
           contentContainerStyle={[
             {paddingBottom: isKeyboardVisible ? 300 : 0},
           ]}>
-          <View style={a.pt_md}>{children}</View>
+          <View style={a.pt_lg}>{children}</View>
         </ScrollView>
       )
     } else {
-      return <View style={a.pt_md}>{children}</View>
+      return <View style={a.pt_lg}>{children}</View>
     }
   }
   return (