feat: Add loading indicator (#116)

capstone-maru · May 30, 2024 · fc59b68 · fc59b68
1 parent 11488e9
commit fc59b68
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-loader-spinner": "^6.1.6",
     "react-redux": "^9.1.0",
     "recoil": "^0.7.7",
     "sass": "^1.71.1",

diff --git a/src/app/pages/shared-posts-page.tsx b/src/app/pages/shared-posts-page.tsx
@@ -23,6 +23,7 @@ import {
   usePaging,
   useSharedPosts,
 } from '@/features/shared';
+import { MagnifyingGlass } from 'react-loader-spinner';
 
 const styles = {
   container: styled.div`
@@ -124,6 +125,10 @@ const styles = {
     width: 100%;
     justify-content: center;
   `,
+  loadingIndicatorContainer: styled.div`
+    display: flex;
+    justify-content: center;
+  `,
 };
 
 export function SharedPostsPage() {
@@ -197,7 +202,18 @@ export function SharedPostsPage() {
   const renderPosts = useMemo(() => {
     if (isSharedPostsLoading || isDormitorySharedPostsLoading) {
       return (
-        <styles.noRecommendation>잠시만 기다려주세요..</styles.noRecommendation>
+        <styles.loadingIndicatorContainer>
+          <MagnifyingGlass
+            visible={true}
+            height="80"
+            width="80"
+            ariaLabel="magnifying-glass-loading"
+            wrapperStyle={{}}
+            wrapperClass="magnifying-glass-wrapper"
+            glassColor="#c0efff"
+            color="#e15b64"
+          />
+        </styles.loadingIndicatorContainer>
       );
     }
 
@@ -231,7 +247,18 @@ export function SharedPostsPage() {
   const renderMates = useMemo(() => {
     if (isMatesLoading) {
       return (
-        <styles.noRecommendation>잠시만 기다려주세요..</styles.noRecommendation>
+        <styles.loadingIndicatorContainer>
+          <MagnifyingGlass
+            visible={true}
+            height="80"
+            width="80"
+            ariaLabel="magnifying-glass-loading"
+            wrapperStyle={{}}
+            wrapperClass="magnifying-glass-wrapper"
+            glassColor="#c0efff"
+            color="#e15b64"
+          />
+        </styles.loadingIndicatorContainer>
       );
     }
 

diff --git a/yarn.lock b/yarn.lock
@@ -3927,6 +3927,19 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-is@^18.2.0:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+
+react-loader-spinner@^6.1.6:
+  version "6.1.6"
+  resolved "https://registry.yarnpkg.com/react-loader-spinner/-/react-loader-spinner-6.1.6.tgz#744d84a9763e963b565054f4f281dadfbd17e9e9"
+  integrity sha512-x5h1Jcit7Qn03MuKlrWcMG9o12cp9SNDVHVJTNRi9TgtGPKcjKiXkou4NRfLAtXaFB3+Z8yZsVzONmPzhv2ErA==
+  dependencies:
+    react-is "^18.2.0"
+    styled-components "^6.1.2"
+
 react-redux@^9.1.0:
   version "9.1.2"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-9.1.2.tgz#deba38c64c3403e9abd0c3fbeab69ffd9d8a7e4b"
@@ -4287,7 +4300,7 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-styled-components@^6.1.8:
+styled-components@^6.1.2, styled-components@^6.1.8:
   version "6.1.11"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.11.tgz#01948e5195bf1d39e57e0a85b41958c80e40cfb8"
   integrity sha512-Ui0jXPzbp1phYij90h12ksljKGqF8ncGx+pjrNPsSPhbUUjWT2tD1FwGo2LF6USCnbrsIhNngDfodhxbegfEOA==