1. React Query와 함께 사용 (가장 일반적)

  import { useQuery } from "@tanstack/react-query";
import MovingTruckLoader from "@/components/common/pending/MovingTruckLoader";

const MyComponent = () => {
  const { data, isPending, isError } = useQuery({
    queryKey: ["myData"],
    queryFn: fetchMyData,
  });

  // 로딩 중일 때
  if (isPending) { //isLoading 보다 isPending을 추천
    return (
      <div className="min-h-screen bg-gray-200">
        <MovingTruckLoader size="lg" loadingText="데이터를 불러오는 중..." />
      </div>
    );
  }

  // 에러일 때
  if (isError) {
    return <div>에러가 발생했습니다.</div>;
  }

  return <div>{data}</div>;
};

2. 개별 로딩 상태 사용

import { useState } from "react";
import MovingTruckLoader from "@/components/common/pending/MovingTruckLoader";

const MyComponent = () => {
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    setLoading(true);
    try {
      await someAsyncOperation();
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-gray-200">
        <MovingTruckLoader size="md" loadingText="처리 중..." />
      </div>
    );
  }

  return <button onClick={handleSubmit}>제출</button>;
};

3. Mutation과 함께 사용

import { useMutation } from "@tanstack/react-query";
import MovingTruckLoader from "@/components/common/pending/MovingTruckLoader";

const MyComponent = () => {
  const mutation = useMutation({
    mutationFn: submitData,
    onSuccess: () => {
      console.log("성공!");
    },
  });

  const handleSubmit = () => {
    mutation.mutate(data);
  };

  // Mutation 로딩 중일 때
  if (mutation.isPending) {
    return (
      <div className="min-h-screen bg-gray-200">
        <MovingTruckLoader size="sm" loadingText="저장 중..." />
      </div>
    );
  }

  return <button onClick={handleSubmit}>저장</button>;
};

4. 여러 로딩 상태 조합

const MyComponent = () => {
  const { data: users, isPending: usersLoading } = useQuery({
    queryKey: ["users"],
    queryFn: fetchUsers,
  });

  const { data: posts, isPending: postsLoading } = useQuery({
    queryKey: ["posts"],
    queryFn: fetchPosts,
  });

  // 둘 중 하나라도 로딩 중이면
  if (usersLoading || postsLoading) {
    return (
      <div className="min-h-screen bg-gray-200">
        <MovingTruckLoader size="lg" loadingText="데이터를 불러오는 중..." />
      </div>
    );
  }

  return (
    <div>
      <h1>사용자: {users.length}명</h1>
      <h1>게시글: {posts.length}개</h1>
    </div>
  );
};

5. 조건부 로딩

const MyComponent = () => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState(null);

  const fetchData = async () => {
    setLoading(true);
    try {
      const result = await api.getData();
      setData(result);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      {loading ? (
        <MovingTruckLoader size="md" loadingText="데이터를 불러오는 중..." />
      ) : (
        <div>{data}</div>
      )}
      <button onClick={fetchData}>새로고침</button>
    </div>
  );
};

MovingTruckLoader 옵션

<MovingTruckLoader 
  size="lg"           // "sm" | "md" | "lg"
  loadingText="로딩 중..."  // 표시할 텍스트
  className="custom-class"  // 추가 CSS 클래스
/>