Only re-render CharmList when connection status actually changes (#1038)

* Only re-render CharmList when connection status actually changes

* Update types

Author: bfollington

jumble/src/contexts/SyncStatusContext.tsx

@@ -11,6 +11,7 @@ import { useCharmManager } from "@/contexts/CharmManagerContext.tsx";
 interface SyncStatusContextType {
   isSyncing: boolean;
   lastSyncTime: Date | null;
+  hasConnected: boolean;
 }
 
 const SyncStatusContext = createContext<SyncStatusContextType | undefined>(
@@ -27,7 +28,8 @@ export function SyncStatusProvider({
   intervalMs = 50,
 }: SyncStatusProviderProps) {
   const [isSyncing, setIsSyncing] = useState(true);
-  const [lastSyncTime, setLastSyncTime] = useState<Date | null>(null);
+  const lastSyncTimeRef = useRef<Date | null>(null);
+  const [hasConnected, setHasConnected] = useState(false);
   const { charmManager } = useCharmManager();
   const isCheckingSyncRef = useRef(false);
 
@@ -44,7 +46,10 @@ export function SyncStatusProvider({
         await charmManager.synced();
 
         if (isMounted) {
-          setLastSyncTime(new Date());
+          lastSyncTimeRef.current = new Date();
+          if (!hasConnected) {
+            setHasConnected(true);
+          }
         }
       } catch (error) {
         console.error("Sync error:", error);
@@ -68,7 +73,7 @@ export function SyncStatusProvider({
     };
   }, [charmManager, intervalMs]);
 
-  const value = { isSyncing, lastSyncTime };
+  const value = { isSyncing, lastSyncTime: lastSyncTimeRef.current, hasConnected };
 
   return (
     <SyncStatusContext.Provider value={value}>

jumble/src/views/CharmList.tsx

@@ -100,9 +100,9 @@ export default function CharmList() {
   const [charms] = useCell(charmManager.getCharms());
   const [trash] = useCell(charmManager.getTrash());
 
-  const { lastSyncTime } = useSyncedStatus();
+  const { hasConnected } = useSyncedStatus();
 
-  if (lastSyncTime == null) {
+  if (!hasConnected) {
     return (
       <div className="flex flex-col items-center justify-center h-[70vh] text-center p-8">
         <div className="mb-6">