Handle pushing to starterpack screen when unauthed (#4692)

src/screens/Signup/StepInfo/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import {View} from 'react-native'
+import React, {useEffect} from 'react'
+import {LayoutAnimation, View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -27,10 +27,18 @@ function sanitizeDate(date: Date): Date {
   return date
 }
 
-export function StepInfo() {
+export function StepInfo({
+  isLoadingStarterPack,
+}: {
+  isLoadingStarterPack: boolean
+}) {
   const {_} = useLingui()
   const {state, dispatch} = useSignupContext()
 
+  useEffect(() => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+  }, [state.isLoading, isLoadingStarterPack])
+
   return (
     <ScreenTransition>
       <View style={[a.gap_md]}>
@@ -46,7 +54,7 @@ export function StepInfo() {
             }
           />
         </View>
-        {state.isLoading ? (
+        {state.isLoading || isLoadingStarterPack ? (
           <View style={[a.align_center]}>
             <Loader size="xl" />
           </View>

src/screens/Signup/index.tsx

@@ -1,10 +1,6 @@
 import React from 'react'
 import {View} from 'react-native'
-import Animated, {
-  FadeIn,
-  FadeOut,
-  LayoutAnimationConfig,
-} from 'react-native-reanimated'
+import {LayoutAnimationConfig} from 'react-native-reanimated'
 import {AppBskyGraphStarterpack} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -47,9 +43,15 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
   const agent = useAgent()
 
   const activeStarterPack = useActiveStarterPack()
-  const {data: starterPack} = useStarterPackQuery({
+  const {
+    data: starterPack,
+    isFetching: isFetchingStarterPack,
+    isError: isErrorStarterPack,
+  } = useStarterPackQuery({
     uri: activeStarterPack?.uri,
   })
+  const showStarterPackCard =
+    activeStarterPack?.uri && !isFetchingStarterPack && starterPack
 
   const {
     data: serviceInfo,
@@ -155,30 +157,27 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
         description={_(msg`We're so excited to have you join us!`)}
         scrollable>
         <View testID="createAccount" style={a.flex_1}>
-          {state.activeStep === SignupStep.INFO &&
-          starterPack &&
+          {showStarterPackCard &&
           AppBskyGraphStarterpack.isRecord(starterPack.record) ? (
-            <Animated.View entering={FadeIn} exiting={FadeOut}>
-              <LinearGradientBackground
-                style={[a.mx_lg, a.p_lg, a.gap_sm, a.rounded_sm]}>
-                <Text style={[a.font_bold, a.text_xl, {color: 'white'}]}>
-                  {starterPack.record.name}
-                </Text>
-                <Text style={[{color: 'white'}]}>
-                  {starterPack.feeds?.length ? (
-                    <Trans>
-                      You'll follow the suggested users and feeds once you
-                      finish creating your account!
-                    </Trans>
-                  ) : (
-                    <Trans>
-                      You'll follow the suggested users once you finish creating
-                      your account!
-                    </Trans>
-                  )}
-                </Text>
-              </LinearGradientBackground>
-            </Animated.View>
+            <LinearGradientBackground
+              style={[a.mx_lg, a.p_lg, a.gap_sm, a.rounded_sm]}>
+              <Text style={[a.font_bold, a.text_xl, {color: 'white'}]}>
+                {starterPack.record.name}
+              </Text>
+              <Text style={[{color: 'white'}]}>
+                {starterPack.feeds?.length ? (
+                  <Trans>
+                    You'll follow the suggested users and feeds once you finish
+                    creating your account!
+                  </Trans>
+                ) : (
+                  <Trans>
+                    You'll follow the suggested users once you finish creating
+                    your account!
+                  </Trans>
+                )}
+              </Text>
+            </LinearGradientBackground>
           ) : null}
           <View
             style={[
@@ -211,7 +210,11 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
             <View style={[a.pb_3xl]}>
               <LayoutAnimationConfig skipEntering skipExiting>
                 {state.activeStep === SignupStep.INFO ? (
-                  <StepInfo />
+                  <StepInfo
+                    isLoadingStarterPack={
+                      isFetchingStarterPack && !isErrorStarterPack
+                    }
+                  />
                 ) : state.activeStep === SignupStep.HANDLE ? (
                   <StepHandle />
                 ) : (

src/screens/Signup/state.ts

@@ -116,8 +116,6 @@ export function reducer(s: SignupState, a: SignupAction): SignupState {
       break
     }
     case 'setServiceDescription': {
-      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
-
       next.serviceDescription = a.value
       next.userDomain = a.value?.availableUserDomains[0] ?? ''
       next.isLoading = false