fix(header): кэшировать список языков — переключатель не мигает при смене страницы

This commit is contained in:
kewldan
2026-07-13 01:46:24 +03:00
parent b40f939e91
commit a7ff8a6b09

View File

@@ -1,25 +1,23 @@
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useState, useRef, useEffect } from 'react'; import { useState, useRef, useEffect } from 'react';
import { infoApi, type LanguageInfo } from '@/api/info'; import { useQuery } from '@tanstack/react-query';
import { infoApi } from '@/api/info';
import { ChevronDownIcon } from '@/components/icons'; import { ChevronDownIcon } from '@/components/icons';
export default function LanguageSwitcher() { export default function LanguageSwitcher() {
const { i18n } = useTranslation(); const { i18n } = useTranslation();
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [availableLanguages, setAvailableLanguages] = useState<LanguageInfo[]>([]);
const dropdownRef = useRef<HTMLDivElement>(null); const dropdownRef = useRef<HTMLDivElement>(null);
useEffect(() => { // Кэш react-query переживает перемонтирование AppShell при смене роута:
const fetchLanguages = async () => { // локальный useState начинал каждый маунт с пустого списка, и до ответа API
try { // компонент рендерил null — переключатель «мигал» при каждой навигации.
const data = await infoApi.getLanguages(); const { data } = useQuery({
setAvailableLanguages(data.languages); queryKey: ['languages'],
} catch { queryFn: infoApi.getLanguages,
// Silently fall back to empty list — component handles it gracefully staleTime: 1000 * 60 * 5,
} });
}; const availableLanguages = data?.languages ?? [];
fetchLanguages();
}, []);
const currentLang = availableLanguages.find((l) => l.code === i18n.language) || const currentLang = availableLanguages.find((l) => l.code === i18n.language) ||
availableLanguages[0] || { code: 'ru', name: 'RU', flag: '🇷🇺' }; availableLanguages[0] || { code: 'ru', name: 'RU', flag: '🇷🇺' };