react-loading-skeletonを使ってみた

今時ってデータをロードしたりしてるときとかにスピナー系を出すよりも表示するコンテンツの影UIみたいなのを表示しておいて
データ取得が完了したらそれにデータをマッピングしたりしてるのが多い気がしたので調べてみるとreact-loading-skeletonって
のがあるらしいので使ってみた

どういうやつ？

こういうやつｗ
データの取得とかが完了するまではこういうUIの雛形(データは表示されないがレイアウトだけでる)とかを表示してるのが多い気がする

導入

npm install react-loading-skeleton

使ってみる

import { useEffect, useState } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import 'react-loading-skeleton/dist/skeleton.css'

interface Category {
  name: string
}

interface Data {
  title: string
  categories: Category[]
  content: string
}

const App = (): React.JSX.Element => {
  const [data, setData]= useState<Data | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch("/test.json");

      if (!res.ok) {
        throw new Error("error")
      }

      const jsonData = await res.json();
      setTimeout(() => {
        setData(jsonData);
      }, 5000);
    };
    fetchData();
  }, []);

  if (data === null) {
    return (
      <div style={{width: 500, height:500 }}>
        <SkeletonTheme baseColor="#cbd5e1" highlightColor="#e2e8f0">
          <h1>
            <Skeleton count={1} />
          </h1>
          <div className="categories">
            <Skeleton count={1} />
          </div>
          <div className="body">
            <Skeleton count={1} width={500} height={300} />
          </div>
        </SkeletonTheme>
      </div>
    );
  }

  return (
    <section>
      <h1>{data.title}</h1>
      <div className="categories">
        {data.categories.map((category) => (
          <span style={{ marginRight: "10px" }}>{category.name}</span>
        ))}
      </div>
      <div dangerouslySetInnerHTML={{ __html: data.content }} />
    </section>
  );
};

export default App;

わざとデータロードのタイミングをsetTimeoutでずらしてる。
んでその際にdataがnullな場合にはreact-loading-skeletonを使った雛形UIを表示している。
最初にこれのCSSを読み込むのを忘れずに

という感じでまあデータをロードするまでスピナーとかでくるくるするようなのを使うよりも今時とかだとこういうような雛形UIを
出すのが一般的なのかもしれない。多分...(Youtubeとかもこういう系の仕組み使ってるっぽい)

余談

ChatGPTによると

だそうです。要はTaildwind使ってるなら自前で実装して使ってないならこういうの使うのはありだそうです