Reduce flickering with Ink 6.6.0 optimizations

- Enable incrementalRendering and maxFps (30) in render options
- Slow down all animations (AnimatedDots 200ms→500ms, LiveIndicator 800ms→1000ms, spinners 80ms→120ms)
- Remove forced re-renders on tab switching (refreshKey auto-increment)
- Let React's natural reconciliation handle mode changes efficiently

These changes combine to significantly reduce visual flickering during
initial load, tab switching, and list updates by leveraging Ink's
incremental rendering capabilities and reducing cascade re-renders.

Author: statico

src/index.ts

@@ -287,7 +287,11 @@ const { waitUntilExit } = render(
     useTls,
     insecure,
     pcapFile,
-  })
+  }),
+  {
+    incrementalRendering: true,  // Only update changed lines (Ink 6.5.0+)
+    maxFps: 30,                  // Limit to 30 FPS to reduce flicker (Ink 6.3.0+)
+  }
 );
 
 waitUntilExit().catch((e) => {

src/ui/App.tsx

@@ -150,7 +150,7 @@ export function App({ address, packetStore, nodeStore, skipConfig = false, skipN
     if (status === "connecting") {
       const interval = setInterval(() => {
         setSpinnerFrame((f) => (f + 1) % SPINNER_FRAMES.length);
-      }, 80);
+      }, 120);
       return () => clearInterval(interval);
     }
   }, [status]);
@@ -250,10 +250,9 @@ export function App({ address, packetStore, nodeStore, skipConfig = false, skipN
     return () => clearInterval(interval);
   }, [showRebootModal]);
 
-  // Trigger full redraw when switching tabs/modes
-  useEffect(() => {
-    setRefreshKey(k => k + 1);
-  }, [mode]);
+  // Removed auto-refresh on mode change to reduce flickering
+  // React's natural reconciliation handles mode switching efficiently
+  // Users can still manually refresh with Ctrl+L if needed
 
   // Auto-dismiss reboot modal when connection is restored
   useEffect(() => {

src/ui/components/ChatPanel.tsx

@@ -36,7 +36,7 @@ const AnimatedDots = React.memo(() => {
   useEffect(() => {
     const interval = setInterval(() => {
       setFrame((f) => (f + 1) % 3);
-    }, 200);
+    }, 500);
     return () => clearInterval(interval);
   }, []);
 

src/ui/components/DMPanel.tsx

@@ -14,7 +14,7 @@ const AnimatedDots = React.memo(() => {
   useEffect(() => {
     const interval = setInterval(() => {
       setFrame((f) => (f + 1) % 3);
-    }, 200);
+    }, 500);
     return () => clearInterval(interval);
   }, []);
 

src/ui/components/DeviceNotificationModal.tsx

@@ -14,7 +14,7 @@ export function DeviceNotificationModal({ message, level, remaining }: DeviceNot
   useEffect(() => {
     const interval = setInterval(() => {
       setFrame((f) => (f + 1) % 4);
-    }, 250);
+    }, 500);
     return () => clearInterval(interval);
   }, []);
 

src/ui/components/MeshViewPanel.tsx

@@ -12,7 +12,7 @@ function LiveIndicator({ error }: { error?: string | null }) {
   useEffect(() => {
     const interval = setInterval(() => {
       setFrame((f) => (f + 1) % 4);
-    }, 800);
+    }, 1000);
     return () => clearInterval(interval);
   }, []);
 

src/ui/components/PacketList.tsx

@@ -13,7 +13,7 @@ const LiveIndicator = React.memo(() => {
   useEffect(() => {
     const interval = setInterval(() => {
       setFrame((f) => (f + 1) % 4);
-    }, 800);
+    }, 1000);
     return () => clearInterval(interval);
   }, []);
 

src/ui/components/RebootModal.tsx

@@ -16,7 +16,7 @@ export function RebootModal({ reason, elapsed, timeout = 60 }: RebootModalProps)
   useEffect(() => {
     const interval = setInterval(() => {
       setSpinnerFrame((f) => (f + 1) % SPINNER_FRAMES.length);
-    }, 80);
+    }, 120);
     return () => clearInterval(interval);
   }, []);