Проверка на загрузку и применение стилей
Проблема следующая, необходимо перед тем как показать страницу пользователю подождать пока загрузится стили шрифты и т.п. и они применятся(пока это все грузится сайт выглядит кривым) и вместо этого показать Loader. вот что можно использовать чтобы проверить что все гуд?
Если к примеру использовать событие load то будет ожидаться загрузка изображений и т.п. и это не пригодно в моем случае. пробовал использовать Suspense, но это как понимаю не работает на загрузку стилей только на компоненты
<Suspense fallback={<Loading />}>
<SomeComponent />
</Suspense>
Ответы (1 шт):
Можно воспользоваться стандартным событием window.onload. Оно наступает тогда, когда все внешние ресурсы(стили, картинки) загружены.
Стоит сразу оговориться, что если есть загрузка стилей или картинок внутри самих компонентов, то придется их выносить наружу, иначе "моргание" будет.
В файле index.js, который ставит компонент App назначаем обработчик для события window.onload и по самому событию будем ставить компонент App.
До наступления события, будет установлен компонент лоадер.
window.onload = () => {
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
}
// Компонент лоадера
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<div>Ждем загрузки</div>
</Provider>
</React.StrictMode>,
document.getElementById('root')
);