feat(base): show table skeleton instead of centered loader on load

apps/client/src/features/base/components/base-table.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo } from "react";
-import { Loader, Text, Stack } from "@mantine/core";
+import { Text, Stack } from "@mantine/core";
 import { useAtom } from "jotai";
 import { IconDatabase } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
@@ -20,6 +20,7 @@ import { useBaseTable } from "@/features/base/hooks/use-base-table";
 import { useRowSelection } from "@/features/base/hooks/use-row-selection";
 import { GridContainer } from "@/features/base/components/grid/grid-container";
 import { BaseToolbar } from "@/features/base/components/base-toolbar";
+import { BaseTableSkeleton } from "@/features/base/components/base-table-skeleton";
 import classes from "@/features/base/styles/grid.module.css";
 
 type BaseTableProps = {
@@ -155,11 +156,7 @@ export function BaseTable({ baseId }: BaseTableProps) {
   );
 
   if (baseLoading || rowsLoading) {
-    return (
+    return <BaseTableSkeleton />;
-      <div className={classes.loadingOverlay}>
-        <Loader size="md" />
-      </div>
-    );
   }
 
   if (baseError) {

apps/client/src/features/base/styles/grid.module.css

@@ -287,13 +287,6 @@
   gap: var(--mantine-spacing-xs);
 }
 
-.loadingOverlay {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--mantine-spacing-xl);
-}
-
 .primaryCell {
   font-weight: 500;
 }