updated build add update delete

frontend/pages/people/update/page.tsx

@@ -7,6 +7,7 @@ import { useSearchParams, useRouter } from 'next/navigation'
 import { Button } from '@/components/ui/button';
 
 const PageUpdatePeople = () => {
+
     const [page, setPage] = useState(1);
     const [limit, setLimit] = useState(10);
     const [sort, setSort] = useState({ createdAt: 'desc' });
@@ -14,20 +15,14 @@ const PageUpdatePeople = () => {
     const searchParams = useSearchParams()
     const router = useRouter()
     const uuid = searchParams?.get('uuid') || null
-    const backToPeople = <>
-        <div>UUID not found in search params</div>
-        <Button onClick={() => router.push('/people')}>Back to People</Button>
-    </>
+    const backToPeople = <><div>UUID not found in search params</div><Button onClick={() => router.push('/people')}>Back to People</Button></>
     if (!uuid) { return backToPeople }
-    const { data, isLoading, error, refetch } = useGraphQlPeopleList({ limit, skip: (page - 1) * limit, sort, filters: { ...filters, uuid } });
+    const { data, isFetching, isLoading, error, refetch } = useGraphQlPeopleList({ limit, skip: (page - 1) * limit, sort, filters: { ...filters, uuid } });
     const initData = data?.data?.[0] || null;
     if (!initData) { return backToPeople }
     return (
         <>
-            <PeopleDataTableUpdate
-                data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit}
-                onPageChange={setPage} onPageSizeChange={setLimit} refetchTable={refetch}
-            />
+            <PeopleDataTableUpdate data={data?.data || []} totalCount={data?.totalCount || 0} currentPage={page} pageSize={limit} onPageChange={setPage} onPageSizeChange={setLimit} refetchTable={refetch} tableIsLoading={isLoading || isFetching} />
             <PeopleForm refetchTable={refetch} initData={initData} selectedUuid={uuid} />
         </>
     )

frontend/pages/people/update/table/data-table.tsx

@@ -71,6 +71,7 @@ import { getColumns, DraggableRow } from "./columns"
 import { useRouter } from "next/navigation"
 import { Home } from "lucide-react"
 import { useDeletePersonMutation } from "@/pages/people/queries"
+import { TableSkeleton } from "@/components/skeletons/tableSkeleton"
 
 export function PeopleDataTableUpdate({
     data,
@@ -80,6 +81,7 @@ export function PeopleDataTableUpdate({
     onPageChange,
     onPageSizeChange,
     refetchTable,
+    tableIsLoading
 }: {
     data: schemaType[],
     totalCount: number,
@@ -87,7 +89,8 @@ export function PeopleDataTableUpdate({
     pageSize: number,
     onPageChange: (page: number) => void,
     onPageSizeChange: (size: number) => void,
-    refetchTable: () => void
+    refetchTable: () => void,
+    tableIsLoading: boolean
 }) {
 
     const router = useRouter();
@@ -194,11 +197,9 @@ export function PeopleDataTableUpdate({
                                 ))}
                             </TableHeader>
                             <TableBody className="**:data-[slot=table-cell]:first:w-8">
-                                {table.getRowModel().rows?.length ? (<SortableContext items={dataIds} strategy={verticalListSortingStrategy} >
-                                    {table.getRowModel().rows.map((row) => <DraggableRow key={row.id} row={row} />)}
-                                </SortableContext>) : (
-                                    <TableRow><TableCell colSpan={columns.length} className="h-24 text-center">No results.</TableCell></TableRow>
-                                )}
+                                {tableIsLoading ?
+                                    <TableSkeleton columnCount={table.getAllColumns().length} rowCount={pageSize} hasActions={true} /> :
+                                    <SortableContext items={dataIds} strategy={verticalListSortingStrategy}>{table.getRowModel().rows.map(row => <DraggableRow key={row.id} row={row} />)}</SortableContext>}
                             </TableBody>
                         </Table>
                     </DndContext>