feat: 스크롤 중 로티 아톰

DDD-Community · Feb 27, 2024 · e82971e · e82971e
1 parent f041cd3
commit e82971e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/src/components/atoms/Lottie.tsx b/src/components/atoms/Lottie.tsx
@@ -3,7 +3,15 @@ import animationData from './../../assets/lottie.webp';
 import Image from 'next/image';
 
 const LottieComponent = () => {
-  return <Image src={animationData} alt="로딩중" width={167} height={156} />;
+  return (
+    <Image
+      className="m-auto"
+      src={animationData}
+      alt="로딩중"
+      width={167}
+      height={156}
+    />
+  );
 };
 
 export default LottieComponent;
diff --git a/src/components/organisms/FridgeBoard.tsx b/src/components/organisms/FridgeBoard.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { Container } from '@/components/atoms';
+import { Container, Lottie } from '@/components/atoms';
 import { EmptyBox, FridgeTab, IngredientItemBox } from '@/components/molecules';
 import { IngredientModal } from '.';
 import {
@@ -11,7 +11,6 @@ import {
 } from '@chakra-ui/react';
 import { useGetFridgeContentById } from '@/hooks/queries/fridge';
 import { useObserver } from '@/hooks/useObserver';
-import { SuspenseFallback } from '../templates';
 import { useRouter } from 'next/router';
 
 const FridgeBoard: React.FC = () => {
@@ -109,11 +108,7 @@ const FridgeBoard: React.FC = () => {
               </div>
             ),
           )}
-          {isFetchingIngredientNextPage ? (
-            <SuspenseFallback />
-          ) : (
-            <div ref={bottom} />
-          )}
+          {isFetchingIngredientNextPage ? <Lottie /> : <div ref={bottom} />}
         </div>
       </Container>
     </>