ローディングUI
待っている間に何を見せるか
前回で、読み込み中という状態は型の上に存在するようになりました。次は、その間に何を見せるかです。選び方は大きく3つあります。
- 何も出さない。一瞬だけ真っ白になり、壊れているように見えます
- くるくる回る印を出す。待たされていることは伝わりますが、何が来るのかは分かりません
- スケルトンを出す。これから出る中身と同じ形の灰色の板を並べます
fleama のような一覧の画面では、3つ目のスケルトンが向いています。
スケルトンが効く理由
一覧は、中身が届いた瞬間に高さが変わります。真っ白だったところに急にカードが5枚生えると、その下にあったボタンが押した瞬間にずれる、という事故が起きます。
スケルトンは先に場所を取っておくやり方です。届く前と届いたあとで高さがだいたい同じなので、画面が跳ねません。
<div className="skeleton-list">
{[1, 2, 3].map((n) => (
<div key={n} className="skeleton" />
))}
</div>板そのものは中身のない箱です。数はこれから出る件数に合わせて決め打ちで構いません。高さと背景色だけ付けておけば板らしく見えます。
読み込み中を外側にも書く
スケルトンを出すだけだと「読み込みが終わったのに板が残っている」書き方をしても気付けません。外側の入れ物に目印のクラスを付けて、終わったら外す形にしておくと、状態と見た目が1対1で結び付きます。
<div className={state.status === "loading" ? "panel is-loading" : "panel"}>三項演算子でクラス名を切り替えるのは、React でよく使う書き方です。
演習
読み込み中の表示をスケルトンに差し替えます。