diff --git a/ui/src/routes/tables.lazy.tsx b/ui/src/routes/tables.lazy.tsx
index 05e4ebb..baa17d2 100644
--- a/ui/src/routes/tables.lazy.tsx
+++ b/ui/src/routes/tables.lazy.tsx
@@ -13,13 +13,14 @@ import { createFileRoute } from "@tanstack/react-router";
import { fetchTable, fetchTables, fetchTableData } from "@/api";
+import { Skeleton } from "@/components/ui/skeleton";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsList, TabsContent, TabsTrigger } from "@/components/ui/tabs";
export const Route = createFileRoute("/tables")({
component: Tables,
loader: () => fetchTables(),
- pendingComponent: () =>
Loading..
,
+ pendingComponent: TablesSkeleton,
});
function Tables() {
@@ -43,6 +44,10 @@ function Tables() {
);
}
+function TablesSkeleton() {
+ return ;
+}
+
type Props = {
name: string;
};
@@ -52,7 +57,7 @@ function Table({ name }: Props) {
queryFn: () => fetchTable(name),
});
- if (!data) return Loading...
;
+ if (!data) return ;
return (
@@ -126,6 +131,27 @@ function Table({ name }: Props) {
);
}
+function TableSkeleton() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
function isAtBottom({ currentTarget }: React.UIEvent
): boolean {
return (
currentTarget.scrollTop + 10 >=
@@ -136,7 +162,6 @@ function isAtBottom({ currentTarget }: React.UIEvent): boolean {
type TableDataProps = {
name: string;
};
-
function TableData({ name }: TableDataProps) {
const { isLoading, data, fetchNextPage, hasNextPage } = useInfiniteQuery({
queryKey: ["tables", "data", name],