Skeleton screen スケルトンスクリーン UI
https://gyazo.com/f27941eb9a2db29c910a840d9e876c4a
ローディング Loading Progress Indicator中に、空のコンテンツを表示するProgress Indicator Loading UI
もともとは、CLS Cumulative Layout Shift対策で生まれた
別名
Skeleton Loader
Content Loader
Lazy load 遅延読み込み
画像について
スケルトンローダーと画像遅延をあわせる
Googleの画像検索時の色表示やMediumの画像モザイク的表示
個人的
待機状態のUIについて整理してみる(デザイン編)
こちらに待機系の情報にまとめました！
参考
Facebookなどで使われているローディングの名称を知ってる？ / 調べたらたくさんありすぎた話 - omuriceman's blog
プレースホルダを用いたローディングUI - Shunsuke - Medium
Effective Skeleton Screens - Web Performance Consulting | TimKadlec.com
More Accessible Skeletons | Adrian Roselli
LucasLeandro1204/vue-content-loading: Vue component to easily build (or use presets) SVG loading cards Facebook like.
Vue.js用のライブラリ
Stop Using A Loading Spinner, There’s Something Better 2017/10/02
Skelton loader使おう記事
Everything you need to know about skeleton screens | by Bill Chung | UX Collective
比較や理想と実際例が良かった
Research量も内容も面白い、必見
Skeleton Loading State as a System | by Nathaniel Kessler | JavaScript in Plain English
詳しい実装、わかりやすい
danilowoz/react-content-loader: ⚪ SVG-Powered component to easily create skeleton loadings.
SVG Scalable Vector Graphicsを利用したReact用のScreen UI