@tulip-systems/core 0.5.16 → 0.6.1

package/src/modules/commands/menus/floating-menu.client.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useRef } from "react";
+import { cn } from "@/lib/utils/cn";
+import { RenderCommand } from "../components/render-command";
+import { CommandContextProvider } from "../hooks/context.client";
+import { type BulkCommandMenuProps, useBulkCommandMenu } from "../hooks/use-command-menu.client";
+
+type FloatingCommandMenuProps<TData, TMeta> = BulkCommandMenuProps<TData, TMeta> &
+  React.HTMLAttributes<HTMLElement> & {
+    state: "open" | "closed";
+  };
+
+export function FloatingCommandMenu<TData, TMeta>({
+  data,
+  commands,
+  meta,
+  state,
+  onSuccess,
+  className,
+  ...props
+}: FloatingCommandMenuProps<TData, TMeta>) {
+  const hasCommands = useRef(true);
+
+  const [validCommands, renderCommand] = useBulkCommandMenu({ data, commands, meta });
+
+  return (
+    <div
+      {...props}
+      data-state={state}
+      className={cn(
+        "bg-muted/80 fixed bottom-12 left-0 right-0 z-50 mx-auto flex w-fit items-center rounded-xl border px-3 py-2 shadow-xl backdrop-blur-2xl data-[state=open]:flex data-[state=closed]:hidden",
+        className,
+      )}
+    >
+      <CommandContextProvider value={{ menu: "table", onSuccess }}>
+        <div
+          className="flex gap-2"
+          ref={(ref) => {
+            if (ref?.childNodes.length === 0) hasCommands.current = false;
+          }}
+        >
+          {validCommands.map((command) => (
+            <RenderCommand key={command.name} command={command} render={renderCommand} />
+          ))}
+        </div>
+
+        {!hasCommands.current && (
+          <span className="text-sm font-medium">Geen acties beschikbaar</span>
+        )}
+      </CommandContextProvider>
+    </div>
+  );
+}

package/src/modules/commands/menus/inline-menu.client.tsx

@@ -1,11 +1,15 @@
 "use client";
 
+import type React from "react";
+import type { ComponentProps } from "react";
 import { Skeleton } from "@/components/entry";
 import { cn } from "@/lib/utils/cn";
-import React, { ComponentProps } from "react";
 import { RenderCommand } from "../components/render-command";
 import { CommandContextProvider } from "../hooks/context.client";
-import { SingleCommandMenuProps, useSingleCommandMenu } from "../hooks/use-command-menu.client";
+import {
+  type SingleCommandMenuProps,
+  useSingleCommandMenu,
+} from "../hooks/use-command-menu.client";
 
 export type InlineCommandMenuProps<TData, TMeta> = SingleCommandMenuProps<TData, TMeta> &
   React.HTMLAttributes<HTMLElement>;

package/src/modules/commands/menus/responsive-menu.client.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { SingleCommandMenuProps } from "../hooks/use-command-menu.client";
+import type { SingleCommandMenuProps } from "../hooks/use-command-menu.client";
 import { DropdownCommandMenu, DropdownCommandMenuLoading } from "./dropdown-menu.client";
 import { InlineCommandMenu, InlineCommandMenuLoading } from "./inline-menu.client";
 

package/src/modules/commands/utils/archive-command.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import type { DefaultError, MutationOptions } from "@tanstack/react-query";
 import { Icons } from "@/components/common/icons";
-import { DefaultError, MutationOptions } from "@tanstack/react-query";
 import { CommandClick } from "../components/click-command.client";
 import { CommandLabel } from "../components/command-trigger.client";
 

package/src/modules/commands/utils/delete-command.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import type { DefaultError, MutationOptions } from "@tanstack/react-query";
 import { Icons } from "@/components/common/icons";
-import { DefaultError, MutationOptions } from "@tanstack/react-query";
 import {
   CommandAlertDialog,
   CommandAlertDialogAction,

package/src/modules/config/db/helpers.ts

@@ -1,7 +1,7 @@
 import { timestamp, uuid } from "drizzle-orm/pg-core";
 import { v7 as uuidv7 } from "uuid";
 
-export const generateDefaultUUID = () => uuidv7(); 
+export const generateDefaultUUID = () => uuidv7();
 
 /**
  * Base columns4

package/src/modules/config/db/init.ts

@@ -1,8 +1,8 @@
 import "server-cli-only";
 
 import { drizzle } from "drizzle-orm/node-postgres";
-import { Pool } from "pg";
-import { TDatabaseSchema } from "./types";
+import type { Pool } from "pg";
+import type { TDatabaseSchema } from "./types";
 
 type InitDatabaseProps<TSchema extends TDatabaseSchema> = {
   schema: TSchema;

package/src/modules/config/lib/context.ts

@@ -1,8 +1,8 @@
-import { StorageClient } from "@/modules/storage/lib/create-client.server";
-import { AuthClient } from "../../auth/handler/init";
-import { DatabaseClient } from "../db/init";
-import { TDatabaseSchema } from "../entry";
-import { EmailClient } from "../providers/email";
+import type { StorageClient } from "@/modules/storage/lib/create-client.server";
+import type { AuthClient } from "../../auth/handler/init";
+import type { DatabaseClient } from "../db/init";
+import type { TDatabaseSchema } from "../entry";
+import type { EmailClient } from "../providers/email";
 
 export type TulipContext<TSchema extends TDatabaseSchema> = {
   db: DatabaseClient<TSchema>;

package/src/modules/config/paths/helpers.ts

@@ -1,4 +1,4 @@
-import { Paths } from "./types";
+import type { Paths } from "./types";
 
 /**
  * Create the paths object

package/src/modules/config/paths/types.ts

@@ -1,6 +1,6 @@
-import { type Permission } from "@/modules/auth/lib/permissions";
-import { LucideIcon } from "lucide-react";
-import { type Route } from "next";
+import type { LucideIcon } from "lucide-react";
+import type { Route } from "next";
+import type { Permission } from "@/modules/auth/lib/permissions";
 
 /**
  * Path types
@@ -30,7 +30,6 @@ export type PathSubItem = {
 
 export type Paths = PathGroup[];
 
-
 /**
  * <PathGroup>
  *  <PathGroupTitle>{name}</PathGroupTitle>
@@ -49,4 +48,4 @@ export type Paths = PathGroup[];
       </Path>
  *  </PathGroupItems>
  * </PathGroup>
- */
+ */

package/src/modules/data-tables/components/cell/common.client.tsx

@@ -1,6 +1,6 @@
+import type { ComponentProps } from "react";
 import { cn } from "@/lib/utils/cn";
 import { TableCell } from "@/modules/data-tables/components/table";
-import { ComponentProps } from "react";
 
 export function TableTextCell({ children, className, ...props }: ComponentProps<typeof TableCell>) {
   return (

package/src/modules/data-tables/components/column-header.tsx

@@ -1,3 +1,5 @@
+import type { Column } from "@tanstack/react-table";
+import { ChevronsUpDown, RotateCcwIcon, SortAsc, SortDesc } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -7,8 +9,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils/cn";
-import type { Column } from "@tanstack/react-table";
-import { ChevronsUpDown, RotateCcwIcon, SortAsc, SortDesc } from "lucide-react";
 
 interface TableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
   column: Column<TData, TValue>;

package/src/modules/data-tables/components/filters/combobox.client.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import { Check, type LucideIcon, PlusCircle } from "lucide-react";
+import { type ParserBuilder, useQueryState } from "nuqs";
+import { startTransition, useOptimistic } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -14,9 +17,6 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils/cn";
-import { Check, PlusCircle, type LucideIcon } from "lucide-react";
-import { ParserBuilder, useQueryState } from "nuqs";
-import { startTransition, useOptimistic } from "react";
 
 export type TableFilterComboboxOption = {
   label: string;

package/src/modules/data-tables/components/filters/slider.client.tsx

@@ -1,15 +1,15 @@
 "use client";
 
+import { PlusCircle } from "lucide-react";
+import { type ParserBuilder, useQueryState } from "nuqs";
+import { startTransition, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Separator } from "@/components/ui/separator";
 import { Slider } from "@/components/ui/slider";
-import { PlusCircle } from "lucide-react";
-import { ParserBuilder, useQueryState } from "nuqs";
-import { startTransition, useState } from "react";
-import { useDebouncedCallback } from "use-debounce";
 
 export type TableFilterSliderProps = {
   title?: string;
@@ -44,7 +44,7 @@ export function TableFilterSlider({
             <>
               <Separator orientation="vertical" className="mx-2 h-4" />
               <Badge variant="secondary" className="rounded-sm px-1 font-normal lg:hidden">
-                {selectedValues && selectedValues.length}
+                {selectedValues?.length}
               </Badge>
 
               <div className="hidden space-x-1 lg:flex">

package/src/modules/data-tables/components/footer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { Table } from "@tanstack/react-table";
-import { TableMeta } from "../lib/types";
+import type { Table } from "@tanstack/react-table";
+import type { TableMeta } from "../lib/types";
 import { InfinteTableBottombar, InfinteTableFooter } from "../strategies/infinite/components";
 import { PaginationTableFooter } from "../strategies/pagination/components";
 

package/src/modules/data-tables/components/header.tsx

@@ -1,8 +1,8 @@
+import { flexRender, type Header, type Table } from "@tanstack/react-table";
 import { cn } from "@/lib/utils/cn";
 import { Allowed } from "@/modules/auth/components/allowed.client";
 import { TableRow } from "@/modules/data-tables/components/table";
-import { flexRender, Header, Table } from "@tanstack/react-table";
-import { TableColumnDef } from "../lib/types";
+import type { TableColumnDef } from "../lib/types";
 
 /**
  * TableHeaderProps

package/src/modules/data-tables/components/layout.tsx

@@ -1,5 +1,5 @@
+import type { ComponentProps } from "react";
 import { cn } from "@/lib/utils/cn";
-import { ComponentProps } from "react";
 
 export function TableLayout({ className, children, ...props }: ComponentProps<"div">) {
   return (

package/src/modules/data-tables/components/skeleton.tsx

@@ -1,39 +1,32 @@
 import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableRow,
-} from "@/modules/data-tables/components/table";
+import { Table, TableBody, TableCell, TableRow } from "@/modules/data-tables/components/table";
 import { TableHead, TableHeader } from "./header";
 
 export function TableSkeleton() {
   return (
-    <>
-      <div className="rounded-md border">
-        <Table>
-          <TableHeader>
-            <TableRow className="bg-muted relative">
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          <TableRow className="bg-muted relative">
+            {Array.from({ length: 15 }).map((_, index) => (
+              <TableHead key={index}>
+                <Skeleton className="bg-background my-2 h-2 w-full rounded-full" />
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Array.from({ length: 15 }).map((_, index) => (
+            <TableRow key={index} className="relative">
               {Array.from({ length: 15 }).map((_, index) => (
-                <TableHead key={index}>
-                  <Skeleton className="bg-background my-2 h-2 w-full rounded-full" />
-                </TableHead>
+                <TableCell key={index}>
+                  <Skeleton className="my-2 h-2 w-full rounded-full" />
+                </TableCell>
               ))}
             </TableRow>
-          </TableHeader>
-          <TableBody>
-            {Array.from({ length: 15 }).map((_, index) => (
-              <TableRow key={index} className="relative">
-                {Array.from({ length: 15 }).map((_, index) => (
-                  <TableCell key={index}>
-                    <Skeleton className="my-2 h-2 w-full rounded-full" />
-                  </TableCell>
-                ))}
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-    </>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
   );
 }

package/src/modules/data-tables/components/table.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "@/lib/utils/cn";
 

package/src/modules/data-tables/components/toolbar.tsx

@@ -1,5 +1,5 @@
-import { cn } from "@/lib/utils/cn";
 import type { HTMLAttributes } from "react";
+import { cn } from "@/lib/utils/cn";
 
 type TableToolbarProps = HTMLAttributes<HTMLDivElement> & {
   children: React.ReactNode;

package/src/modules/data-tables/entry.client.ts

@@ -7,29 +7,25 @@ export * from "./components/cell/select.client";
 export * from "./components/filters/combobox.client";
 export * from "./components/filters/slider.client";
 export * from "./components/search-input.client";
-export * from "./tables/inline-table/components/cells/drag-handle.client";
-
 /**
  * Hooks
  */
 export * from "./hooks/use-context.client";
 export * from "./hooks/use-table.client";
-
 /**
- * Inline tables
+ * Strategies
  */
-export * from "./tables/inline-table/components/cells/common";
-export * from "./tables/inline-table/components/cells/read-only";
-export * from "./tables/inline-table/components/table";
-export * from "./tables/inline-table/hooks/context.client";
-
+export * from "./strategies/infinite/strategy";
+export * from "./strategies/pagination/strategy";
 /**
  * Data tables
  */
 export * from "./tables/data-table/components/table";
-
 /**
- * Strategies
+ * Inline tables
  */
-export * from "./strategies/infinite/strategy";
-export * from "./strategies/pagination/strategy";
+export * from "./tables/inline-table/components/cells/common";
+export * from "./tables/inline-table/components/cells/drag-handle.client";
+export * from "./tables/inline-table/components/cells/read-only";
+export * from "./tables/inline-table/components/table";
+export * from "./tables/inline-table/hooks/context.client";

package/src/modules/data-tables/hooks/use-context.client.tsx

@@ -1,17 +1,17 @@
 "use client";
 
-import { type CommandDef } from "@/modules/commands/lib/definitions";
-import { type TableOptions, type VisibilityState } from "@tanstack/react-table";
+import type { TableOptions, VisibilityState } from "@tanstack/react-table";
 import {
   createContext,
-  Dispatch,
-  PropsWithChildren,
-  SetStateAction,
+  type Dispatch,
+  type PropsWithChildren,
+  type SetStateAction,
   use,
   useEffect,
   useState,
 } from "react";
-import { TableFiltersResult } from "../lib/filters/config";
+import type { CommandDef } from "@/modules/commands/lib/definitions";
+import type { TableFiltersResult } from "../lib/filters/config";
 import type { Selection, TableColumnDef, TableMetaInput, TableStrategy } from "../lib/types";
 
 type useReactTableProps<TData extends { id: string }> = Omit<

package/src/modules/data-tables/hooks/use-selection.client.ts

@@ -2,7 +2,7 @@
 
 import type { RowSelectionState, Updater } from "@tanstack/react-table";
 import React from "react";
-import { Selection } from "../lib/types";
+import type { Selection } from "../lib/types";
 
 /**
  * Row selection props

package/src/modules/data-tables/hooks/use-table.client.ts

@@ -1,9 +1,9 @@
 "use client";
 
 import {
+  type ColumnFiltersState,
   getCoreRowModel,
   useReactTable,
-  type ColumnFiltersState,
   type VisibilityState,
 } from "@tanstack/react-table";
 import { useState } from "react";

package/src/modules/data-tables/lib/converters/cursor.ts

@@ -1,4 +1,4 @@
-import { TableQuerySchema } from "../validators";
+import type { TableQuerySchema } from "../validators";
 
 /**
  * Convert pagination to DB query

package/src/modules/data-tables/lib/converters/dto.ts

@@ -1,4 +1,4 @@
-import { TableQuerySchema } from "../validators";
+import type { TableQuerySchema } from "../validators";
 
 /**
  * Data table query response

package/src/modules/data-tables/lib/converters/search.ts

@@ -1,6 +1,6 @@
-import { type SQL, ilike, or, sql } from "drizzle-orm";
+import { ilike, or, type SQL, sql } from "drizzle-orm";
 import type { PgColumn } from "drizzle-orm/pg-core";
-import { TableQuerySchema } from "../validators";
+import type { TableQuerySchema } from "../validators";
 
 export type ConvertSearchToQueryParamsFields = PgColumn[];
 

package/src/modules/data-tables/lib/converters/sorting.ts

@@ -1,6 +1,6 @@
-import { asc, desc, type AnyColumn, type SQL, type ValueOrArray } from "drizzle-orm";
+import { type AnyColumn, asc, desc, type SQL, type ValueOrArray } from "drizzle-orm";
 import type { PgColumn, PgTable } from "drizzle-orm/pg-core";
-import { TableQuerySchema } from "../validators";
+import type { TableQuerySchema } from "../validators";
 
 export type ConvertSortToQueryParamsFallback = ValueOrArray<AnyColumn | SQL>;
 

package/src/modules/data-tables/lib/filters/config.ts

@@ -1,5 +1,5 @@
-import { ZodType } from "zod";
-import { ParseFilter } from "./parsers";
+import type { ZodType } from "zod";
+import type { ParseFilter } from "./parsers";
 
 export type TableFiltersDef = { readonly [k: string]: ParseFilter<ZodType> };
 export type TableFiltersResult = { readonly [k: string]: unknown };

package/src/modules/data-tables/lib/filters/helpers.ts

@@ -10,10 +10,10 @@ export function parseFiltersVisibility<TKey extends string>(
   visibilityState: Partial<Record<TKey, boolean>> | undefined,
 ): Record<TKey, boolean> {
   return config.reduce(
-    (acc, key) => ({
-      ...acc,
-      [key]: visibilityState?.[key] === undefined ? true : visibilityState[key],
-    }),
+    (acc, key) => {
+      acc[key] = visibilityState?.[key] === undefined ? true : (visibilityState[key] ?? false);
+      return acc;
+    },
     {} as Record<TKey, boolean>,
   );
 }

package/src/modules/data-tables/lib/filters/parsers.ts

@@ -1,4 +1,5 @@
-import z, { ZodEnum, ZodNullable, ZodType } from "zod";
+import type z from "zod";
+import type { ZodEnum, ZodNullable, ZodType } from "zod";
 
 export type ParseFilter<TSchema extends z.ZodType> = {
   schema: ZodNullable<TSchema>;
@@ -78,7 +79,6 @@ export const parseFilterDatetime = <TSchema extends ParseFilterDatetimeSchema>(
   encode: (decoded) => (decoded ? decoded.toISOString() : ""),
 });
 
-
 /**
  * Filter range value
  */

package/src/modules/data-tables/lib/filters/resolvers.ts

@@ -1,6 +1,6 @@
 import { createParser } from "nuqs/server";
 import z from "zod";
-import { TableFiltersDef } from "./config";
+import type { TableFiltersDef } from "./config";
 
 /**
  * Resolvers for nuqs search params
@@ -64,6 +64,6 @@ function typedEntries<T extends { [K in PropertyKey]: unknown }>(obj: T) {
 function typedFromEntries<K extends PropertyKey, V>(
   entries: Iterable<readonly [K, V]>,
 ): { [P in K]: V } {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // biome-ignore lint/suspicious/noExplicitAny: This is needed to satisfy the type system, as Object.fromEntries returns an object with string keys
   return Object.fromEntries(entries as any) as any;
 }

package/src/modules/data-tables/lib/helpers/create-column.ts

@@ -1,4 +1,4 @@
-import { TableColumnDef } from "../types";
+import type { TableColumnDef } from "../types";
 
 export function createTableCell(column: TableColumnDef<unknown>) {
   return <TData>(newColumn?: Partial<TableColumnDef<TData>>): TableColumnDef<TData> =>

package/src/modules/data-tables/lib/types.ts

@@ -1,13 +1,14 @@
-import { Permission } from "@/modules/auth/lib/permissions";
-import { CommandDef } from "@/modules/commands/lib/definitions";
-import type { RowSelectionState, Updater } from "@tanstack/react-table";
-import {
+import type {
   ColumnDef,
   PaginationState,
+  RowSelectionState,
   SortingState,
   TableMeta as TanStackTableMeta,
+  Updater,
 } from "@tanstack/react-table";
-import { UseQueryStatesKeysMap } from "nuqs";
+import type { UseQueryStatesKeysMap } from "nuqs";
+import type { Permission } from "@/modules/auth/lib/permissions";
+import type { CommandDef } from "@/modules/commands/lib/definitions";
 
 /**
  * Data table meta

package/src/modules/data-tables/server/get-data.server.ts

@@ -1,20 +1,20 @@
 import "server-only";
 
-import { type TDatabaseSchema } from "@/modules/config/db/types";
-import { TulipContext } from "@/modules/config/entry";
-import { and, getTableName, isTable, type DBQueryConfig, type SQL } from "drizzle-orm";
-import { type PgTable } from "drizzle-orm/pg-core";
+import { and, type DBQueryConfig, getTableName, isTable, type SQL } from "drizzle-orm";
+import type { PgTable } from "drizzle-orm/pg-core";
 import type { RelationalQueryBuilder } from "drizzle-orm/pg-core/query-builders/query";
+import type { TDatabaseSchema } from "@/modules/config/db/types";
+import type { TulipContext } from "@/modules/config/entry";
 import { convertCursorToQueryParams } from "../lib/converters/cursor";
 import {
-  ConvertSearchToQueryParamsFields,
+  type ConvertSearchToQueryParamsFields,
   convertSearchToQueryParams,
 } from "../lib/converters/search";
 import {
-  ConvertSortToQueryParamsFallback,
+  type ConvertSortToQueryParamsFallback,
   convertOrderByToQueryParams,
 } from "../lib/converters/sorting";
-import { TableQuerySchema } from "../lib/validators";
+import type { TableQuerySchema } from "../lib/validators";
 
 export type GetTableDataOptions<TTable extends PgTable> = DBQueryConfig<"many"> & {
   table: TTable;
@@ -57,7 +57,7 @@ export async function getTableData<TTable extends PgTable, TSchema extends TData
     const queryBuilderKey = tableName as keyof typeof tx.query;
 
     // Get the query builder
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // biome-ignore lint/suspicious/noExplicitAny: This is needed to satisfy the system
     const queryBuilder = tx.query[queryBuilderKey] as RelationalQueryBuilder<any, any>;
     if (!queryBuilder) throw new Error(`Query builder not found for table: ${tableName}`);
 

package/src/modules/data-tables/strategies/helpers/sorting.ts

@@ -1,5 +1,10 @@
 import type { SortingState, Updater } from "@tanstack/react-table";
-import { parseAsString, parseAsStringLiteral, SetValues } from "nuqs";
+import {
+  parseAsString,
+  parseAsStringLiteral,
+  type SetValues,
+  type UseQueryStatesKeysMap,
+} from "nuqs";
 import { z } from "zod";
 
 /**
@@ -34,8 +39,7 @@ export function convertSortingToTableState(sorting: Sorting): SortingState {
  * Handle sorting change
  */
 type HandleSortingChangeProps = {
-  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-  setQuery: SetValues<{}>;
+  setQuery: SetValues<UseQueryStatesKeysMap>;
   sortingState: SortingState;
   resetCursor: () => number | null;
 };

package/src/modules/data-tables/strategies/infinite/components.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { Skeleton } from "@/components/ui/skeleton";
-import { Table } from "@tanstack/react-table";
+import type { Table } from "@tanstack/react-table";
 import { useInView } from "motion/react";
 import { useEffect, useRef } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
 import { TableCell, TableRow } from "../../components/table";
-import { TableMeta } from "../../lib/types";
-import { InfiniteStrategyMeta } from "./strategy";
+import type { TableMeta } from "../../lib/types";
+import type { InfiniteStrategyMeta } from "./strategy";
 
 /**
  * Infinite table bottombar