Merge pull request #42 from BEDOLAGA-DEV/dev

Dev

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
   }
 

src/pages/AdminSettings.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { adminSettingsApi, SettingDefinition, SettingCategorySummary } from '../api/adminSettings'
 import { brandingApi } from '../api/branding'
+import { setCachedAnimationEnabled } from '../components/AnimatedBackground'
 import { themeColorsApi } from '../api/themeColors'
 import { DEFAULT_THEME_COLORS, DEFAULT_ENABLED_THEMES } from '../types/theme'
 import { ColorPicker } from '../components/ColorPicker'
@@ -872,7 +873,9 @@ export default function AdminSettings() {
 
   const updateAnimationMutation = useMutation({
     mutationFn: (enabled: boolean) => brandingApi.updateAnimationEnabled(enabled),
-    onSuccess: () => {
+    onSuccess: (data) => {
+      // Update local cache immediately for instant effect
+      setCachedAnimationEnabled(data.enabled)
       queryClient.invalidateQueries({ queryKey: ['animation-enabled'] })
     },
   })