Загрузка данных зависает после переключения вкладок браузера до полной перезагрузки страницы ⇐ Javascript

[Anonymous]

У меня есть одностраничное приложение (SPA), созданное с помощью React + Supabase.

При первом посещении сайта все данные загружаются корректно: профиль, биллинг,

настройки уведомлений, активные сеансы и т. д.
Но если я перехожу на другую вкладку браузера, а затем возвращаюсь,

часть интерфейса зависает в состоянии «Загрузка…» на неопределенный срок.
/>
Полная перезагрузка страницы (F5) исправляет все до следующего переключения вкладок.
Среда

- Интерфейс: React 18, TypeScript, Vite

- Управление состоянием: Zustand

- i18n: реакции-i18next

- Серверная часть: Supabase (PostgreSQL + Supabase Auth + Edge Functions)

- Аутентификация: адрес электронной почты/пароль + OAuth, `@supabase/supabase-js@2.x`

- Тип приложения: SPA (нет Next.js, простой Vite с настраиваемой навигацией)
Я использую сеанс Supabase в глобальном хранилище:

Код: Выделить всё

// simplified
const { session, setSession } = useAuthStore()

const user = useMemo(() => {
if (!session?.user) return null
return {
id: session.user.id,
email: session.user.email ?? '',
accessToken: session.access_token,
}
}, [session])

Затем user.accessToken передается в компоненты, которые вызывают мои API/функции Edge,

чтобы они всегда считывали токен из глобального сеанса.
Что работает
При первом посещении после входа в систему:

• Профиль/биллинг/настройки уведомлений/активные сеансы — все загружается правильно.
• Если делаю жёсткую перезагрузку страницы, всё продолжает работать.

Проблема

• Захожу.
• Открываю, например, «Настройки биллинга» или «Настройки уведомлений» — данные есть, все нормально.
• Переключаюсь на некоторое время на другую вкладку браузера.
• Возвращаюсь на вкладку с приложением.
• Теперь Биллинг/Уведомления/в раскрывающемся списке уведомлений отображается бесконечное «Загрузка…».

В DevTools → Консоль ошибок нет, только мои собственные console.log сообщений.

Во вкладке «Сеть» нет очевидных ответов 4xx/5xx, но данные по-прежнему не отображаются в пользовательском интерфейсе.
Если я снова нажимаю «Обновить» (F5), все работает, пока я снова не перехожу на другую вкладку.
Таким образом, само приложение «выживает», находясь в фоновом режиме, но после возврата

некоторые запросы перестают работать корректно, и пользовательский интерфейс зависает в состоянии загрузки.

Подробнее здесь: https://stackoverflow.com/questions/798 ... age-reload