Создайте что-нибудь интересное для пользователей, пока ваши данные загружаются.
Одним из преимуществ создания приложения на 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), вы сможете настроить адаптируемую библиотеку классов для замены контента загрузчика и очень быстро создавать экраны загрузчика.
Спасибо за прочтение!