В React можно использовать компонент `React.lazy` вместе с `React.Suspense` для отображения загрузочного экрана, пока компоненты не загрузятся полностью.
Вот пример использования:
```jsx
import React, { Suspense } from 'react';
import LoadingScreen from './LoadingScreen';
const MyComponent = React.lazy(() => import('./MyComponent'));
function App() {
return (
<div>
<Suspense fallback={<LoadingScreen />}>
<MyComponent />
</Suspense>
</div>
);
}
export default App;
```
Здесь компонент `MyComponent` будет отображаться только после полной загрузки. В промежутке отображается компонент `LoadingScreen`.
Обязательно установите `fallback` для `Suspense`, который будет отображаться пока компонент не загрузится. В примере я использовал `LoadingScreen`, но вы можете настроить его в соответствии со своими потребностями.
Важно заметить, что `React.lazy` позволяет только лениво подгружать компоненты, а не ресурсы, такие как изображения или шрифты. Для отслеживания загрузки всех ресурсов, вы можете использовать событие `load` на объекте `window`.
```jsx
import React, { useState, useEffect } from 'react';
import LoadingScreen from './LoadingScreen';
import MyComponent from './MyComponent';
function App() {
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
window.addEventListener('load', () => {
// Все ресурсы загружены
setIsLoading(false);
});
}, []);
return (
<div>
{isLoading ? <LoadingScreen /> : <MyComponent />}
</div>
);
}
export default App;
```
Здесь мы добавляем слушатель события `load`, чтобы отслеживать, когда все ресурсы, включая изображения и шрифты, будут полностью загружены. При срабатывании события `load`, состояние `isLoading` изменяется на `false`, и компонент `LoadingScreen` больше не отображается.