スケルトンスクリーンを実装してみた
はじめに
react-content-loader を使ったスケルトンスクリーンの実装について書いた記事です。Create React Content Loader のページでコードも生成され、すごく便利ツールだったので試したことをまとめました。
スケルトンスクリーンとは
画面に表示するデータが読み込まれるまでの間、そのコンテンツの枠組みだけを事前に表示させるUIのことです。
こういうやつです。
スケルトンスクリーンのメリット
画面に表示するデータが読み込まれるまでの間、ローディングやスピナー、空白の画面を表示することに比べて、スケルトンスクリーンは待機してる体感時間を短く感じるメリットがあります。（それほど大きな差はないらしいですが。）
Skeleton screens (as splash screens), when used to indicate that a screen is loading, are perceived as being shorter in duration when compared against a blank screen (our control) and a spinner — but not by much
また、事前に枠組みを表示させるので、レイアウトシフトがそもそも起きなくなります。（ローディング中と結果の画面のガタつきなどがなくなります。）
レイアウトシフトは、表示された要素がレンダリングされたフレームから次のフレームへと位置を変更する際に発生します。
その一方で、スケルトン画面と実際の結果が一致しない場合は、ユーザーを混乱させるし、フラストレーションを与えてしまう可能性もあります。
When the skeleton screen doesn’t match the outcome, we’ve created confusion and frustration that will overcome any benefit you might have gotten from trying to handle that delay in a better way.
やったこと
以下、今回試したことです。
(1) スケルトンスクリーンのデザイン
- スケルトンスクリーンのデザインを用意します。（デザイナーさんに作ってもらった🤝）
(2) `react-content-loader` を導入する
- README通りに導入します。
https://github.com/danilowoz/react-content-loader
$ yarn add react-content-loader
(3) Create React Content Loader にて、(1)のコンポーネントを作成
- Create React Content Loader にて、(1)のデザインのスケルトンスクリーンのコンポーネントを作ります。
- 自動生成されるのめっちゃ便利
(4) (3)で生成したコンポーネントをプロジェクト内で実装
- (3)で生成したコンポーネントをコピペして、スケルトンスクリーンを導入したいプロジェクト内に実装
(5) (4)で実装したコンポーネントを必要な箇所から呼び出す
-
今回は、カードのスケルトンスクリーンを作成して、一覧表示の画面でローディン中は表示させるようにしました。
-
実装イメージ、参考にしたコード（vercel/commerce）
おわりに
-
react-content-loaderはじめて使ったけどめっちゃ便利でした。実装してて楽しかったです。 - 今回はあまり複雑じゃない画面（ひとつのAPIを叩いた際のローディングの表示をスケルトンスクリーンに変えただけ）の実装だったので、割と簡単という印象でしたが、複雑な画面の実装になってくると、結構大変そうでした。スケルトンスクリーンについていろいろ調べてる中で以下の記事が実践的で勉強になりました。
- Lighthouseのスコア見たら0になってたのナイス✅✅✅
参考
Discussion