Skeleton (Скелет)

Отображайте макет вашего приложения перед загрузкой данных, чтобы уменьшить дискомфорт от загрузки.

Данные ваших компонентов могут не быть доступны сразу. Вы можете увеличить предполагаемую производительность для пользователей с помощью скелетов. Кажется, что все происходит мгновенно, затем информация постепенно отображается на экране. (см. Avoid The Spinner).

Компонент разработан для использования напрямую в ваших компонентах. Например:

{item ? (
  <img style={{ width: 210, height: 118 }} alt={item.title} src={item.src} />
) : (
  <Skeleton variant="rect" width={210} height={118} />
)}

Variants

Компонент поддерживает 3 формы.

<Skeleton variant="text" />
<Skeleton variant="circle" width={40} height={40} />
<Skeleton variant="rect" width={210} height={118} />

Анимации

По умолчанию скелет пульсирует, но вы можете изменить анимацию волны или полностью отключить ее.

<Skeleton />
<Skeleton animation={false} />
<Skeleton animation="wave" />

Pulsate example

Don Diablo @ Tomorrowland Main Stage 2019 | Official…

Don Diablo396 k views • a week ago

Queen - Greatest Hits

Queen Official40 M views • 3 years ago

Calvin Harris, Sam Smith - Promises (Official Video)

Calvin Harris130 M views • 10 months ago

Wave example

Ted5 hours ago

Why First Minister of Scotland Nicola Sturgeon thinks GDP is the wrong measure of a country's success:

Inferring dimensions

In addition to accepting width and height props, the component can also infer the dimensions.

It works well when it comes to typography as its height is set using em units.

<Typography variant="h1">
  {loading ? <Skeleton /> : 'h1'}
</Typography>

body1

caption

But when it comes to other components, you may not want to repeat the width and height. In these instances, you can pass children and it will infer its width and height from them.

loading
  ? <Skeleton><Avatar /></Skeleton>
  : <Avatar src={data.avatar} />

Ted

Доступность

Skeleton screens provide an alternative to the traditional spinner methods. Rather than showing an abstract widget, skeleton screens create anticipation of what is to come and reduce cognitive load.

The background color of the skeleton uses the least amount of luminance to be visible in good conditions (good ambient light, good screen, no visual impairments).

API

<Skeleton />