chore: Loading skeleton added on explore page

app/explore/[slug]/layout.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import Toolbar from "@/components/filters/toolbar";
+import { container } from "@/components/primitives";
+import { FiltersProvider } from "@/contexts/filters";
+import { decodingSlug } from "@/utils/url";
+
+export default function ExploreLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { slug: string };
+}) {
+  const filters = decodingSlug(params.slug);
+  return (
+    <FiltersProvider initialFilters={filters}>
+      <div className="flex flex-col">
+        <Toolbar />
+        <section className={container()}>{children}</section>
+      </div>
+    </FiltersProvider>
+  );
+}

app/explore/[slug]/loading.tsx

@@ -0,0 +1,5 @@
+import TableSkeleton from "@/components/table/skeleton";
+
+export default function ExploreLoading() {
+  return <TableSkeleton />;
+}

app/explore/[slug]/page.tsx

@@ -1,13 +1,13 @@
+import ContributionsTable from "@/components/table/table";
+import { DEFAULT_PAGE_SIZE } from "@/data/fetch";
+import { queryDatabase } from "@/lib/notion";
 import { PaginatedCustomDataResponse } from "@/types";
 import { Contribution } from "@/types/contribution";
 import {
   processNotionFilters,
   transformNotionDataToContributions,
 } from "@/utils/notion";
 import { decodingSlug } from "@/utils/url";
-import { queryDatabase } from "@/lib/notion";
-import ControlledTable from "@/components/controlled-table";
-import { DEFAULT_PAGE_SIZE } from "@/data/fetch";
 
 export default async function ExplorePage({
   params,
@@ -27,10 +27,12 @@ export default async function ExplorePage({
     nextCursor: data.next_cursor ?? undefined,
   };
   return (
-    <ControlledTable
+    <ContributionsTable
       items={items}
-      filters={filters}
-      queryFilter={queryFilter}
+      queries={{
+        page_size: DEFAULT_PAGE_SIZE,
+        filter: queryFilter,
+      }}
     />
   );
 }

components/table/skeleton.tsx

@@ -0,0 +1,53 @@
+"use client";
+import React from "react";
+import { Skeleton } from "@nextui-org/skeleton";
+import {
+  Table as NuiTable,
+  TableHeader,
+  TableBody,
+  TableColumn,
+  TableRow,
+  TableCell,
+} from "@nextui-org/table";
+
+export const TableSkeleton = () => {
+  const placeholderItems = Array.from({ length: 25 }, (_, index) => ({
+    id: index + 1,
+  }));
+
+  return (
+    <>
+      <NuiTable
+        layout="fixed"
+        hideHeader
+        fullWidth
+        aria-label="Table skeleton"
+        classNames={{
+          table:
+            "w-full bg-gradient-to-r from-background to-background-200 to-80% max-w-7xl border-spacing-0 rounded-b-md overflow-hidden",
+          wrapper:
+            "bg-background overflow-visible p-0 rounded-none border-small rounded-b-md",
+          tr: "relative bg-red border-y-small border-y-overlay before:content-[''] before:absolute before:bg-hover-overlay before:opacity-0 before:w-full before:h-full before:transition-opacity before:duration-300 before:ease-in-out sm:before:max-h-[88px] md:before:max-h-[62px] hover:before:opacity-100",
+          td: "px-2 sm:px-inherit",
+        }}
+      >
+        <TableHeader>
+          <TableColumn>Skeleton</TableColumn>
+        </TableHeader>
+        <TableBody items={placeholderItems}>
+          {(item) => (
+            <TableRow key={item.id}>
+              <TableCell className="w-full">
+                <Skeleton className="w-full rounded-lg">
+                  <div className="h-12 w-full rounded-lg bg-default-200"></div>
+                </Skeleton>
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </NuiTable>
+    </>
+  );
+};
+
+export default TableSkeleton;

components/table/table.tsx

@@ -35,6 +35,7 @@ export const Table = ({ items, queries = {} }: ITableProps) => {
     { name: "CONTENT", uid: "content" },
     { name: "LABELS", uid: "labels" },
     { name: "DATE", uid: "date" },
+    { name: "ACTIONS", uid: "actions" },
   ]);
 
   const {