From 841828a3bca2c836e728701320208e3e5250b02e Mon Sep 17 00:00:00 2001
From: Egor <egor.andrianovv@gmail.com>
Date: Mon, 19 Jan 2026 10:27:31 +0300
Subject: [PATCH] Update AnimatedBackground.tsx

---
 src/components/AnimatedBackground.tsx | 46 +++++++++++++++++++++++++--
 1 file changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/components/AnimatedBackground.tsx b/src/components/AnimatedBackground.tsx
index 4695887..8f0508b 100644
--- a/src/components/AnimatedBackground.tsx
+++ b/src/components/AnimatedBackground.tsx
@@ -1,16 +1,56 @@
+import { useEffect, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { brandingApi } from '../api/branding'
 
+const ANIMATION_CACHE_KEY = 'cabinet_animation_enabled'
+
+// Get cached value from localStorage
+const getCachedAnimationEnabled = (): boolean | null => {
+  try {
+    const cached = localStorage.getItem(ANIMATION_CACHE_KEY)
+    if (cached !== null) {
+      return cached === 'true'
+    }
+  } catch {
+    // localStorage not available
+  }
+  return null
+}
+
+// Update cache in localStorage
+export const setCachedAnimationEnabled = (enabled: boolean) => {
+  try {
+    localStorage.setItem(ANIMATION_CACHE_KEY, String(enabled))
+  } catch {
+    // localStorage not available
+  }
+}
+
 export default function AnimatedBackground() {
+  // Start with cached value (null means unknown yet)
+  const [isEnabled, setIsEnabled] = useState<boolean | null>(() => getCachedAnimationEnabled())
+
   const { data: animationSettings } = useQuery({
     queryKey: ['animation-enabled'],
     queryFn: brandingApi.getAnimationEnabled,
-    staleTime: 1000 * 60 * 5, // 5 minutes
+    staleTime: 1000 * 60, // 1 minute - быстрее обновляется при изменении админом
+    refetchOnWindowFocus: true, // Обновить при возврате в окно
     retry: false,
   })
 
-  // Don't render if animation is disabled
-  if (animationSettings && !animationSettings.enabled) {
+  // Update state and cache when data arrives
+  useEffect(() => {
+    if (animationSettings !== undefined) {
+      const enabled = animationSettings.enabled
+      setIsEnabled(enabled)
+      setCachedAnimationEnabled(enabled)
+    }
+  }, [animationSettings])
+
+  // Don't render anything until we know the state (from cache or server)
+  // If cache says disabled, don't render
+  // If cache is null (first visit), default to not showing to avoid flash
+  if (isEnabled !== true) {
     return null
   }