diff --git a/app/components/ActivityFeed.tsx b/app/components/ActivityFeed.tsx index a280bc1..a031f27 100644 --- a/app/components/ActivityFeed.tsx +++ b/app/components/ActivityFeed.tsx @@ -54,27 +54,31 @@ export default function ActivityFeed() { const [isExpanded, setIsExpanded] = useState(true); const [isMinimized, setIsMinimized] = useState(false); const [hasActivity, setHasActivity] = useState(false); - const [isTrackingEnabled, setIsTrackingEnabled] = useState(() => { - // Check localStorage for tracking preference - if (typeof window !== "undefined") { - try { - const stored = localStorage.getItem("activityTrackingEnabled"); - return stored !== "false"; // Default to true if not set - } catch (error) { - // localStorage might be disabled - if (process.env.NODE_ENV === 'development') { - console.warn('Failed to read tracking preference:', error); - } - return true; // Default to enabled - } - } - return true; - }); + // NOTE: Don't read localStorage during initial render. + // Doing so can cause a hydration mismatch (SSR default vs client preference), + // which can leave the feed stuck in its initial (small/transparent) motion styles. + const [isTrackingEnabled, setIsTrackingEnabled] = useState(true); const [quote, setQuote] = useState<{ content: string; author: string; } | null>(null); + // Sync tracking preference after mount (client-only) + useEffect(() => { + if (typeof window === "undefined") return; + try { + const stored = localStorage.getItem("activityTrackingEnabled"); + const enabled = stored !== "false"; // Default to true if not set + setIsTrackingEnabled(enabled); + } catch (error) { + // localStorage might be disabled + if (process.env.NODE_ENV === "development") { + console.warn("Failed to read tracking preference:", error); + } + // Keep default (enabled) + } + }, []); + // Fetch data every 30 seconds (optimized to match server cache) useEffect(() => { // Don't fetch if tracking is disabled or during SSR