Если вы работаете над React JS вместе с API-интеграциями, вы знаете, что некоторые ответы API могут быть с задержкой.

Как разработчик, вы должны показывать пользователю загрузчик, а не пустую страницу, на которой данные появляются по крупицам по мере того, как ответы API обрабатываются и отображаются на Пользовательский интерфейс.

Конечно, CSS полезен, и он решит проблему с загрузчиками, но зачем писать дополнительный код, если у вас есть скелетные загрузчики, которые покрывают раздел, половину страницы или всю страницу целиком!

React JS предоставляет удобный загрузчик SVG под названием «Загрузчик контента». Для установки используйте команду: npm i react-content-loader

Я приведу вам пример, используемый в приложении следующим образом:

  1. Оболочка svg — это родитель, внутри которого будет отображаться загрузчик контента. Этот svg принимает ширину, высоту или окно просмотра в соответствии с вашим использованием.
  2. Content Loader принимает параметры высоты и ширины, которые наследуют родительскую высоту и ширину соответственно, если они не описаны, в противном случае они используют то, что было определено, например 500px и 200px.
  3. Скорость Content Loader по умолчанию составляет 1,2 секунды. Чем меньше число, тем медленнее скорость загрузчика.
  4. Первичный цвет — это существующий фоновый цвет, а вторичный цвет — это проходящий цвет кадра.

Чтобы попробовать его в своем коде, ознакомьтесь с уже существующими примерами загрузчика вместе с JS-кодом на этом сайте — https://skeletonreact.com/#gallery и вуаля! Готово!