はじめに

最近リリースしたアプリの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>

でもいけるかなと思ったのですが、表示はされるもののスタイルが崩れたため一旦やめました。
でもcount使った方がよりスッキリします。
count使うとspanタグ内にspanタグが入れ子になっていたので、CSS調整したら問題ないと思います。
またゆっくりやってみます。

出力

おわりに

今まで読込み中は「読込み中・・・」と表示していただけだったのですが、良い感じにしてみたいなと思って挑戦してみました。
一気にアプリ感出て大満足です😊

いいなと思ったらぜひやってみてください！！

カレンダー(fullcalendar)とpdf(react-pdf)の記事を書こうか悩んでます…
需要があればお知らせください！