Каркасные экраны в React и React Native

Development | Amber | Комментировать запись

Каркасный экран — это термин, придуманный Люком Вроблевски, который описывает шаблон взаимодействия с пользователем, что подразумевает отображение нейтральных элементов при постепенной загрузке контента на экран.

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

Движущаяся и линейно-градиентная анимация загрузки воспринимаются как более быстрые по сравнению с неподвижной или пульсирующей. При загрузке изображений можно использовать их доминирующие цвета с элементами-заполнителями.

В данном материале мы представим несколько решений для реализации каркасных экранов в приложениях React и React Native.

Использование каркасных экранов в React

В React эффекта каркасного экрана можно добиться с помощью componentDidMount и линейного градиента.

Однако вместо того, чтобы внедрять собственное решение, вы можете рассмотреть более надежные варианты, разработанные сообществом: react-content-loader, react-skeletor и react-loading-skeleton.

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

Вот пример react-content-loader:

import ContentLoader, { Facebook } from 'react-content-loader';

const MyFacebookLoader = () => <Facebook />

const MyLoader = () => (
  <ContentLoader>
    {/* Pure SVG */}
    <rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
    <rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
  </ContentLoader>
)

В качестве альтернативы можно применить react-placeholder и SVG-Skeleton — это два других популярных готовых решения, которые предоставляют компоненты-заполнители и стили.

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

Читайте также: Компоненты высшего порядка React: введение

Вот пример react-skeletor:

import { createSkeletonProvider, createSkeletonElement } from '@trainline/react-skeletor';

const H1 = createSkeletonElement('h1');
const H2 = createSkeletonElement('h2');

const NameCard = ({ firstName, lastName }) => (
  <div>
    <H1 style={style}>{ firstName }</H1>
    <H2 style={style}>{ lastName }</H2>
  </div>
)

const UserDetailPage = ({ user }) => (
  <div>
    ...
    <NameCard user={user} />
    ...
  </div>
)

export default createSkeletonProvider(
  // Dummy data with a similar shape to the component's data.
  {
    user: {
      firstName: '_____',
      lastName: '_____'
    }
  },

  // Predicate that returns true if the component is in a loading state.
  ({ user }) => user === undefined,

  // Define the placeholder styling for the children elements.
  () => ({
    color: 'grey',
    backgroundColor: 'grey'
  })
)(UserDetailPage)

Подробнее о преимуществах react-skeletor можно узнать здесь.

react-loading-skeleton автоматически создает каркасные экраны из существующих стилей, полностью устраняя необходимость в создании выделенных каркасных экранных компонентов.

Вот пример использования react-loading-skeleton:

import Skeleton from 'react-loading-skeleton';

const Blogpost = () => <div style={{ fontSize: 20, lineHeight: 2 }}>
  <h1>{this.props.title || <Skeleton />}</h1>
  {this.props.body || <Skeleton count={10} />}
</div>

Вот основные средства для создания каркасных экранов в React.

Использование каркасных экранов в React Native

Приложения React Native поддерживают два разработанных сообществом средства: react-native-svg-animated-linear-gradient и react-native-shimmer.

react-native-svg-animated-linear-gradient может создать анимированный эффект линейного градиента.

Пример применения react-native-svg-animated-linear-gradient:

import SvgAnimatedLinearGradient from 'react-native-svg-animated-linear-gradient';

// Instagram style.
<SvgAnimatedLinearGradient height={300}>
    <Circle cx="30" cy="30" r="30"/>
    <Rect x="75" y="13" rx="4" ry="4" width="100" height="13"/>
    <Rect x="75" y="37" rx="4" ry="4" width="50" height="8"/>
    <Rect x="0" y="70" rx="5" ry="5" width="400" height="200"/>
</SvgAnimatedLinearGradient>

react-native-shimmer — это реализация Shimmer от Facebook, встроенная в iOS и Android.

Пример использования react-native-shimmer:

import Shimmer from 'react-native-shimmer';

<Shimmer>
  <Text>Loading...</Text>
</Shimmer>

Это все доступные решения для создания каркасных экранов в React Native.

Альтернативные решения

Сообщество JavaScript также работает над данной проблемой. Одно из самых популярных средств называется Placeload.js. Еще есть jquery.skeleton.loader — это плагин jQuery. А в Semantic UI есть собственный встроенный элемент Placeholder.

Использование изображений и доминирующего цвета

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

Несколько ресурсов по извлечению основных цветов из изображения: color-thief, node-vibrant и color-loader.

Итоги

Здесь мы рассмотрели несколько решений для реализации каркасных экранов в приложениях React и React Native.

Презентацию Люка Вроблевски о каркасных экранах можно посмотреть здесь.

Читайте также:

• Everything you need to know about skeleton screens
• Stop Using Loading Spinner, There’s Something Better

При использовании каркасных экранов следует учитывать их доступность: программы для чтения с экрана и вспомогательное программное обеспечение могут сбиваться с толку и создавать путаницу, сталкиваясь с дополнительными элементами страницы, к которым относятся и каркасные экраны. По этой ссылке вы узнаете, как использовать маркировку ARIA (например aria-disabled={true} или aria-label=”loading”), чтобы игнорировать эти элементы.