From bdff38c9a58a19b9f038fb55067e215eb0c26224 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Wed, 3 Dec 2025 00:45:51 +0000
Subject: [PATCH] Remove SyncIndicator to fix hydration errors

- Removed SyncIndicator component causing hydration issues
- Background polling still works for real-time updates
- Updates appear within 1 second without visual indicator
---
 app/list/[id]/page.tsx       |  2 --
 components/SyncIndicator.tsx | 65 ------------------------------------
 2 files changed, 67 deletions(-)
 delete mode 100644 components/SyncIndicator.tsx

diff --git a/app/list/[id]/page.tsx b/app/list/[id]/page.tsx
index 772e7ec..73020cd 100644
--- a/app/list/[id]/page.tsx
+++ b/app/list/[id]/page.tsx
@@ -7,7 +7,6 @@ import Link from 'next/link'
 import { ArrowLeft } from 'lucide-react'
 import InlineItemCreate from '@/components/InlineItemCreate'
 import ListDetailView from '@/components/ListDetailView'
-import SyncIndicator from '@/components/SyncIndicator'
 
 export const dynamic = 'force-dynamic'
 export const revalidate = 0
@@ -36,7 +35,6 @@ export default async function ListDetailPage({ params }: { params: { id: string
 
   return (
     <main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-6xl">
-      <SyncIndicator />
       {/* Header */}
       <div className="mb-6 sm:mb-8">
         <Link 
diff --git a/components/SyncIndicator.tsx b/components/SyncIndicator.tsx
deleted file mode 100644
index 6d150e9..0000000
--- a/components/SyncIndicator.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-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)
-      setLastSync(new Date())
-      setTimeout(() => setIsSyncing(false), 500)
-    }
-
-    // Trigger on visibility change
-    const handleVisibilityChange = () => {
-      if (document.visibilityState === 'visible') {
-        handleSync()
-      }
-    }
-
-    document.addEventListener('visibilitychange', handleVisibilityChange)
-
-    // Simulate sync indicator every second
-    const interval = setInterval(handleSync, 1000)
-
-    return () => {
-      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"
-      suppressHydrationWarning
-    >
-      <RefreshCw 
-        size={14} 
-        className={`${isSyncing ? 'animate-spin text-blue-500' : 'text-gray-400'}`} 
-      />
-      <span suppressHydrationWarning>
-        {isSyncing ? 'Syncing...' : `Last sync: ${lastSync.toLocaleTimeString()}`}
-      </span>
-    </div>
-  )
-}