feat: table loading state

src/components/empty.tsx

@@ -0,0 +1,10 @@
+import * as React from "react"
+
+interface EmptyProps {
+  description?: React.ReactNode
+  icon?: React.ReactNode
+}
+
+export function Empty(props: EmptyProps) {
+  return <div>{props.description || "No results"}</div>
+}

src/components/loading.tsx

@@ -0,0 +1,12 @@
+import { Icons } from "./icons"
+
+export function Loading() {
+  return (
+    <div className="flex items-center justify-center text-sm text-muted-foreground">
+      <div className="flex items-center justify-center">
+        <Icons.spinner className="mr-2 size-4 animate-spin" />
+        <span>Loading...</span>
+      </div>
+    </div>
+  )
+}

src/hooks/query/use-user.ts

@@ -50,7 +50,7 @@ export function useUserLogoutMutation() {
 }
 
 export function useUsers(pagination: PaginationState) {
-  const { data } = useQuery({
+  const { data, isPending } = useQuery({
     queryKey: ["users", pagination.pageIndex, pagination.pageSize],
     queryFn: async () => apiFetch<{
       list: IUsers[]
@@ -67,6 +67,7 @@ export function useUsers(pagination: PaginationState) {
   })
 
   return {
+    isPending,
     data: {
       list: data?.list || [],
       total: data?.total || 0,

src/pages/(admin)/(with-layout)/list/basic-list.tsx

@@ -20,6 +20,8 @@ import {
 } from "@tanstack/react-table"
 import * as React from "react"
 
+import { Empty } from "@/components/empty"
+import { Loading } from "@/components/loading"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
 import { Checkbox } from "@/components/ui/checkbox"
@@ -195,7 +197,7 @@ export function Component() {
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({})
   const [rowSelection, setRowSelection] = React.useState({})
-  const { data: users } = useUsers(pagination)
+  const { data: users, isPending } = useUsers(pagination)
 
   const PAGINATION_STEP = 3 // You can easily change this value to adjust the pagination step
 
@@ -300,7 +302,9 @@ export function Component() {
                   colSpan={columns.length}
                   className="h-24 text-center"
                 >
-                  No results.
+                  {
+                    isPending ? <Loading /> : <Empty />
+                  }
                 </TableCell>
               </TableRow>
             )}

src/pages/(admin)/layout.tsx

@@ -46,7 +46,7 @@ export function Component() {
         </div>
 
         <ScrollArea className="flex h-[calc(100vh-3.5rem)] flex-col gap-4 p-2 pt-0 sm:h-[calc(100vh-4rem)] sm:p-4">
-          <div className="py-2 sm:py-4">
+          <div className="p-2 sm:py-4">
             <Outlet />
           </div>
           <ScrollBar orientation="horizontal" />