Для этого вам понадобится использовать состояние компонента, например, с помощью хука `useState`. Вам нужно будет создать переменную состояния `isFetching` и функцию `setFetching`, которая будет обновлять значение `isFetching`:
```javascript
import React, { useState, useEffect } from "react";
function YourComponent() {
const [isFetching, setFetching] = useState(false);
useEffect(() => {
const fetchData = async () => {
// Устанавливаем значение isFetching в true перед выполнением запроса
setFetching(true);
try {
const response = await fetch("your-api-endpoint");
const data = await response.json();
// Обработка полученных данных
} catch (error) {
// Обработка ошибок
}
// Устанавливаем значение isFetching в false после завершения запроса
setFetching(false);
};
fetchData();
}, []);
return (
<div>
{/* Проверяем значение isFetching и отображаем Loader при необходимости */}
{isFetching && <Loader />}
{/* Остальной контент компонента */}
</div>
);
}
export default YourComponent;
```
В этом примере мы создали переменную состояния `isFetching`, которая устанавливается в `true` перед выполнением запроса и в `false` после его завершения. Затем мы используем условный оператор `{}` для проверки значения `isFetching` и отображения компонента `Loader`, если `isFetching` равно `true`. Если `isFetching` равно `false`, отображается остальной контент компонента.