В вашем случае, чтобы правильно отображать состояние загрузки (скелетон) при переключении между вкладками в компоненте `ScheduleNavigation`, необходимо убедиться, что вы используете правильные механизмы управления состоянием и обработкой запросов в вашем коде с RTK Query (RTKQ).
1. **Проверьте состояние запроса**: Убедитесь, что вы используете состояние из RTK Query для управления отображением загрузки. RTK Query предоставляет такие состояния, как `isLoading`, `isFetching`, и `isSuccess`, чтобы отслеживать статус запроса.
2. **Переключение между вкладками**: Когда вы переключаетесь между вкладками, вам нужно инициировать новый запрос и использовать соответствующую логику для отображения состояния загрузки. Вы можете это сделать с помощью `selectFromResult` и сохраняя состояние в вашем компоненте.
Вот пример кода, который демонстрирует, как это можно организовать:
```javascript
import React from 'react';
import { useGetScheduleQuery } from './scheduleApi'; // импортируйте свой запрос
import { Tabs, Tab } from '@mui/material'; // или другой UI-компонент для вкладок
const ScheduleNavigation = () => {
const [selectedWeek, setSelectedWeek] = React.useState(1); // по умолчанию первая неделя
const { data, error, isLoading } = useGetScheduleQuery(selectedWeek);
const handleChange = (event, newValue) => {
setSelectedWeek(newValue);
};
return (
<>
<Tabs value={selectedWeek} onChange={handleChange}>
{/* Создайте ваши вкладки */}
<Tab label="Неделя 1" value={1} />
<Tab label="Неделя 2" value={2} />
<Tab label="Неделя 3" value={3} />
</Tabs>
{isLoading && <Skeleton variant="rect" width={210} height={118} />} {/* скелетон загрузки */}
{error && <div>Error loading schedule</div>} {/* сообщение об ошибке */}
{data && (
<div>
{/* Отображение ваших данных */}
{data.map(item => (
<div key={item.id}>{item.title}</div>
))}
</div>
)}
</>
);
};
export default ScheduleNavigation;
```
### Важные моменты:
- **Состояние загрузки**: Связывайте состояние загрузки с отображением скелетона. `isLoading` должен быть `true`, когда данные загружаются, и только тогда показывайте скелетон.
- **Обработка ошибки**: Также стоит обрабатывать потенциальные ошибки получения данных.
- **Динамическое обновление запроса**: При изменении состояния `selectedWeek` будет автоматически выполняться новый запрос, так как `useGetScheduleQuery` зависит от этого значения.
С правильной логикой работы с состоянием и средствами RTK Query проблема отсутствия отображения скелетона должна быть решена.