refactor: 내 인터뷰 이력 페이지 로딩 추가

Invincible-Backend-Study · Jul 4, 2024 · d25abe3 · d25abe3
1 parent cb659b0
commit d25abe3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/frontend/src/components/InterviewHistoryTable/InterviewHistoryTable.tsx b/frontend/src/components/InterviewHistoryTable/InterviewHistoryTable.tsx
@@ -4,7 +4,7 @@ import {
   Dropdown,
   DropdownItem,
   DropdownMenu,
-  DropdownTrigger,
+  DropdownTrigger, Spinner,
   Table,
   TableBody,
   TableCell,
@@ -40,7 +40,7 @@ const InterviewHistoryTable = () => {
 
 
   const [page, setPage] = useState(1);
-  const {data, totalPages, refetch} = useMyInterviewQuery(page);
+  const {data, totalPages, refetch, isLoading} = useMyInterviewQuery(page);
   const navigate = useNavigate();
 
 
@@ -117,6 +117,7 @@ const InterviewHistoryTable = () => {
     <Table
       isCompact
       removeWrapper
+
       classNames={tableClassNames}
       aria-label="Example table with custom cells, pagination and sorting"
       bottomContent={bottomContent}
@@ -136,7 +137,10 @@ const InterviewHistoryTable = () => {
           </TableColumn>
         )}
       </TableHeader>
-      <TableBody items={data === undefined ? [] : data} emptyContent={"참여한 면접 이력이 없습니다."}>
+      <TableBody
+        isLoading={isLoading}
+        loadingContent={<Spinner label="Loading..." />}
+        items={data === undefined ? [] : data} emptyContent={"참여한 면접 이력이 없습니다."}>
         {(row) => (
           <TableRow key={row.interviewId}>
             {(columnKey) => <TableCell>{renderCell(row, columnKey)}</TableCell>}

diff --git a/frontend/src/hooks/api/interview/useMyInterviewQuery.ts b/frontend/src/hooks/api/interview/useMyInterviewQuery.ts
@@ -7,7 +7,7 @@ const size = 10;
 
 export const useMyInterviewQuery = (page: number) => {
 
-  const {data, refetch} = useQuery({
+  const {data, refetch, isLoading} = useQuery({
     queryKey: ['my interview'],
     queryFn: () => myInterview({page: page - 1, size}),
     placeholderData: keepPreviousData,
@@ -18,6 +18,7 @@ export const useMyInterviewQuery = (page: number) => {
   return {
     totalPages: data?.totalPages,
     data: data?.content,
-    refetch
+    refetch,
+    isLoading
   }
 }