Reactでローディングを実装する @yukilulu0229

install

npm i react-loading-icons

使う

app.tsx

import { TailSpin } from "react-loading-icons";


const Chat = () => {
  const [isLoading, setIsLoading] = useState(false);
  
  const logic = async () => {
    setIsLoading(true);

    // なんかロジック中

    setIsLoading(false);
  };

  return (
    <div className="bg-gray-500 h-full p-4 flex flex-col">
      {isLoading && <TailSpin />}
    </div>
  );
};

export default Chat;

インポート

import { TailSpin } from "react-loading-icons";

コーディング

 {isLoading && <TailSpin />}

isLoadingがtrueなら表示

ロジック

const [isLoading, setIsLoading] = useState(false);

useStateで変更できるようにする

const logic = async () => {
    setIsLoading(true);

    // なんかロジック中

    setIsLoading(false);
};

ロジックの最中の処理