From 865c2a85deb2a5185570eac21c5084924db3ee7b Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Wed, 3 Dec 2025 00:39:53 +0000
Subject: [PATCH] Fix SyncIndicator hydration error

- Add mounted state to prevent SSR/client mismatch
- Component only renders after client-side mount
- Fixes hydration error with timestamp display
---
 components/SyncIndicator.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/components/SyncIndicator.tsx b/components/SyncIndicator.tsx
index f9cbb78..d5cf870 100644
--- a/components/SyncIndicator.tsx
+++ b/components/SyncIndicator.tsx
@@ -7,10 +7,17 @@ import { RefreshCw } from 'lucide-react'
  * Visual indicator that shows when the page is syncing
  */
 export default function SyncIndicator() {
+  const [mounted, setMounted] = useState(false)
   const [isSyncing, setIsSyncing] = useState(false)
   const [lastSync, setLastSync] = useState<Date>(new Date())
 
   useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  useEffect(() => {
+    if (!mounted) return
+
     // Listen for router refresh events
     const handleSync = () => {
       setIsSyncing(true)
@@ -34,7 +41,12 @@ export default function SyncIndicator() {
       document.removeEventListener('visibilitychange', handleVisibilityChange)
       clearInterval(interval)
     }
-  }, [])
+  }, [mounted])
+
+  // Don't render on server to avoid hydration mismatch
+  if (!mounted) {
+    return null
+  }
 
   return (
     <div className="fixed top-4 right-4 z-50 flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-lg shadow-sm text-xs text-gray-600">