Merge pull request #561 from ephemeraHQ/lr/conversation-loading-states

Improve iOS Navigation Bar and Syncing Error Handling
ephemeraHQ · Aug 27, 2024 · de8fc6c · de8fc6c
2 parents d6ff58a + c329569
commit de8fc6c
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 18 deletions.
diff --git a/components/Connecting.tsx b/components/Connecting.tsx
@@ -1,5 +1,5 @@
 import { sentryTrackMessage } from "@utils/sentry";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import ActivityIndicator from "./ActivityIndicator/ActivityIndicator";
 import { useChatStore } from "../data/store/accountsStore";
@@ -13,6 +13,7 @@ export const useShouldShowConnecting = () => {
   );
 
   const conditionTrueTime = useRef(0);
+  const [warnMessage, setWarnMessage] = useState<string | null>(null);
 
   useEffect(() => {
     let interval: NodeJS.Timeout | undefined = undefined;
@@ -30,12 +31,21 @@ export const useShouldShowConnecting = () => {
             reconnecting,
           });
 
+          if (!isInternetReachable) {
+            setWarnMessage("Waiting for network");
+          } else if (reconnecting) {
+            setWarnMessage("Reconnecting");
+          } else {
+            setWarnMessage("Syncing");
+          }
+
           conditionTrueTime.current = 0;
           clearInterval(interval); // Clear interval after logging
         }
       }, 1000);
     } else {
       conditionTrueTime.current = 0;
+      setWarnMessage(null);
       if (interval) {
         clearInterval(interval);
       }
@@ -44,7 +54,10 @@ export const useShouldShowConnecting = () => {
     return () => clearInterval(interval);
   }, [isInternetReachable, localClientConnected, reconnecting]);
 
-  return !isInternetReachable || !localClientConnected || reconnecting;
+  const shouldShow =
+    !isInternetReachable || !localClientConnected || reconnecting;
+
+  return { shouldShow, warnMessage };
 };
 
 export const useShouldShowConnectingOrSyncing = () => {
@@ -82,7 +95,7 @@ export const useShouldShowConnectingOrSyncing = () => {
   }, [conversations, initialLoadDoneOnce]);
 
   return (
-    shouldShowConnecting ||
+    shouldShowConnecting.shouldShow ||
     (!initialLoadDoneOnce && Object.keys(conversations).length > 0)
   );
 };

diff --git a/screens/Navigation/ConversationListNav.ios.tsx b/screens/Navigation/ConversationListNav.ios.tsx
@@ -20,14 +20,15 @@ import {
   navigationAnimation,
 } from "./Navigation";
 import Connecting, {
+  useShouldShowConnecting,
   useShouldShowConnectingOrSyncing,
 } from "../../components/Connecting";
 import NewConversationButton from "../../components/ConversationList/NewConversationButton";
 import ProfileSettingsButton from "../../components/ConversationList/ProfileSettingsButton";
 import { useAccountsStore, useChatStore } from "../../data/store/accountsStore";
 import { useSelect } from "../../data/store/storeHelpers";
 import { isDesktop } from "../../utils/device";
-import { getReadableProfile } from "../../utils/str";
+import { getReadableProfile, shortDisplayName } from "../../utils/str";
 import ConversationList from "../ConversationList";
 
 type HeaderSearchBarProps = {
@@ -77,6 +78,7 @@ export default function ConversationListNav() {
   ) as React.MutableRefObject<SearchBarCommands | null>;
 
   const shouldShowConnectingOrSyncing = useShouldShowConnectingOrSyncing();
+  const shouldShowConnecting = useShouldShowConnecting();
   const shouldShowError = useShouldShowErrored();
   const currentAccount = useAccountsStore((s) => s.currentAccount);
   const name = getReadableProfile(currentAccount, currentAccount);
@@ -89,6 +91,11 @@ export default function ConversationListNav() {
           shouldShowConnectingOrSyncing ? (
             <View style={styles.connectingContainer}>
               {shouldShowConnectingOrSyncing && <Connecting />}
+              {shouldShowConnecting.warnMessage && (
+                <Text style={styles.warn}>
+                  {shouldShowConnecting.warnMessage}
+                </Text>
+              )}
             </View>
           ) : (
             <View />
@@ -126,7 +133,9 @@ export default function ConversationListNav() {
                     },
                   ]}
                 >
-                  {name}
+                  {shouldShowConnecting.warnMessage
+                    ? shortDisplayName(name)
+                    : name}
                 </Text>
                 {shouldShowError && <ErroredHeader />}
               </View>
@@ -144,7 +153,12 @@ export default function ConversationListNav() {
 
 const styles = StyleSheet.create({
   connectingContainer: {
-    marginTop: -10,
+    marginTop: -5,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  warn: {
+    marginLeft: 8,
   },
   headerRight: {
     marginTop: -10,

diff --git a/screens/Navigation/ConversationListNav.tsx b/screens/Navigation/ConversationListNav.tsx
@@ -80,7 +80,7 @@ export default function ConversationListNav() {
   const onChangeSearch = (query: string) => setSearchQuery(query);
   const searchPlaceholder = (): string => {
     if (shouldShowConnectingOrSyncing && !searchBarFocused) {
-      return shouldShowConnecting ? "Connecting…" : "Syncing…";
+      return shouldShowConnecting.shouldShow ? "Connecting…" : "Syncing…";
     }
     return "Search chats";
   };

diff --git a/utils/str.test.ts b/utils/str.test.ts
@@ -7,8 +7,8 @@ import {
   formatGroupName,
   getReadableProfile,
   getTitleFontScale,
+  shortDisplayName,
   shortAddress,
-  shortDomain,
   strByteSize,
 } from "./str";
 import { getProfilesStore } from "../data/store/accountsStore";
@@ -58,19 +58,19 @@ describe("shortAddress", () => {
   });
 });
 
-describe("shortDomain", () => {
+describe("shortDisplayName", () => {
   it("should shorten the domain correctly based on screen width", () => {
-    expect(shortDomain("thisisaverylongdomainname.com")).toBe(
+    expect(shortDisplayName("thisisaverylongdomainname.com")).toBe(
       "thisisaverylong..."
     );
   });
 
   it("should return the original domain if shorter than maxLength", () => {
-    expect(shortDomain("short.com")).toBe("short.com");
+    expect(shortDisplayName("short.com")).toBe("short.com");
   });
 
   it("should return an empty string if domain is undefined", () => {
-    expect(shortDomain(undefined)).toBe("");
+    expect(shortDisplayName(undefined)).toBe("");
   });
 });
 

diff --git a/utils/str.ts b/utils/str.ts
@@ -17,9 +17,9 @@ export const shortAddress = (address: string) =>
       )}`
     : address || "";
 
-export const shortDomain = (domain: string | undefined): string => {
-  if (!domain) return "";
-  if (Platform.OS === "web") return domain;
+export const shortDisplayName = (displayName: string | undefined): string => {
+  if (!displayName) return "";
+  if (Platform.OS === "web") return displayName;
 
   const screenWidth = Dimensions.get("window").width;
   let maxLength;
@@ -35,9 +35,9 @@ export const shortDomain = (domain: string | undefined): string => {
     maxLength = 12;
   }
 
-  return domain.length > maxLength
-    ? `${domain.slice(0, maxLength)}...`
-    : domain;
+  return displayName.length > maxLength
+    ? `${displayName.slice(0, maxLength)}...`
+    : displayName;
 };
 
 export const capitalize = (str: string) => str[0].toUpperCase() + str.slice(1);