mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
fix(header): кэшировать список языков — переключатель не мигает при смене страницы
This commit is contained in:
@@ -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: '🇷🇺' };
|
||||||
|
|||||||
Reference in New Issue
Block a user