✨ 메인페이지 로딩 스피너 적용

DreamIn-Developer · Aug 21, 2022 · 1aa4fc5 · 1aa4fc5
1 parent 0293d06
commit 1aa4fc5
Showing 1 changed file with 11 additions and 8 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -8,6 +8,7 @@ import postsApi from 'apis/posts.api';
 import { MainPostType } from 'types/post';
 import { useQuery } from 'react-query';
 import { isLoggedIn } from 'utils/isLoggedIn';
+import LoadingSpinner from 'components/common/LoadingSpinner';
 
 const PostCards = () => {
   const getPosts = async () => {
@@ -34,14 +35,16 @@ const PostCards = () => {
       </MainHeader>
       <FlexCenter>
         <MainContent>
-          {isLoading || !data.userPost?.concat(data.teamPost).length
-            ? 'Loading..'
-            : data.userPost
-                .concat(data.teamPost)
-                .sort(() => Math.random() - 0.5)
-                .map((post) => {
-                  return <MainCard post={post} key={post.team ? `team${post.id}` : `user${post.id}`} />;
-                })}
+          {isLoading || !data.userPost?.concat(data.teamPost).length ? (
+            <LoadingSpinner />
+          ) : (
+            data.userPost
+              .concat(data.teamPost)
+              .sort(() => Math.random() - 0.5)
+              .map((post) => {
+                return <MainCard post={post} key={post.team ? `team${post.id}` : `user${post.id}`} />;
+              })
+          )}
         </MainContent>
       </FlexCenter>
     </Layout>