Привет. Такая проблема: есть компонент Loading со спиннером, он вызывается

Question

Привет. Такая проблема: есть компонент Loading со спиннером, он вызывается

из разных компонентов,
как сделать чтоб анимация(@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>
...

#frontend #javascript #programming #react.js #russian

0

30.09.2020

7 ответов

15 просмотров

{ Amir } Автор вопроса

Vladislav Stepanov
animation-iteration-count: infinite если правильно...

Не правильно понял. В реакте идет анмаунт и маунт одно и того же компонента, разметка остается такой же, а вот анимация сбрасывается и начинается заново.

0

30.09.2020

Konstantin

🙃

0

30.09.2020

{ Amir } Автор вопроса

Konstantin
🙃

😁

0

30.09.2020

{ Amir } Автор вопроса

Konstantin
🙃

Может кто свежим взглядом подскажет еще варианты))

0

30.09.2020

Evgeny Mokeev 🏂

Хорошего и простого способа не знаю Раньше решал через state manager и точечно подписывался на флаги загрузки. В теории можно похожее через context провернуть Еще нагуглил такой хак через css custom properties, но лично не использовал, за качество не отвечаю) https://www.selbekk.io/blog/2019/08/how-to-stop-your-spinner-from-jumping-in-react/

0

30.09.2020

{ Amir } Автор вопроса

Evgeny Mokeev 🏂
Хорошего и простого способа не знаю Раньше решал ...

спасибо, гляну

0

30.09.2020

Vladislav Stepanov · Accepted Answer

Vladislav Stepanov

animation-iteration-count: infinite если правильно понял

0

30.09.2020

169 похожих чатов

Привет. Такая проблема: есть компонент Loading со спиннером, он вызывается

7 ответов

Похожие вопросы