Создайте что-нибудь интересное для пользователей, пока ваши данные загружаются.

Одним из преимуществ создания приложения на React и React Native или в одностраничных приложениях в целом является то, что мы можем очень быстро перемещаться между страницами. Однако в некоторых случаях, когда нам нужно fetch и Get данные из API или серверной части, нам нужно дождаться respond. Есть отличный принцип дизайна, который гласит, что когда что-то займет некоторое время, мы должны сообщить об этом пользователю.

Используя react-content-loader или экран-скелет, вы можете показать пользователям, что все почти готово и что-то происходит. В этом блоге я собираюсь продемонстрировать, как использовать предустановки response-content-loader, такие как Facebook и Instagram, или как создать и настроить компонент на основе SVG, который показывает элементы загрузки нашей страницы в форме, аналогичной фактическому контенту.

Плюсы:

  • Вы можете использовать любые формы SVG для создания элементов загрузчика.
  • Создать анимированный заполнитель, который светится слева направо, несложно.
  • У него есть несколько предварительно стилизованных загрузчиков контента (например, Facebook, Instagram).
  • Поскольку SVG поддерживает множество фигур, его можно использовать для любого сложного пользовательского интерфейса.

Сначала я начинаю с предустановленного загрузчика контента в приложении. Для начала нам сначала нужно установить пакет (npm):

npm i react-content-loader — save

or

yarn add react-content-loader

Затем мы импортируем контент из react-content-loader:

import ContentLoader, {  Instagram } from 'react-content-loader';
class Bookings extends React.Component {
 return requests ? (
    <div>
      //
      //
   </div>
   ):(
      <>
        <h3>Loading ...</h3>
        <Instagram />
      </>
)}

Это будет выглядеть так:

Вот некоторые из предустановленных примеров, которые вы можете использовать, импортировав их. Вы можете увидеть форму здесь:

import { Facebook } from 'react-content-loader'

const MyFacebookLoader = () => <Facebook />
-------------------------------------
import { Instagram } from 'react-content-loader'

const MyInstagramLoader = () => <Instagram />
-------------------------------------
import { Code } from 'react-content-loader'

const MyCodeLoader = () => <Code />
--------------------------------------
import { List } from 'react-content-loader'

const MyListLoader = () => <List />
---------------------------------------
import { BulletList } from 'react-content-loader'

const MyBulletListLoader = () => <BulletList />

Если вы хотите создать свой собственный загрузчик на основе стиля вашего контейнера, вы можете легко использовать этот онлайн-инструмент: Создатель React Content Loader. Вам просто нужно рисовать, используя холст или код, используя живое редактирование.

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

Затем он просто генерирует для вас код, готовый к копированию и добавлению в качестве компонента для импорта и использования:

import React from "react"
import ContentLoader from "react-content-loader"
const MyLoader = (props) => (
  <ContentLoader 
    speed={10}
    width={404}
    height={75}
    viewBox="0 0 404 75"
    backgroundColor="#1766ab"
    foregroundColor="#b9d2e4"
    {...props}
  >
    <rect x="118" y="91" rx="0" ry="0" width="1" height="0" /> 
    <rect x="4" y="-21" rx="0" ry="0" width="336" height="110" /> 
    <circle cx="68" cy="199" r="28" /> 
    <rect x="121" y="183" rx="0" ry="0" width="237" height="19" /> 
    <rect x="123" y="216" rx="0" ry="0" width="235" height="18" /> 
    <rect x="271" y="170" rx="0" ry="0" width="1" height="21" /> 
    <rect x="219" y="35" rx="0" ry="0" width="4" height="32" />
  </ContentLoader>
)
export default MyLoader

Вы можете использовать его на странице, которую хотите показать загрузчику контента:

{image ? <img onClick={()=> setOpen(true)} className={classes.image} src={image} alt={title} /> : <MyLoader/>}

Довольно просто, правда? Как только вы узнаете, как заменить контент загрузкой карты (также известной как скелет UI), вы сможете настроить адаптируемую библиотеку классов для замены контента загрузчика и очень быстро создавать экраны загрузчика.

Спасибо за прочтение!