Paul Bailey
fc5ad9f7af
- Reduced polling interval from 2s to 1s for near-instant updates - Added SyncIndicator component to show sync status - Added console logging to debug sync behavior - Updates across devices now appear within 1 second - Visual feedback shows when data is being refreshed
51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
'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 [isSyncing, setIsSyncing] = useState(false)
|
|
const [lastSync, setLastSync] = useState<Date>(new Date())
|
|
|
|
useEffect(() => {
|
|
// 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)
|
|
}
|
|
}, [])
|
|
|
|
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">
|
|
<RefreshCw
|
|
size={14}
|
|
className={`${isSyncing ? 'animate-spin text-blue-500' : 'text-gray-400'}`}
|
|
/>
|
|
<span>
|
|
{isSyncing ? 'Syncing...' : `Last sync: ${lastSync.toLocaleTimeString()}`}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|