Improve handling of connection loss

src/state/models/feed-view.ts

@@ -393,7 +393,7 @@ export class FeedModel {
   }
 
   private async _loadMore() {
-    if (!this.hasMore) {
+    if (!this.hasMore || this.hasError) {
       return
     }
     this._xLoading()

src/state/models/post-thread-view.ts

@@ -312,7 +312,11 @@ export class PostThreadViewModel {
   private async _resolveUri() {
     const urip = new AtUri(this.params.uri)
     if (!urip.host.startsWith('did:')) {
+      try {
         urip.host = await this.rootStore.resolveName(urip.host)
+      } catch (e: any) {
+        this.error = e.toString()
+      }
     }
     runInAction(() => {
       this.resolvedUri = urip.toString()

src/state/models/reposted-by-view.ts

@@ -104,7 +104,11 @@ export class RepostedByViewModel {
   private async _resolveUri() {
     const urip = new AtUri(this.params.uri)
     if (!urip.host.startsWith('did:')) {
+      try {
         urip.host = await this.rootStore.resolveName(urip.host)
+      } catch (e: any) {
+        this.error = e.toString()
+      }
     }
     runInAction(() => {
       this.resolvedUri = urip.toString()

src/state/models/votes-view.ts

@@ -102,7 +102,11 @@ export class VotesViewModel {
   private async _resolveUri() {
     const urip = new AtUri(this.params.uri)
     if (!urip.host.startsWith('did:')) {
+      try {
         urip.host = await this.rootStore.resolveName(urip.host)
+      } catch (e: any) {
+        this.error = e.toString()
+      }
     }
     runInAction(() => {
       this.resolvedUri = urip.toString()

src/view/com/util/ViewHeader.tsx

@@ -48,18 +48,13 @@ export const ViewHeader = observer(function ViewHeader({
   }
   canGoBack ??= store.nav.tab.canGoBack
   return (
-    <>
     <View style={styles.header}>
       <TouchableOpacity
         onPress={canGoBack ? onPressBack : onPressMenu}
         hitSlop={BACK_HITSLOP}
         style={canGoBack ? styles.backIcon : styles.backIconWide}>
         {canGoBack ? (
-            <FontAwesomeIcon
-              size={18}
-              icon="angle-left"
-              style={{marginTop: 6}}
-            />
+          <FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 6}} />
         ) : (
           <UserAvatar
             size={30}
@@ -93,44 +88,31 @@ export const ViewHeader = observer(function ViewHeader({
           style={styles.searchBtnIcon}
         />
       </TouchableOpacity>
-      </View>
       {!store.session.online ? (
-        <TouchableOpacity style={styles.offline} onPress={onPressReconnect}>
+        <TouchableOpacity
+          style={[styles.btn, {marginLeft: 8}, styles.offline]}
+          onPress={onPressReconnect}>
           {store.session.attemptingConnect ? (
-            <>
             <ActivityIndicator />
-              <Text style={[s.gray1, s.bold, s.flex1, s.pl5, s.pt5, s.pb5]}>
-                Connecting...
-              </Text>
-            </>
           ) : (
             <>
-              <FontAwesomeIcon icon="signal" style={[s.gray2]} size={18} />
+              <FontAwesomeIcon icon="signal" style={[s.black]} size={18} />
               <FontAwesomeIcon
                 icon="x"
-                style={[
-                  s.red4,
-                  {
-                    backgroundColor: colors.gray6,
+                style={{
+                  backgroundColor: colors.white,
+                  color: colors.red4,
                   position: 'relative',
                   left: -4,
                   top: 6,
-                  },
-                ]}
-                border
+                }}
                 size={12}
               />
-              <Text style={[s.gray1, s.bold, s.flex1, s.pl2]}>
-                Unable to connect
-              </Text>
-              <View style={styles.offlineBtn}>
-                <Text style={styles.offlineBtnText}>Try again</Text>
-              </View>
             </>
           )}
         </TouchableOpacity>
       ) : undefined}
-    </>
+    </View>
   )
 })
 
@@ -180,24 +162,12 @@ const styles = StyleSheet.create({
   },
 
   offline: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: colors.gray6,
-    paddingLeft: 15,
-    paddingRight: 10,
-    paddingVertical: 8,
-    borderRadius: 8,
-    marginHorizontal: 4,
-    marginTop: 4,
+    backgroundColor: colors.white,
   },
   offlineBtn: {
-    backgroundColor: colors.gray5,
+    backgroundColor: colors.white,
     borderRadius: 5,
     paddingVertical: 5,
     paddingHorizontal: 10,
   },
-  offlineBtnText: {
-    color: colors.white,
-    fontWeight: 'bold',
-  },
 })