remove: remove lecture search result spinner

Myongji-Graduate · May 15, 2024 · 1c91559 · 1c91559
1 parent 638ecf1
commit 1c91559
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 18 deletions.
diff --git a/app/ui/lecture/lecture-search/index.tsx b/app/ui/lecture/lecture-search/index.tsx
@@ -3,11 +3,11 @@ import { useAtomValue } from 'jotai';
 import LectureSearchBar from './lecture-search-bar';
 import { searchWordAtom } from '@/app/store/search-word';
 import { Suspense } from 'react';
-import { LectureSearchResultSpinner } from './lecture-search-result/lecture-search-result-spinner';
-import LectureSearchResult from './lecture-search-result';
 import Image from 'next/image';
 import searchResultIcon from '@/public/assets/searchResultIcon.svg';
 import List from '../../view/molecule/list';
+import LoadingSpinner from '../../view/atom/loading-spinner';
+import LectureSearchResult from './lecture-search-result';
 
 const emptyDataRender = () => {
   return (
@@ -30,7 +30,16 @@ export default function LectureSearch() {
       <div className="w-[800px] mx-auto my-7  flex flex-col gap-10 sm:gap-6">
         <LectureSearchBar />
         {searchable ? (
-          <Suspense fallback={<LectureSearchResultSpinner />}>
+          <Suspense
+            fallback={
+              <div className="rounded-xl border-[1px] border-gray-300 w-full h-72 overflow-auto flex justify-center items-center">
+                <LoadingSpinner
+                  className={'animate-spin shrink-0 h-12 w-12 mr-1.5 -ml-1 fill-gray-400'}
+                  style={{ transition: `width 150ms` }}
+                />
+              </div>
+            }
+          >
             <LectureSearchResult />
           </Suspense>
         ) : (

diff --git a/...re-search/lecture-search-result/index.tsx → .../lecture-search/lecture-search-result.tsx b/...re-search/lecture-search-result/index.tsx → .../lecture-search/lecture-search-result.tsx
@@ -3,10 +3,10 @@ import { useAtomValue } from 'jotai';
 import { searchWordAtom } from '@/app/store/search-word';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { fetchSearchLectures } from '@/app/business/lecture/search-lecture.query';
-import AddTakenLectureButton from '../../taken-lecture/add-taken-lecture-button';
 import List from '@/app/ui/view/molecule/list';
 import Grid from '@/app/ui/view/molecule/grid';
 import { QUERY_KEY } from '@/app/utils/query/react-query-key';
+import AddTakenLectureButton from '../taken-lecture/add-taken-lecture-button';
 
 export default function LectureSearchResult() {
   const searchWord = useAtomValue(searchWordAtom);

diff --git a/app/ui/lecture/lecture-search/lecture-search-result/lecture-search-result-spinner.tsx b/app/ui/lecture/lecture-search/lecture-search-result/lecture-search-result-spinner.tsx