Skeleton 骨架屏

骨架屏可以在获取到数据之前显示一个预览占位符，从而减轻由加载时间造成的困扰。

当组件需要的数据或许无法立即获取时，你就可以使用骨架屏来提升用户观感上的表现。就好像能够感觉到事情马上就要发生了，然后信息再逐步的显示在屏幕上(Cf. Avoid The Spinner)。

这个组件可以直接在你的组件中使用。就像这样：

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

变种

The component supports 3 shape variants.

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

Animations

By default, the skeleton pulsate, but you can change the animation for a wave or disable it entirely.

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

YouTube 示例

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

Facebook 示例

Ted5 hours ago

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

API

<Skeleton />