Если вы работаете над React JS вместе с API-интеграциями, вы знаете, что некоторые ответы API могут быть с задержкой.
Как разработчик, вы должны показывать пользователю загрузчик, а не пустую страницу, на которой данные появляются по крупицам по мере того, как ответы API обрабатываются и отображаются на Пользовательский интерфейс.
Конечно, CSS полезен, и он решит проблему с загрузчиками, но зачем писать дополнительный код, если у вас есть скелетные загрузчики, которые покрывают раздел, половину страницы или всю страницу целиком!
React JS предоставляет удобный загрузчик SVG под названием «Загрузчик контента». Для установки используйте команду: npm i react-content-loader
Я приведу вам пример, используемый в приложении следующим образом:
- Оболочка svg — это родитель, внутри которого будет отображаться загрузчик контента. Этот svg принимает ширину, высоту или окно просмотра в соответствии с вашим использованием.
- Content Loader принимает параметры высоты и ширины, которые наследуют родительскую высоту и ширину соответственно, если они не описаны, в противном случае они используют то, что было определено, например 500px и 200px.
- Скорость Content Loader по умолчанию составляет 1,2 секунды. Чем меньше число, тем медленнее скорость загрузчика.
- Первичный цвет — это существующий фоновый цвет, а вторичный цвет — это проходящий цвет кадра.
Чтобы попробовать его в своем коде, ознакомьтесь с уже существующими примерами загрузчика вместе с JS-кодом на этом сайте — https://skeletonreact.com/#gallery и вуаля! Готово!