feat: isLoading 문구 대신 Spinner 추가 (#126)

Dev-FE-1 · Sep 9, 2024 · a0f55ae · a0f55ae
1 parent 8edc98f
commit a0f55ae
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 21 deletions.
diff --git a/src/components/playlistDetail/PlaylistContentsItem.tsx b/src/components/playlistDetail/PlaylistContentsItem.tsx
@@ -9,6 +9,7 @@ import {
 } from 'react-icons/hi2';
 import { useNavigate, useParams } from 'react-router-dom';
 
+import Spinner from '@/components/common/loading/Spinner';
 import OptionModal from '@/components/common/modals/OptionModal';
 import VideoThumbnail from '@/components/playlist/VideoThumbnail';
 import { PATH } from '@/constants/path';
@@ -85,7 +86,11 @@ const PlaylistContentsItem: React.FC<PlaylistContentItemProps> = ({
   ];
 
   if (isLoading) {
-    return <li>Loading...</li>;
+    return (
+      <div css={spinnerContainerStyle}>
+        <Spinner />
+      </div>
+    );
   }
 
   if (isError || !videoData) {
@@ -236,4 +241,12 @@ const thumbnailStyle = css`
   }
 `;
 
+const spinnerContainerStyle = css`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 120px;
+`;
+
 export default PlaylistContentsItem;
diff --git a/src/pages/Playlist.tsx b/src/pages/Playlist.tsx
@@ -22,16 +22,8 @@ const PlaylistPage = () => {
   const [activeTab, setActiveTab] = useState(tabs[0].id);
   const navigate = useNavigate();
 
-  const {
-    data: myPlaylists,
-    isLoading: myPlaylistsLoading,
-    error: myPlaylistsError,
-  } = useUserPlaylists();
-  const {
-    data: subscribedPlaylists,
-    isLoading: subscribedPlaylistsLoading,
-    error: subscribedPlaylistsError,
-  } = useSubscribedPlaylists();
+  const { data: myPlaylists, error: myPlaylistsError } = useUserPlaylists();
+  const { data: subscribedPlaylists, error: subscribedPlaylistsError } = useSubscribedPlaylists();
 
   const addPlaylistMutation = useAddPlaylist();
 
@@ -43,10 +35,6 @@ const PlaylistPage = () => {
     addPlaylistMutation.mutate({ title, isPublic });
   };
 
-  if (myPlaylistsLoading || subscribedPlaylistsLoading) {
-    return <p>Loading...</p>;
-  }
-
   if (myPlaylistsError || subscribedPlaylistsError) {
     return <p>Error loading playlists</p>;
   }

diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
@@ -109,7 +109,11 @@ const ProfilePage: React.FC = () => {
   };
 
   if (!userData) {
-    return <div>Loading...</div>;
+    return (
+      <div>
+        <Spinner />
+      </div>
+    );
   }
 
   const isOwnProfile = currentUser?.uid === userId;
@@ -137,7 +141,7 @@ const ProfilePage: React.FC = () => {
             ) : (
               userPosts.map((post) => <Post key={post.postId} post={post} id={post.postId} />)
             )}
-            {userPosts.length === 0 && (
+            {!loadingPosts && userPosts.length === 0 && (
               <EmptyMessage Icon={HiOutlinePencil}>아직 포스트가 없습니다</EmptyMessage>
             )}
           </TabContent>
@@ -155,9 +159,11 @@ const ProfilePage: React.FC = () => {
             ) : (
               <Playlists playlists={playlists || []} onPlaylistClick={handlePlaylistClick} />
             )}
-            {(!playlists || playlists.filter((playlist) => playlist.isPublic).length === 0) && (
-              <EmptyMessage Icon={HiOutlinePlay}>아직 공개된 플리가 없습니다</EmptyMessage>
-            )}
+            {!playlistsLoading &&
+              (!playlists || playlists.filter((playlist) => playlist.isPublic).length === 0) &&
+              currentUser?.uid !== userId && (
+                <EmptyMessage Icon={HiOutlinePlay}>아직 공개된 플리가 없습니다</EmptyMessage>
+              )}
           </TabContent>
           <TabContent id="likes" activeTabId={activeTab}>
             {loadingLikedPosts ? (
@@ -169,7 +175,7 @@ const ProfilePage: React.FC = () => {
             ) : (
               likedPosts.map((post) => <Post key={post.postId} post={post} id={post.postId} />)
             )}
-            {likedPosts.length === 0 && (
+            {!loadingLikedPosts && likedPosts.length === 0 && (
               <EmptyMessage Icon={HiOutlineHeart}>아직 좋아요 한 포스트가 없습니다</EmptyMessage>
             )}
           </TabContent>