refactor: loading시 SuspenseFallback component -> Lottie로 수정 (#38)

DDD-Community · Mar 1, 2024 · 9c299fc · 9c299fc
1 parent 35f154e
commit 9c299fc
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/src/components/templates/FriendListTemplate.tsx b/src/components/templates/FriendListTemplate.tsx
@@ -2,11 +2,10 @@ import { Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@ch
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { type SortLabel } from '@/types/common';
-import { Button, RadioButtonField, SortButton } from '@/components/atoms';
+import { Button, Lottie, RadioButtonField, SortButton } from '@/components/atoms';
 import { FriendListItem } from '../organisms';
 import { useDeleteFriendship, useGetFriendships } from '@/hooks/queries/friendship';
 import type { FriendshipData, FriendshipSortType } from '@/types/friendship';
-import { SuspenseFallback } from '.';
 import { useObserver } from '@/hooks/useObserver';
 
 export const SORT_TYPES: SortLabel[] = [
@@ -72,7 +71,7 @@ const FriendListTemplate: React.FC<{ possibleDelete: boolean }> = ({ possibleDel
   }, [possibleDelete]);
 
   if (!friendsData?.pages[0].content) {
-    return <SuspenseFallback />;
+    return <Lottie />;
   }
 
   return (
@@ -99,7 +98,7 @@ const FriendListTemplate: React.FC<{ possibleDelete: boolean }> = ({ possibleDel
             />
           )),
         )}
-        {isFetchingfriendsNextPage ? <SuspenseFallback /> : <div ref={bottom} />}
+        {isFetchingfriendsNextPage ? <Lottie /> : <div ref={bottom} />}
       </div>
 
       {possibleDelete ? (

diff --git a/src/pages/mypage/share/index.tsx b/src/pages/mypage/share/index.tsx
@@ -1,5 +1,5 @@
 import { Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
-import { RadioButtonField, SortButton, TabButton } from '@/components/atoms';
+import { Lottie, RadioButtonField, SortButton, TabButton } from '@/components/atoms';
 import type { ShareStatusType } from '@/types/friendship';
 import type { SortLabel, TabLabel } from '@/types/common';
 import { useRef, useState } from 'react';
@@ -8,7 +8,6 @@ import Header from '@/components/organisms/Header';
 import type { NextPage } from 'next';
 import { type ShareData } from '@/types/share';
 import ShareListItem from '@/components/organisms/ShareListItem';
-import { SuspenseFallback } from '@/components/templates';
 import { useObserver } from '@/hooks/useObserver';
 import { useGetMyShares } from '@/hooks/queries/mypage';
 import type { MySharesSortType } from '@/types/mypage';
@@ -73,7 +72,7 @@ const MySharePage: NextPage = () => {
           {data?.pages.map((page) =>
             page.content.map((ele: ShareData) => <ShareListItem key={ele.shareId} data={ele} />),
           )}
-          {isFetchingNextPage ? <SuspenseFallback /> : <div ref={bottom} />}
+          {isFetchingNextPage ? <Lottie /> : <div ref={bottom} />}
         </div>
         <Modal onClose={onClose} isOpen={isOpen} motionPreset="slideInBottom" trapFocus={false}>
           <ModalOverlay height="100vh" onClick={onClose} />

diff --git a/src/pages/share/index.tsx b/src/pages/share/index.tsx
@@ -1,5 +1,5 @@
 import { Modal, ModalBody, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
-import { RadioButtonField, SortButton, TabButton } from '@/components/atoms';
+import { Lottie, RadioButtonField, SortButton, TabButton } from '@/components/atoms';
 import type { ShareSortType, ShareStatusType } from '@/types/friendship';
 import type { SortLabel, TabLabel } from '@/types/common';
 import { useRef, useState } from 'react';
@@ -10,7 +10,6 @@ import type { NextPage } from 'next';
 import { PlusIcon } from '@/assets/icons';
 import { type ShareData } from '@/types/share';
 import ShareListItem from '@/components/organisms/ShareListItem';
-import { SuspenseFallback } from '@/components/templates';
 import { useGetShares } from '@/hooks/queries/share';
 import { useObserver } from '@/hooks/useObserver';
 
@@ -46,6 +45,10 @@ const SharePage: NextPage = () => {
     onIntersect,
   });
 
+  if (!data?.pages[0].content) {
+    return <Lottie />;
+  }
+
   return (
     <>
       <div className={'pt-[52px] min-h-screen'}>
@@ -74,7 +77,7 @@ const SharePage: NextPage = () => {
           {data?.pages.map((page) =>
             page.content.map((ele: ShareData) => <ShareListItem key={ele.shareId} data={ele} />),
           )}
-          {isFetchingNextPage ? <SuspenseFallback /> : <div ref={bottom} />}
+          {isFetchingNextPage ? <Lottie /> : <div ref={bottom} />}
         </div>
 
         <div className="flex justify-end pr-[20px]">