из разных компонентов,
как сделать чтоб анимация(@keyframes) привязанная к className компонента не сбрасывалась?
Вложенность примерно такая:
<Check_1>
<Check_2>
<Check_3>
<Route />
</Check_3>
</Check_2>
</Check_1>
Каждый из компонентов проверяет подгрузились ли данные для его работы,
если да - рендерить children, если нет - рендерить <Loading />;
При первой загрузке страницы и до подгрузки всех данных разметка выглядит так:
...
<div id='root'>
<div class='page'>
<div class='loading'></div>
</div>
</div>
...
animation-iteration-count: infinite если правильно понял
Не правильно понял. В реакте идет анмаунт и маунт одно и того же компонента, разметка остается такой же, а вот анимация сбрасывается и начинается заново.
Может кто свежим взглядом подскажет еще варианты))
Хорошего и простого способа не знаю Раньше решал через state manager и точечно подписывался на флаги загрузки. В теории можно похожее через context провернуть Еще нагуглил такой хак через css custom properties, но лично не использовал, за качество не отвечаю) https://www.selbekk.io/blog/2019/08/how-to-stop-your-spinner-from-jumping-in-react/
Обсуждают сегодня