Merge pull request #187 from prgrms-web-devcourse-final-project/feat/186-music-search-sheet-loading

[feat] 음악 검색 로딩 추가

Author: denshou

src/assets/lottie/loading.json

@@ -1,15 +1,8 @@
-import { useEffect, useState } from 'react';
 import Lottie from 'lottie-react';
+import animationData from '@/assets/lottie/loading.json';
 
 // 무한스크롤용
 export default function LoadingMini() {
-  const [animationData, setAnimationData] = useState(null);
-
-  useEffect(() => {
-    fetch('https://cdn.lottielab.com/l/Dep5onAFaPJbNs.json')
-      .then((response) => response.json())
-      .then((data) => setAnimationData(data));
-  }, []);
   return (
     <div className="relative w-[45px] h-[45px] overflow-hidden">
       <Lottie

src/components/loading/LoadingMini.tsx

@@ -6,6 +6,7 @@ import { useEffect, useRef, useState } from 'react';
 import defaultImage from '@assets/images/default.png';
 import axios from 'axios';
 import { useInfiniteQuery } from '@tanstack/react-query';
+import LoadingMini from '../loading/LoadingMini';
 
 function MusicSearchSheet() {
   const [searchText, setSearchText] = useState('');
@@ -31,8 +32,8 @@ function MusicSearchSheet() {
 
   const {
     data, // 가져온 데이터
-    // isLoading, // 첫 페이지 로딩 중
-    // isFetchingNextPage, // 다음 페이지 로딩 중
+    isLoading, // 첫 페이지 로딩 중
+    isFetchingNextPage, // 다음 페이지 로딩 중
     hasNextPage, // 다음 페이지 여부
     fetchNextPage, // 다음 페이지 요청 함수
   } = useInfiniteQuery({
@@ -95,6 +96,13 @@ function MusicSearchSheet() {
         </div>
       );
     }
+    if (isLoading) {
+      return (
+        <div className="flex justify-center mt-5">
+          <LoadingMini />
+        </div>
+      );
+    }
 
     if (!data?.pages[0].items.length) {
       return (
@@ -107,7 +115,7 @@ function MusicSearchSheet() {
     return (
       <div className="flex flex-col divide-y divide-gray-5">
         {data?.pages.map((page, index) => (
-          <div key={index} className='flex flex-col divide-y divide-gray-5'>
+          <div key={index} className="flex flex-col divide-y divide-gray-5">
             {page.items.map((music: SpotifyMusic, i: number) => (
               <MusicSearchList
                 key={i}
@@ -119,6 +127,11 @@ function MusicSearchSheet() {
             ))}
           </div>
         ))}
+        {isFetchingNextPage && (
+          <div className="flex justify-center mt-5">
+            <LoadingMini />
+          </div>
+        )}
       </div>
     );
   };