feat: add loading page

dashboard/app/analytics/loading.tsx

@@ -0,0 +1,5 @@
+import { Loader } from "@/components/loader"
+
+export default function Loading() {
+  return <Loader />
+}

dashboard/app/apps/loading.tsx

@@ -0,0 +1,5 @@
+import { Loader } from "@/components/loader"
+
+export default function Loading() {
+  return <Loader />
+}

dashboard/app/profile/[id]/loading.tsx

@@ -0,0 +1,5 @@
+import { Loader } from "@/components/loader"
+
+export default function Loading() {
+  return <Loader />
+}

dashboard/app/profiles/loading.tsx

@@ -0,0 +1,5 @@
+import { Loader } from "@/components/loader"
+
+export default function Loading() {
+  return <Loader />
+}

dashboard/app/publication/[id]/loading.tsx

@@ -0,0 +1,5 @@
+import { Loader } from "@/components/loader"
+
+export default function Loading() {
+  return <Loader />
+}

dashboard/app/publications/loading.tsx

@@ -0,0 +1,5 @@
+import { Loader } from "@/components/loader"
+
+export default function Loading() {
+  return <Loader />
+}

dashboard/components/loader.tsx

@@ -0,0 +1,21 @@
+import { Loader2 } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+interface LoadingProps {
+  fixed?: boolean
+}
+
+export function Loader({ fixed = true }: LoadingProps) {
+  return (
+    <div
+      className={cn(
+        "bottom-0 left-0 right-0 top-0 z-50 flex items-center justify-center space-x-2 bg-opacity-50",
+        fixed ? "fixed" : "my-7"
+      )}
+    >
+      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+      Loading...
+    </div>
+  )
+}

dashboard/components/profiles-table.tsx

@@ -1,7 +1,10 @@
+import { Suspense } from "react"
+
 import { Profile } from "@/app/api/profiles/getProfiles"
 
 import { profileColumns } from "./data-table/columns"
 import { DataTable } from "./data-table/data-table"
+import { DataTableLoading } from "./data-table/data-table-loading"
 
 interface ProfilesTableProps {
   data: Profile[]
@@ -20,14 +23,16 @@ export default async function ProfilesTable({
 }: ProfilesTableProps) {
   return (
     <div className="my-3 flex-1 flex-col gap-3 md:flex">
-      <DataTable
-        columns={profileColumns}
-        data={data}
-        pageCount={pageCount}
-        totalCount={totalCount}
-        showToolbar={showToolbar}
-        showPagination={showPagination}
-      />
+      <Suspense fallback={<DataTableLoading columnCount={6} rowCount={10} />}>
+        <DataTable
+          columns={profileColumns}
+          data={data}
+          pageCount={pageCount}
+          totalCount={totalCount}
+          showToolbar={showToolbar}
+          showPagination={showPagination}
+        />
+      </Suspense>
     </div>
   )
 }

dashboard/components/publications-table.tsx

@@ -4,6 +4,7 @@ import { type Publication } from "@/app/api/publications/getPublications"
 
 import { publicationColumns } from "./data-table/columns"
 import { DataTable } from "./data-table/data-table"
+import { DataTableLoading } from "./data-table/data-table-loading"
 
 interface PublicationsTableProps {
   title: string
@@ -25,7 +26,7 @@ export default async function PublicationsTable({
   return (
     <div className="my-3 flex-1 flex-col gap-3 md:flex">
       <h2 className="p-3 text-3xl font-bold tracking-tight">{title}</h2>
-      <Suspense fallback={<div>Loading...</div>}>
+      <Suspense fallback={<DataTableLoading columnCount={6} rowCount={10} />}>
         <DataTable
           columns={publicationColumns}
           data={data}