feat: use suspence to show loading

gsainfoteam · Nov 16, 2023 · 5faad28 · 5faad28
1 parent 44e297a
commit 5faad28
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 48 deletions.
diff --git a/src/app/[lng]/search/Result.tsx b/src/app/[lng]/search/Result.tsx
@@ -0,0 +1,59 @@
+import { getAllNotices } from '@/api/notice/notice';
+import ResultZabo from '@/app/components/templates/ResultZabo/ResultZabo';
+import { createTranslation } from '@/app/i18next';
+import { Locale } from '@/app/i18next/settings';
+
+import SearchNoResult from './assets/searchNoResult.svg';
+
+const Result = async ({
+  lng,
+  ...props
+}: {
+  lng: Locale;
+  search: string;
+  tags: string[];
+  offset: number;
+  limit: number;
+}) => {
+  const { t } = await createTranslation(lng, 'translation');
+  const data = await getAllNotices(props);
+  return (
+    <>
+      {data?.list.length !== 0 && (
+        <div className="gap-[10px] flex flex-col flex-nowrap">
+          <p className="text-lg md:text-4xl font-bold">
+            {t('searchPage.title')}
+          </p>
+
+          <div className="h-8" />
+
+          {data.list.map((notice) => (
+            <ResultZabo
+              {...notice}
+              searchQuery={props.search}
+              logName="SearchPage"
+              key={notice.id}
+            />
+          ))}
+        </div>
+      )}
+
+      {props.search && data.list.length === 0 && (
+        <div className="flex justify-center w-full">
+          <div className="flex justify-center flex-col align-center">
+            <div className="h-[100px]" />
+            <div style={{ height: '10px', margin: '0 auto' }}></div>
+
+            <SearchNoResult />
+
+            <p className="text-center text-secondaryText font-bold font-lg md:font-2xl pt-5">
+              {t('searchPage.noResult')}
+            </p>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Result;
diff --git a/src/app/[lng]/search/page.tsx b/src/app/[lng]/search/page.tsx
@@ -1,10 +1,11 @@
-import { getAllNotices } from '@/api/notice/notice';
+import { Suspense } from 'react';
+
 import LoadingCatAnimation from '@/app/components/templates/LoadingCatAnimation';
 import SearchAnimation from '@/app/components/templates/SearchAnimation';
 import { createTranslation } from '@/app/i18next';
 import { Locale } from '@/app/i18next/settings';
 
-import SearchNoResult from './assets/searchNoResult.svg';
+import Result from './Result';
 import SearchBar from './SearchBar';
 import SearchTagSelect from './SearchTagSelect';
 
@@ -21,12 +22,6 @@ const SearchPage = async ({
   const tags = rawTags?.split(',').filter(Boolean) ?? [];
 
   const { t } = await createTranslation(lng, 'translation');
-  const data = await getAllNotices({
-    search,
-    tags,
-    offset: 0,
-    limit: ITEMS_PER_CALL,
-  });
 
   return (
     <div className="content mx-auto">
@@ -37,27 +32,20 @@ const SearchPage = async ({
             <SearchTagSelect />
           </div>
         </div>
-        {data?.list.length !== 0 && (
-          <div className="gap-[10px] flex flex-col flex-nowrap">
-            <p className="text-lg md:text-4xl font-bold">
-              {t('searchPage.title')}
-            </p>
-
-            <div className="h-8" />
-
-            {/* {data.list.map((notice) => (
-              <ResultZabo
-                {...notice}
-                searchQuery={search}
-                logName="SearchPage"
-                t={t}
-                key={notice.id}
-              />
-            ))} */}
-          </div>
-        )}
-        {/* 검색어를 입력하지 않았을 때만 */}
-        {!search && (
+        {search ? (
+          <Suspense
+            key={[search, tags.join(',')].join(',')}
+            fallback={<LoadingCatAnimation />}
+          >
+            <Result
+              lng={lng}
+              search={search}
+              limit={ITEMS_PER_CALL}
+              offset={0}
+              tags={tags}
+            />
+          </Suspense>
+        ) : (
           <div className="flex justify-center w-full">
             <div className="flex flex-col items-center">
               <SearchAnimation />
@@ -68,23 +56,6 @@ const SearchPage = async ({
             </div>
           </div>
         )}
-        {/* 검색어를 입력했을 때 로딩 */}
-        {search && <LoadingCatAnimation />}
-
-        {search && data.list.length === 0 && (
-          <div className="flex justify-center w-full">
-            <div className="flex justify-center flex-col align-center">
-              <div className="h-[100px]" />
-              <div style={{ height: '10px', margin: '0 auto' }}></div>
-
-              <SearchNoResult />
-
-              <p className="text-center text-secondaryText font-bold font-lg md:font-2xl pt-5">
-                {t('searchPage.noResult')}
-              </p>
-            </div>
-          </div>
-        )}
       </div>
     </div>
   );

diff --git a/src/app/components/templates/ResultZabo/ResultZabo.tsx b/src/app/components/templates/ResultZabo/ResultZabo.tsx
@@ -1,13 +1,13 @@
+'use client';
+
 import { Notice } from '@/api/notice/notice';
-import { T } from '@/app/i18next';
 
 import ResultImageZabo from './ResultImageZabo';
 import ResultTextZabo from './ResultTextZabo';
 
 export type ResultZaboProps = Notice & {
   searchQuery: string;
   logName?: string;
-  t: T;
 };
 
 export type ResultImageZaboProps = ResultZaboProps & {