Improve handling of connection loss

5 files changed, 69 insertions, 87 deletions

diff --git a/src/state/models/feed-view.ts b/src/state/models/feed-view.ts
index 503e2a4c6..50906f3b2 100644
--- a/src/state/models/feed-view.ts
+++ b/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()
diff --git a/src/state/models/post-thread-view.ts b/src/state/models/post-thread-view.ts
index ea9d123d0..ebe5b730d 100644
--- a/src/state/models/post-thread-view.ts
+++ b/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:')) {
-      urip.host = await this.rootStore.resolveName(urip.host)
+      try {
+        urip.host = await this.rootStore.resolveName(urip.host)
+      } catch (e: any) {
+        this.error = e.toString()
+      }
     }
     runInAction(() => {
       this.resolvedUri = urip.toString()
diff --git a/src/state/models/reposted-by-view.ts b/src/state/models/reposted-by-view.ts
index 4c61bafdc..9e9146899 100644
--- a/src/state/models/reposted-by-view.ts
+++ b/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:')) {
-      urip.host = await this.rootStore.resolveName(urip.host)
+      try {
+        urip.host = await this.rootStore.resolveName(urip.host)
+      } catch (e: any) {
+        this.error = e.toString()
+      }
     }
     runInAction(() => {
       this.resolvedUri = urip.toString()
diff --git a/src/state/models/votes-view.ts b/src/state/models/votes-view.ts
index 6e9130e90..64da6b227 100644
--- a/src/state/models/votes-view.ts
+++ b/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:')) {
-      urip.host = await this.rootStore.resolveName(urip.host)
+      try {
+        urip.host = await this.rootStore.resolveName(urip.host)
+      } catch (e: any) {
+        this.error = e.toString()
+      }
     }
     runInAction(() => {
       this.resolvedUri = urip.toString()
diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx
index 76fac8b9d..27f424573 100644
--- a/src/view/com/util/ViewHeader.tsx
+++ b/src/view/com/util/ViewHeader.tsx
@@ -48,89 +48,71 @@ 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}}
-            />
-          ) : (
-            <UserAvatar
-              size={30}
-              handle={store.me.handle}
-              displayName={store.me.displayName}
-              avatar={store.me.avatar}
-            />
-          )}
-        </TouchableOpacity>
-        <View style={styles.titleContainer} pointerEvents="none">
-          <Text style={styles.title}>{title}</Text>
-          {subtitle ? (
-            <Text style={styles.subtitle} numberOfLines={1}>
-              {subtitle}
-            </Text>
-          ) : undefined}
-        </View>
-        <TouchableOpacity
-          onPress={onPressCompose}
-          hitSlop={HITSLOP}
-          style={styles.btn}>
-          <FontAwesomeIcon size={18} icon="plus" />
-        </TouchableOpacity>
-        <TouchableOpacity
-          onPress={onPressSearch}
-          hitSlop={HITSLOP}
-          style={[styles.btn, {marginLeft: 8}]}>
-          <MagnifyingGlassIcon
-            size={18}
-            strokeWidth={3}
-            style={styles.searchBtnIcon}
+    <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}} />
+        ) : (
+          <UserAvatar
+            size={30}
+            handle={store.me.handle}
+            displayName={store.me.displayName}
+            avatar={store.me.avatar}
           />
-        </TouchableOpacity>
+        )}
+      </TouchableOpacity>
+      <View style={styles.titleContainer} pointerEvents="none">
+        <Text style={styles.title}>{title}</Text>
+        {subtitle ? (
+          <Text style={styles.subtitle} numberOfLines={1}>
+            {subtitle}
+          </Text>
+        ) : undefined}
       </View>
+      <TouchableOpacity
+        onPress={onPressCompose}
+        hitSlop={HITSLOP}
+        style={styles.btn}>
+        <FontAwesomeIcon size={18} icon="plus" />
+      </TouchableOpacity>
+      <TouchableOpacity
+        onPress={onPressSearch}
+        hitSlop={HITSLOP}
+        style={[styles.btn, {marginLeft: 8}]}>
+        <MagnifyingGlassIcon
+          size={18}
+          strokeWidth={3}
+          style={styles.searchBtnIcon}
+        />
+      </TouchableOpacity>
       {!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>
-            </>
+            <ActivityIndicator />
           ) : (
             <>
-              <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,
-                    position: 'relative',
-                    left: -4,
-                    top: 6,
-                  },
-                ]}
-                border
+                style={{
+                  backgroundColor: colors.white,
+                  color: colors.red4,
+                  position: 'relative',
+                  left: -4,
+                  top: 6,
+                }}
                 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',
-  },
 })