fix: add more skeleton loading

kimthu09 · Jan 15, 2024 · dd24882 · dd24882
1 parent 85181e4
commit dd24882
Show file tree

Hide file tree

Showing 13 changed files with 385 additions and 11 deletions.
diff --git a/frontend/app/customer/page.tsx b/frontend/app/customer/page.tsx
@@ -6,6 +6,7 @@ import { withAuth } from "@/lib/role/withAuth";
 import TableLayout from "@/components/customer/table-layout";
 import CreateDialog from "@/components/customer/create";
 import { Button } from "@/components/ui/button";
+import TableSkeleton from "@/components/skeleton/table-skeleton";
 export const metadata: Metadata = {
   title: "Quản lý nhà cung cấp",
 };
@@ -28,7 +29,36 @@ function CustomerManage({
       </div>
 
       <div className="my-3 p-3 sha bg-white shadow-[0_1px_3px_0_rgba(0,0,0,0.2)]">
-        <Suspense fallback={<Loading />}>
+        <Suspense
+          fallback={
+            <TableSkeleton
+              isHasExtensionAction={false}
+              isHasFilter={true}
+              isHasSearch={true}
+              isHasChooseVisibleRow={true}
+              isHasCheckBox={false}
+              isHasPaging={true}
+              numberRow={5}
+              cells={[
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 2,
+                },
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 1,
+                },
+              ]}
+            />
+          }
+        >
           <TableLayout searchParams={searchParams} />
         </Suspense>
       </div>

diff --git a/frontend/app/invoice/page.tsx b/frontend/app/invoice/page.tsx
@@ -1,5 +1,6 @@
 import TableLayout from "@/components/invoice/table-layout";
 import Loading from "@/components/loading";
+import TableSkeleton from "@/components/skeleton/table-skeleton";
 import { withAuth } from "@/lib/role/withAuth";
 import { Metadata } from "next";
 import { Suspense } from "react";
@@ -19,7 +20,39 @@ const Invoice = ({
       </div>
 
       <div className="my-3 p-3 sha bg-white shadow-[0_1px_3px_0_rgba(0,0,0,0.2)]">
-        <Suspense fallback={<Loading />}>
+        <Suspense
+          fallback={
+            <TableSkeleton
+              isHasExtensionAction={false}
+              isHasFilter={true}
+              isHasSearch={true}
+              isHasChooseVisibleRow={true}
+              isHasCheckBox={false}
+              isHasPaging={true}
+              numberRow={5}
+              cells={[
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 2,
+                },
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 1,
+                },
+              ]}
+            />
+          }
+        >
           <TableLayout searchParams={searchParams} />
         </Suspense>
       </div>

diff --git a/frontend/app/product/books/[bookId]/page.tsx b/frontend/app/product/books/[bookId]/page.tsx
@@ -37,6 +37,7 @@ import updateBook from "@/lib/book/updateBook";
 import { BookTitle } from "@/types";
 import BookTitleSelectEdit from "@/components/book-manage/book-title-select-edit";
 import { useLoading } from "@/hooks/loading-context";
+import BookDetailSkeleton from "@/components/skeleton/book-detail-skeleton";
 
 const FormSchema = z.object({
   bookTitleId: z.string().min(1, "Vui lòng chọn một đầu sách"),
@@ -193,7 +194,7 @@ const EditBook = ({ params }: { params: { bookId: string } }) => {
 
   const { currentUser } = useCurrentUser();
   if (!currentUser || isLoading) {
-    return <Loading></Loading>;
+    return <BookDetailSkeleton/>;
   } else if (
     currentUser &&
     !includesRoles({

diff --git a/frontend/app/product/books/add/page.tsx b/frontend/app/product/books/add/page.tsx
@@ -31,6 +31,7 @@ import { useCurrentUser } from "@/hooks/use-user";
 import { includesRoles } from "@/lib/utils";
 import NoRole from "@/components/no-role";
 import { useLoading } from "@/hooks/loading-context";
+import BookAddSkeleton from "@/components/skeleton/book-add-skeleton";
 
 const FormSchema = z.object({
   bookTitleId: z.string().min(1, "Vui lòng chọn một đầu sách"),
@@ -182,7 +183,7 @@ const InsertNewBook = () => {
   };
   const { currentUser } = useCurrentUser();
   if (!currentUser) {
-    return <Loading />;
+    return <BookAddSkeleton />;
   } else if (
     currentUser &&
     !includesRoles({

diff --git a/frontend/app/product/books/page.tsx b/frontend/app/product/books/page.tsx
@@ -6,6 +6,7 @@ import React, { Suspense } from "react";
 import { Metadata } from "next";
 import { withAuth } from "@/lib/role/withAuth";
 import { FaPlus } from "react-icons/fa";
+import TableSkeleton from "@/components/skeleton/table-skeleton";
 export const metadata: Metadata = {
   title: "Sách",
 };
@@ -31,7 +32,42 @@ function BookManagement({
       </div>
       <div className="flex flex-row flex-wrap gap-2"></div>
       <div className="mb-4 p-3 sha bg-white shadow-[0_1px_3px_0_rgba(0,0,0,0.2)]">
-        <Suspense fallback={<Loading />}>
+        <Suspense
+          fallback={
+            <TableSkeleton
+              isHasExtensionAction={true}
+              isHasFilter={true}
+              isHasSearch={true}
+              isHasChooseVisibleRow={true}
+              isHasCheckBox={true}
+              isHasPaging={true}
+              numberRow={5}
+              cells={[
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 5,
+                },
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 1,
+                },
+              ]}
+            />
+          }
+        >
           <TableLayout searchParams={searchParams} />
         </Suspense>
       </div>

diff --git a/frontend/app/product/categories/table-layout.tsx b/frontend/app/product/categories/table-layout.tsx
@@ -2,6 +2,7 @@
 import { CategoryTable } from "@/components/book-manage/category-table";
 import CreateCategory from "@/components/book-manage/create-category";
 import Loading from "@/components/loading";
+import TableSkeleton from "@/components/skeleton/table-skeleton";
 import { Button } from "@/components/ui/button";
 import { toast } from "@/components/ui/use-toast";
 import { endPoint } from "@/constants";
@@ -81,7 +82,27 @@ const TableLayout = ({
       </div>
       <div className="flex flex-row flex-wrap gap-2"></div>
       <div className="mb-4 p-3 sha bg-white shadow-[0_1px_3px_0_rgba(0,0,0,0.2)]">
-        <Suspense fallback={<Loading />}>
+        <Suspense
+          fallback={
+            <TableSkeleton
+              isHasExtensionAction={false}
+              isHasFilter={false}
+              isHasSearch={true}
+              isHasChooseVisibleRow={false}
+              isHasCheckBox={false}
+              isHasPaging={true}
+              numberRow={5}
+              cells={[
+                {
+                  percent: 5,
+                },
+                {
+                  percent: 1,
+                },
+              ]}
+            />
+          }
+        >
           <CategoryTable
             searchParams={searchParams}
             currentUser={currentUser}

diff --git a/frontend/app/product/publishers/table-layout.tsx b/frontend/app/product/publishers/table-layout.tsx
@@ -3,6 +3,7 @@
 import CreatePublisher from "@/components/book-manage/create-publisher";
 import { PublisherTable } from "@/components/book-manage/publisher-table";
 import Loading from "@/components/loading";
+import TableSkeleton from "@/components/skeleton/table-skeleton";
 import { Button } from "@/components/ui/button";
 import { endPoint } from "@/constants";
 import { useCurrentUser } from "@/hooks/use-user";
@@ -45,7 +46,27 @@ const TableLayout = ({
       </div>
       <div className="flex flex-row flex-wrap gap-2"></div>
       <div className="mb-4 p-3 sha bg-white shadow-[0_1px_3px_0_rgba(0,0,0,0.2)]">
-        <Suspense fallback={<Loading />}>
+        <Suspense
+          fallback={
+            <TableSkeleton
+              isHasExtensionAction={false}
+              isHasFilter={false}
+              isHasSearch={true}
+              isHasChooseVisibleRow={false}
+              isHasCheckBox={false}
+              isHasPaging={true}
+              numberRow={5}
+              cells={[
+                {
+                  percent: 5,
+                },
+                {
+                  percent: 1,
+                },
+              ]}
+            />
+          }
+        >
           <PublisherTable
             searchParams={searchParams}
             currentUser={currentUser}

diff --git a/frontend/app/staff/page.tsx b/frontend/app/staff/page.tsx
@@ -1,4 +1,5 @@
 import Loading from "@/components/loading";
+import TableSkeleton from "@/components/skeleton/table-skeleton";
 import CreateStaffDialog from "@/components/staff/create-staff-dialog";
 import TableLayout from "@/components/staff/table-layout";
 import { withAuth } from "@/lib/role/withAuth";
@@ -20,7 +21,42 @@ const StaffManage = ({
         <CreateStaffDialog />
       </div>
       <div className="mb-4 p-3 sha bg-white shadow-[0_1px_3px_0_rgba(0,0,0,0.2)]">
-        <Suspense fallback={<Loading />}>
+        <Suspense
+          fallback={
+            <TableSkeleton
+              isHasExtensionAction={true}
+              isHasFilter={true}
+              isHasSearch={true}
+              isHasChooseVisibleRow={true}
+              isHasCheckBox={true}
+              isHasPaging={true}
+              numberRow={5}
+              cells={[
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 2,
+                },
+                {
+                  percent: 2,
+                },
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 2,
+                },
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 1,
+                },
+              ]}
+            />
+          }
+        >
           <TableLayout searchParams={searchParams} />
         </Suspense>
       </div>

diff --git a/frontend/app/supplier/page.tsx b/frontend/app/supplier/page.tsx
@@ -6,6 +6,7 @@ import { Suspense } from "react";
 import { Metadata } from "next";
 import { withAuth } from "@/lib/role/withAuth";
 import { includesRoles } from "@/lib/utils";
+import TableSkeleton from "@/components/skeleton/table-skeleton";
 export const metadata: Metadata = {
   title: "Quản lý nhà cung cấp",
 };
@@ -24,7 +25,36 @@ function SupplierManage({
       </div>
 
       <div className="my-3 p-3 sha bg-white shadow-[0_1px_3px_0_rgba(0,0,0,0.2)]">
-        <Suspense fallback={<Loading />}>
+        <Suspense
+          fallback={
+            <TableSkeleton
+              isHasExtensionAction={true}
+              isHasFilter={true}
+              isHasSearch={true}
+              isHasChooseVisibleRow={true}
+              isHasCheckBox={true}
+              isHasPaging={true}
+              numberRow={5}
+              cells={[
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 2,
+                },
+                {
+                  percent: 2,
+                },
+                {
+                  percent: 1,
+                },
+                {
+                  percent: 1,
+                },
+              ]}
+            />
+          }
+        >
           <TableLayout searchParams={searchParams} />
         </Suspense>
       </div>

diff --git a/frontend/components/book-manage/book-title-select-edit.tsx b/frontend/components/book-manage/book-title-select-edit.tsx
@@ -20,6 +20,7 @@ import { FaPlus } from "react-icons/fa";
 import CreateTitleDialog from "./create-title-dialog";
 import { useCurrentUser } from "@/hooks/use-user";
 import getAllTitleList from "@/lib/book/getAllTitleList";
+import ListSkeleton from "../skeleton/list_skeleton";
 export interface Props {
   handleTitleSet: (titleId: string) => void;
   titleId: string;
@@ -46,7 +47,7 @@ const BookTitleSelect = ({ handleTitleSet, titleId, readOnly }: Props) => {
   const { currentUser } = useCurrentUser();
   if (isError) return <div>Failed to load</div>;
   if (!titles || isLoading) {
-    <Loading />;
+    <ListSkeleton numberRow={5} />;
   } else
     return (
       <div className="flex flex-col gap-3">

diff --git a/frontend/components/book-manage/book-title-select.tsx b/frontend/components/book-manage/book-title-select.tsx
@@ -20,6 +20,7 @@ import { FaPlus } from "react-icons/fa";
 import CreateTitleDialog from "./create-title-dialog";
 import { useCurrentUser } from "@/hooks/use-user";
 import getAllTitleList from "@/lib/book/getAllTitleList";
+import ListSkeleton from "../skeleton/list_skeleton";
 
 const BookTitleSelect = ({ handleTitleSet }: TitleListProps) => {
   const [open, setOpen] = useState(false);
@@ -38,7 +39,7 @@ const BookTitleSelect = ({ handleTitleSet }: TitleListProps) => {
   const { currentUser } = useCurrentUser();
   if (isError) return <div>Failed to load</div>;
   if (!titles || isLoading) {
-    <Loading />;
+    <ListSkeleton numberRow={5} />;
   } else
     return (
       <div className="flex flex-col gap-3">