スケルトンローディングの実装(※カンタン)

投稿日: 2025年01月17日

学習振り返り

要約

最近リリースしたアプリにスケルトンローディングを実装し、react-loading-skeletonライブラリを使用して簡単に良いUIを作成した。
スケルトンローディングはデータ読み込み中に表示されるプレースホルダーで、待機中のユーザーに対して画面が空白にならないようにする機能。
カレンダーコンポーネントのリファクタリングを行い、SkeletonThemeを活用したスタイル設定の簡略化を図り、アプリの印象を向上させた。

はじめに

最近リリースしたアプリのloading画面にskeletonを実装したのですが、ライブラリ使うと死ぬほど簡単に良い感じのUIが出来たのでご紹介します。
簡単に真似できる＆loaging中の画面表示は全員共通でオリアプにはあるはずなので興味ある方はぜひ見て行ってください。

スケルトンローディング

上手く説明できないのでAI先生に代わりに説明してもらいました。

スケルトンローディングは、アプリやウェブサイトがデータを読み込んでいる間に表示される、プレースホルダーのようなものです。
これは、ユーザーがデータが表示されるのを待つ間に、画面が空白にならないようにするための手法です。例えば、InstagramやYouTubeなどのアプリで、画像やテキストが読み込まれる前に灰色のブロックが表示されているのを見たことがあるかもしれません。それがスケルトンローディングです。

↓こんなやつです。

ライブラリ

ライブラリなしでも難易度は高くなくて実装しやすい内容だとは思いますが、今回はreact-loading-skeletonというライブラリを使って実装しました。

結果、超簡単にできて良かったです！

使い方

インストール

npm i react-loading-skeleton

インポート

import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";

コンポーネントとcssファイルをインポートします。

コード

基本的な使い方です。

"use client";
import { useMe } from "../_hooks/useMe";
import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";

export const User: React.FC = () => {
  const { data, error } = useMe();
  if (!data)
    return (
      <div className="text-right">
　　　　　//↓ここで使用
        <Skeleton width={150} />
      </div>
    );
  if (error) return <div className="text-center pt-20">データ取得に失敗</div>;
  return (
    <div className="w-full">
      <div className="text-right">ログインユーザー:{data.user.name}</div>
    </div>
  );
};

このコンポーネントではPropsにwidthを渡しています。

<Skeleton width={150} />

他にもProps色々とあります。
私はデザインにこだわるタイプではないので、width、 height、 borderRadiusくらいしかつかっていません。

SkeletonTheme

ブログ書いてて気づきましたw
便利なコンポーネント見つけました。

SkeletonThemeの子要素のSkeletonに同じスタイルを設定できるというものです。

こちらを使ってリファクタリングしてみたいと思います。
対象はカレンダーのページで使っているSkeletonコンポーネントです。

import Skeleton from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";
export const CalendarSkeleton: React.FC = () => {
  return (
    <>
      <div className="flex justify-between items-center mb-4 px-2">
        <Skeleton width={30} height={30} borderRadius="50%" />
        <Skeleton width={120} height={20} />
        <div className="flex gap-2">
          <Skeleton width={30} height={30} borderRadius="50%" />
          <Skeleton width={30} height={30} borderRadius="50%" />
          <Skeleton width={30} height={30} borderRadius="50%" />
          <Skeleton width={30} height={30} borderRadius="50%" />
        </div>
      </div>
      <div className="w-full">
        <Skeleton width="100%" height={200} />
      </div>
    </>
  );
};

リファクタ前

下記の重複しているスタイル設定をまとめてみます。

<div className="flex gap-2">
      <Skeleton width={30} height={30} borderRadius="50%" />
      <Skeleton width={30} height={30} borderRadius="50%" />
      <Skeleton width={30} height={30} borderRadius="50%" />
      <Skeleton width={30} height={30} borderRadius="50%" />
</div>

リファクタ後

<div className="flex gap-2">
     <SkeletonTheme width={30} height={30} borderRadius="50%">
            <Skeleton />
            <Skeleton />
            <Skeleton />
            <Skeleton />
     </SkeletonTheme>
</div>

だいぶスッキリしました！

<div className="flex gap-2">
     <SkeletonTheme width={30} height={30} borderRadius="50%">
            <Skeleton count={4}/>
     </SkeletonTheme>
</div>