setting logout activity indicator

app/mobile/ios/Databag/Info.plist

@@ -15,7 +15,7 @@
 	<key>CFBundlePackageType</key>
 	<string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4</string>
+	<string>1.5</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>

app/mobile/src/context/useAppContext.hook.js

@@ -20,6 +20,7 @@ export function useAppContext() {
     loginTimestamp: null,
     disconnected: null,
     deviceToken: null,
+    loggingOut: false,
   });
   const store = useContext(StoreContext);
   const account = useContext(AccountContext);
@@ -108,6 +109,7 @@ export function useAppContext() {
       }
     },
     logout: async () => {
+      updateState({ loggingOut: true });
       try {
         await messaging().deleteToken();
         const token = await messaging().getToken();
@@ -119,6 +121,7 @@ export function useAppContext() {
       }
       await clearSession();
       await store.actions.clearSession();
+      updateState({ loggingOut: false });
     },
     remove: async () => {
       await removeProfile(state.server, state.appToken);

app/mobile/src/session/profile/Profile.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useContext } from 'react';
-import { KeyboardAvoidingView, Modal, Alert, TextInput, ScrollView, View, Switch, TouchableOpacity, Text } from 'react-native';
+import { ActivityIndicator, KeyboardAvoidingView, Modal, Alert, TextInput, ScrollView, View, Switch, TouchableOpacity, Text } from 'react-native';
 import { styles } from './Profile.styled';
 import { useProfile } from './useProfile.hook';
 import Ionicons from '@expo/vector-icons/AntDesign';
@@ -21,9 +21,16 @@ export function Profile({ navigation }) {
           </View>
         ),
         headerRight: () => (
+          <>
+            { state.loggingOut && (
+              <ActivityIndicator style={styles.action} size="small" />
+            )}
+            { !state.loggingOut && (
               <TouchableOpacity style={styles.action} onPress={logout} onLongPress={actions.showDelete}>
                 <Ionicons name="logout" size={22} color={Colors.primary} />
               </TouchableOpacity>
+            )}
+          </>
         ),
       });
     }
@@ -71,9 +78,14 @@ export function Profile({ navigation }) {
         <SafeAreaView style={styles.drawer} edges={['top', 'bottom', 'right']}>
           <View style={styles.header}>
             <Text style={styles.headerText} numberOfLines={1}>{ `${state.handle}@${state.node}` }</Text>
+            { state.loggingOut && (
+              <ActivityIndicator size="small" />
+            )}
+            { !state.loggingOut && (
               <TouchableOpacity onPress={logout} onLongPress={actions.showDelete}>
                 <Ionicons name="logout" size={16} color={Colors.grey} />
               </TouchableOpacity>
+            )}
           </View>
           <ProfileBody />
           <TouchableOpacity style={styles.erase} activeOpacity={1} onPress={actions.showDelete}>

app/mobile/src/session/profile/Profile.styled.js

@@ -44,6 +44,7 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'flex-end',
     justifyContent: 'center',
+    height: 32,
   },
   headerText: {
     paddingLeft: 16,

app/mobile/src/session/profile/useProfile.hook.js

@@ -14,6 +14,7 @@ export function useProfile() {
     showDelete: false,
     tabbed: null,
     confirmDelete: null,
+    logginOut: false,
   });
 
   const app = useContext(AppContext);
@@ -42,8 +43,8 @@ export function useProfile() {
   }, [profile]);
 
   useEffect(() => {
-    const { disconnected } = app.state;
+    const { disconnected, loggingOut } = app.state;
-    updateState({ disconnected });
+    updateState({ disconnected, loggingOut });
   }, [app]);
 
   const actions = {