Fix invite codes flash on desktop, use loading placeholder (#1591)

* Fix invite codes flashing untrue value before loaded

* Add loading placeholder for right nav invites

src/state/models/me.ts

@@ -25,13 +25,13 @@ export class MeModel {
   savedFeeds: SavedFeedsModel
   notifications: NotificationsFeedModel
   follows: MyFollowsCache
-  invites: ComAtprotoServerDefs.InviteCode[] = []
+  invites: ComAtprotoServerDefs.InviteCode[] | null = []
   appPasswords: ComAtprotoServerListAppPasswords.AppPassword[] = []
   lastProfileStateUpdate = Date.now()
   lastNotifsUpdate = Date.now()
 
   get invitesAvailable() {
-    return this.invites.filter(isInviteAvailable).length
+    return this.invites?.filter(isInviteAvailable).length || null
   }
 
   constructor(public rootStore: RootStoreModel) {
@@ -180,9 +180,11 @@ export class MeModel {
       } catch (e) {
         this.rootStore.log.error('Failed to fetch user invite codes', e)
       }
+      if (this.invites) {
         await this.rootStore.invitedUsers.fetch(this.invites)
       }
     }
+  }
 
   async fetchAppPasswords() {
     if (this.rootStore.session) {

src/view/com/modals/InviteCodes.tsx

@@ -26,6 +26,33 @@ export function Component({}: {}) {
     store.shell.closeModal()
   }, [store])
 
+  if (store.me.invites === null) {
+    return (
+      <View style={[styles.container, pal.view]} testID="inviteCodesModal">
+        <Text type="title-xl" style={[styles.title, pal.text]}>
+          Error
+        </Text>
+        <Text type="lg" style={[styles.description, pal.text]}>
+          An error occurred while loading invite codes.
+        </Text>
+        <View style={styles.flex1} />
+        <View
+          style={[
+            styles.btnContainer,
+            isTabletOrDesktop && styles.btnContainerDesktop,
+          ]}>
+          <Button
+            type="primary"
+            label="Done"
+            style={styles.btn}
+            labelStyle={styles.btnLabel}
+            onPress={onClose}
+          />
+        </View>
+      </View>
+    )
+  }
+
   if (store.me.invites.length === 0) {
     return (
       <View style={[styles.container, pal.view]} testID="inviteCodesModal">

src/view/screens/Settings.tsx

@@ -322,12 +322,18 @@ export const SettingsScreen = withAuthRequired(
 
           <View style={styles.spacer20} />
 
+          {store.me.invitesAvailable !== null && (
+            <>
               <Text type="xl-bold" style={[pal.text, styles.heading]}>
                 Invite a Friend
               </Text>
               <TouchableOpacity
                 testID="inviteFriendBtn"
-            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+                style={[
+                  styles.linkCard,
+                  pal.view,
+                  isSwitching && styles.dimmed,
+                ]}
                 onPress={isSwitching ? undefined : onPressInviteCodes}
                 accessibilityRole="button"
                 accessibilityLabel="Invite"
@@ -353,6 +359,8 @@ export const SettingsScreen = withAuthRequired(
                   {pluralize(store.me.invitesAvailable, 'code')} available
                 </Text>
               </TouchableOpacity>
+            </>
+          )}
 
           <View style={styles.spacer20} />
 

src/view/shell/Drawer.tsx

@@ -426,6 +426,7 @@ const InviteCodes = observer(function InviteCodesImpl({
     store.shell.openModal({name: 'invite-codes'})
   }, [store, track])
   return (
+    store.me.invitesAvailable !== null && (
       <TouchableOpacity
         testID="menuItemInviteCodes"
         style={[styles.inviteCodes, style]}
@@ -453,6 +454,7 @@ const InviteCodes = observer(function InviteCodesImpl({
         </Text>
       </TouchableOpacity>
     )
+  )
 })
 
 const styles = StyleSheet.create({

src/view/shell/desktop/RightNav.tsx

@@ -7,6 +7,7 @@ import {DesktopSearch} from './Search'
 import {DesktopFeeds} from './Feeds'
 import {Text} from 'view/com/util/text/Text'
 import {TextLink} from 'view/com/util/Link'
+import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
 import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants'
 import {s} from 'lib/styles'
 import {useStores} from 'state/index'
@@ -89,9 +90,16 @@ const InviteCodes = observer(function InviteCodesImpl() {
   const onPress = React.useCallback(() => {
     store.shell.openModal({name: 'invite-codes'})
   }, [store])
+
   return (
+    <View style={[styles.separator, pal.border]}>
+      {store.me.invitesAvailable === null ? (
+        <View style={[s.p10]}>
+          <LoadingPlaceholder width={186} height={32} style={[styles.br40]} />
+        </View>
+      ) : (
         <TouchableOpacity
-      style={[styles.inviteCodes, pal.border]}
+          style={[styles.inviteCodes]}
           onPress={onPress}
           accessibilityRole="button"
           accessibilityLabel={
@@ -115,6 +123,8 @@ const InviteCodes = observer(function InviteCodesImpl() {
             {pluralize(store.me.invitesAvailable, 'code')} available
           </Text>
         </TouchableOpacity>
+      )}
+    </View>
   )
 })
 
@@ -131,16 +141,20 @@ const styles = StyleSheet.create({
 
   message: {
     paddingVertical: 18,
-    paddingHorizontal: 10,
+    paddingHorizontal: 12,
   },
   messageLine: {
     marginBottom: 10,
   },
 
-  inviteCodes: {
+  separator: {
     borderTopWidth: 1,
-    paddingHorizontal: 16,
+  },
-    paddingVertical: 12,
+  br40: {borderRadius: 40},
+
+  inviteCodes: {
+    paddingHorizontal: 12,
+    paddingVertical: 16,
     flexDirection: 'row',
     alignItems: 'center',
   },