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" />
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
Why First Minister of Scotland Nicola Sturgeon thinks GDP is the wrong measure of a country's success: