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(() => 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 } diff --git a/src/pages/AdminSettings.tsx b/src/pages/AdminSettings.tsx index c3bc9de..ccd878a 100644 --- a/src/pages/AdminSettings.tsx +++ b/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'] }) }, })