[UI] SQL Editor - Worksheets / Queries skeletons + useSyncSqlEditorSelectedTree

ui/package.json

@@ -72,11 +72,11 @@
     "react-resizable-panels": "^3.0.2",
     "recharts": "^2.15.3",
     "sonner": "^2.0.5",
-    "sql-formatter": "^15.6.3",
+    "sql-formatter": "^15.6.4",
     "tailwind-merge": "^3.3.0",
     "tw-animate-css": "^1.3.4",
     "use-local-storage": "^3.0.0",
-    "zod": "^3.25.56",
+    "zod": "^3.25.57",
     "zustand": "^5.0.5"
   },
   "devDependencies": {
@@ -88,9 +88,9 @@
     "@tanstack/router-devtools": "1.120.20",
     "@tanstack/router-plugin": "1.120.20",
     "@types/node": "22.15.30",
-    "@types/react": "^19.1.6",
+    "@types/react": "^19.1.7",
     "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react": "^4.5.1",
+    "@vitejs/plugin-react": "^4.5.2",
     "eslint": "9.28.0",
     "eslint-plugin-check-file": "^3.3.0",
     "eslint-plugin-n": "^17.19.0",
@@ -107,7 +107,7 @@
     "simple-git-hooks": "^2.13.0",
     "tailwindcss": "^4.1.8",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.33.1",
+    "typescript-eslint": "^8.34.0",
     "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4"
   },

ui/src/components/ui/sidebar.tsx

@@ -669,7 +669,6 @@ function SidebarMenuSubButton({
         size === 'sm' && 'text-xs',
         size === 'md' && 'text-sm',
         'group-data-[collapsible=icon]:hidden',
-        disabled && 'pointer-events-none opacity-50',
         className,
       )}
       {...props}

ui/src/modules/columns/columns-page-preview-data-tooblar.tsx

@@ -23,7 +23,9 @@ export function ColumnsPagePreviewDataToolbar({ previewData }: ColumnsPagePrevie
 
   return (
     <div className="flex items-center justify-between gap-4 p-4">
-      <p className="text-muted-foreground text-sm text-nowrap">{previewData.length} rows found</p>
+      <p className="text-muted-foreground text-sm text-nowrap">
+        {previewData[0]?.rows.length ?? 0} rows found
+      </p>
       <div className="justify flex items-center justify-between gap-2">
         <InputRoot className="w-full">
           <InputIcon>

ui/src/modules/shared/data-page/data-page-trees.tsx

@@ -58,7 +58,7 @@ export function DataPageTrees() {
               schemas={database.schemas}
               defaultOpen={(schema) =>
                 schema.name === schemaName ||
-                schema.tables.some((table) => table.name === tableName)
+                [...schema.tables, ...schema.views].some((table) => table.name === tableName)
               }
               isActive={(schema) => schema.name === schemaName}
               onClick={handleSchemaClick}

ui/src/modules/shared/trees/trees-items.tsx

@@ -143,8 +143,8 @@ interface TreesDatabasesProps extends TreeItemProps<NavigationTreeDatabase> {
 }
 
 export function TreesDatabases({
-  isFetchingDatabases,
   databases,
+  isFetchingDatabases,
   isActive,
   defaultOpen,
   onClick,
@@ -156,10 +156,11 @@ export function TreesDatabases({
   const [createVolumeDialogOpened, setCreateVolumeDialogOpened] = useState(false);
   const [createDatabaseDialogOpened, setCreateDatabaseDialogOpened] = useState(false);
 
-  if (isFetchingDatabases || isFetchingVolumes) {
-    return null;
+  if (isFetchingVolumes || isFetchingDatabases) {
+    return <TreesSkeleton />;
   }
 
+  // TODO: Not the best place to put empty states for volumes
   if (!volumes?.length) {
     return (
       <>

ui/src/modules/sql-editor/sql-editor-left-panel/sql-editor-left-panel-table-columns/sql-editor-left-bottom-panel.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 
+import { useGetNavigationTrees } from '@/orval/navigation-trees';
 import { useGetTableColumns, useGetTablePreviewData } from '@/orval/tables';
 
 import { useSqlEditorSettingsStore } from '../../sql-editor-settings-store';
@@ -11,11 +12,25 @@ export function SqlEditorLeftBottomPanel() {
   const selectedTree = useSqlEditorSettingsStore((state) => state.selectedTree);
   const [open, setOpen] = useState(false);
 
+  const { isFetching: isFetchingNavigationTrees } = useGetNavigationTrees();
+
+  const isEnabled =
+    !isFetchingNavigationTrees &&
+    !!selectedTree?.databaseName &&
+    !!selectedTree.schemaName &&
+    !!selectedTree.tableName;
+
   const { data: { items: previewData } = {}, isFetching: isPreviewDataFetching } =
     useGetTablePreviewData(
       selectedTree?.databaseName ?? '',
       selectedTree?.schemaName ?? '',
       selectedTree?.tableName ?? '',
+      undefined,
+      {
+        query: {
+          enabled: isEnabled,
+        },
+      },
     );
 
   const { data: { items: columns } = {} } = useGetTableColumns(
@@ -24,8 +39,7 @@ export function SqlEditorLeftBottomPanel() {
     selectedTree?.tableName ?? '',
     {
       query: {
-        enabled:
-          !!selectedTree?.databaseName && !!selectedTree.schemaName && !!selectedTree.tableName,
+        enabled: isEnabled,
       },
     },
   );

ui/src/modules/sql-editor/sql-editor-left-panel/sql-editor-left-panel-trees/sql-editor-left-panel-trees.tsx

@@ -39,16 +39,19 @@ export function SqlEditorLeftPanelTrees() {
           isFetchingDatabases={isFetchingNavigationTrees}
           defaultOpen={(db) =>
             db.schemas.some((schema) =>
-              schema.tables.some((table) => table.name === selectedTree?.tableName),
+              [...schema.tables, ...schema.views].some(
+                (table) => table.name === selectedTree?.tableName,
+              ),
             ) && db.name === selectedTree?.databaseName
           }
         >
           {(database) => (
             <TreesSchemas
               schemas={database.schemas}
               defaultOpen={(schema) =>
-                schema.tables.some((table) => table.name === selectedTree?.tableName) &&
-                schema.name === selectedTree?.schemaName
+                [...schema.tables, ...schema.views].some(
+                  (table) => table.name === selectedTree?.tableName,
+                ) && schema.name === selectedTree?.schemaName
               }
             >
               {(schema) => (

ui/src/modules/sql-editor/sql-editor-left-panel/sql-editor-left-panel-worksheets/sql-editor-left-panel-worksheets-skeleton.tsx

@@ -0,0 +1,26 @@
+import { SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { Skeleton } from '@/components/ui/skeleton';
+
+const WORKSHEETS = 7;
+
+const SkeletonRow = () => {
+  return (
+    <div className="flex w-full items-center gap-2">
+      <Skeleton className="h-5 w-full" />
+    </div>
+  );
+};
+
+export const SqlEditorLeftPanelWorksheetsSkeleton = () => {
+  return (
+    <>
+      {Array.from({ length: WORKSHEETS }).map((_, index) => (
+        <SidebarMenuItem key={index}>
+          <SidebarMenuButton disabled>
+            <SkeletonRow />
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </>
+  );
+};

ui/src/modules/sql-editor/sql-editor-left-panel/sql-editor-left-panel-worksheets/sql-editor-left-panel-worksheets.tsx

@@ -3,6 +3,7 @@ import { SidebarMenu } from '@/components/ui/sidebar';
 import type { Worksheet } from '@/orval/models';
 
 import { SqlEditorLeftPanelWorksheet } from './sql-editor-left-panel-worksheet';
+import { SqlEditorLeftPanelWorksheetsSkeleton } from './sql-editor-left-panel-worksheets-skeleton';
 
 interface WorksheetsProps {
   worksheets: Worksheet[];
@@ -16,14 +17,22 @@ function Worksheets({ worksheets }: WorksheetsProps) {
 
 interface SqlEditorLeftPanelWorksheetsProps {
   worksheets: Worksheet[];
+  isFetchingWorksheets: boolean;
 }
 
-export function SqlEditorLeftPanelWorksheets({ worksheets }: SqlEditorLeftPanelWorksheetsProps) {
+export function SqlEditorLeftPanelWorksheets({
+  worksheets,
+  isFetchingWorksheets,
+}: SqlEditorLeftPanelWorksheetsProps) {
   return (
     // TODO: Hardcode
     <ScrollArea className="h-[calc(100%-56px-2px)] py-2">
       <SidebarMenu className="flex w-full flex-col px-2">
-        <Worksheets worksheets={worksheets} />
+        {isFetchingWorksheets ? (
+          <SqlEditorLeftPanelWorksheetsSkeleton />
+        ) : (
+          <Worksheets worksheets={worksheets} />
+        )}
       </SidebarMenu>
       <ScrollBar orientation="vertical" />
     </ScrollArea>

ui/src/modules/sql-editor/sql-editor-left-panel/sql-editor-left-panel.tsx

@@ -12,7 +12,6 @@ import { useSqlEditorPanelsState } from '../sql-editor-panels-state-provider';
 import { SqlEditorResizableHandle, SqlEditorResizablePanel } from '../sql-editor-resizable';
 import type { LeftPanelTab } from '../sql-editor-settings-store';
 import { useSqlEditorSettingsStore } from '../sql-editor-settings-store';
-import { useSyncSqlEditorTabs } from '../use-sync-sql-editor-tabs';
 import { SqlEditorLeftBottomPanel } from './sql-editor-left-panel-table-columns/sql-editor-left-bottom-panel';
 import { SqlEditorLeftPanelTrees } from './sql-editor-left-panel-trees/sql-editor-left-panel-trees';
 import { SqlEditorLeftPanelWorksheetsToolbar } from './sql-editor-left-panel-worksheets-toolbar';
@@ -33,8 +32,6 @@ export const SqlEditorLeftPanel = () => {
 
   const { leftBottomRef, setLeftBottomPanelExpanded } = useSqlEditorPanelsState();
 
-  useSyncSqlEditorTabs();
-
   return (
     <>
       <Tabs
@@ -84,7 +81,10 @@ export const SqlEditorLeftPanel = () => {
                   isFetchingWorksheets={isFetchingWorksheets}
                   onRefetchWorksheets={refetchWorksheets}
                 />
-                <SqlEditorLeftPanelWorksheets worksheets={worksheets ?? []} />
+                <SqlEditorLeftPanelWorksheets
+                  isFetchingWorksheets={isFetchingWorksheets}
+                  worksheets={worksheets ?? []}
+                />
               </TabsContent>
             </SidebarGroupContent>
           </SidebarGroup>

ui/src/modules/sql-editor/sql-editor-page.tsx

@@ -5,11 +5,16 @@ import { SqlEditorLeftPanel } from './sql-editor-left-panel/sql-editor-left-pane
 import { useSqlEditorPanelsState } from './sql-editor-panels-state-provider';
 import { SqlEditorResizableHandle, SqlEditorResizablePanel } from './sql-editor-resizable';
 import { SqlEditorRightPanel } from './sql-editor-right-panel/sql-editor-right-panel';
+import { useSyncSqlEditorSelectedTree } from './use-sync-sql-editor-selected-tree';
+import { useSyncSqlEditorTabs } from './use-sync-sql-editor-tabs';
 
 export function SqlEditorPage() {
   const { leftRef, rightRef, setLeftPanelExpanded, setRightPanelExpanded } =
     useSqlEditorPanelsState();
 
+  useSyncSqlEditorTabs();
+  useSyncSqlEditorSelectedTree();
+
   return (
     <>
       <ResizablePanelGroup direction="horizontal">

ui/src/modules/sql-editor/sql-editor-right-panel/sql-editor-right-panel-queries-skeleton.tsx

@@ -0,0 +1,26 @@
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { Skeleton } from '@/components/ui/skeleton';
+
+const QUERIES = 10;
+
+const SkeletonRow = () => {
+  return (
+    <div className="flex w-full items-center gap-2">
+      <Skeleton className="h-5 w-full" />
+    </div>
+  );
+};
+
+export const SqlEditorRightPanelQueriesSkeleton = () => {
+  return (
+    <SidebarMenu>
+      {Array.from({ length: QUERIES }).map((_, index) => (
+        <SidebarMenuItem key={index}>
+          <SidebarMenuButton disabled>
+            <SkeletonRow />
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  );
+};

ui/src/modules/sql-editor/sql-editor-right-panel/sql-editor-right-panel.tsx

@@ -7,11 +7,12 @@ import { useGetQueries } from '@/orval/queries';
 
 import { useSqlEditorPanelsState } from '../sql-editor-panels-state-provider';
 import { SqlEditorRightPanelQueries } from './sql-editor-right-panel-queries';
+import { SqlEditorRightPanelQueriesSkeleton } from './sql-editor-right-panel-queries-skeleton';
 
 export const SqlEditorRightPanel = () => {
   const { toggleRightPanel } = useSqlEditorPanelsState();
   const { worksheetId } = useParams({ from: '/sql-editor/$worksheetId/' });
-  const { data: { items: queries } = {} } = useGetQueries(
+  const { data: { items: queries } = {}, isFetching: isFetchingQueries } = useGetQueries(
     { worksheetId: +worksheetId },
     { query: { enabled: worksheetId !== 'undefined' } },
   );
@@ -37,7 +38,11 @@ export const SqlEditorRightPanel = () => {
       </div>
       {/* TODO: Hardcode */}
       <ScrollArea className="h-[calc(100vh-136px)]">
-        <SqlEditorRightPanelQueries />
+        {isFetchingQueries ? (
+          <SqlEditorRightPanelQueriesSkeleton />
+        ) : (
+          <SqlEditorRightPanelQueries />
+        )}
         <ScrollBar orientation="vertical" />
       </ScrollArea>
     </>

ui/src/modules/sql-editor/use-sync-sql-editor-selected-tree.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from 'react';
+
+import { useGetNavigationTrees } from '@/orval/navigation-trees';
+
+import { useSqlEditorSettingsStore } from './sql-editor-settings-store';
+
+export const useSyncSqlEditorSelectedTree = () => {
+  const selectedTree = useSqlEditorSettingsStore((state) => state.selectedTree);
+  const setSelectedTree = useSqlEditorSettingsStore((state) => state.setSelectedTree);
+
+  const { data: { items: navigationTrees } = {}, isFetching: isFetchingNavigationTrees } =
+    useGetNavigationTrees();
+
+  const firstTime = useRef(true);
+
+  useEffect(() => {
+    if (isFetchingNavigationTrees || !navigationTrees?.length || !firstTime.current) {
+      return;
+    }
+
+    const navigationTreeDatabase = navigationTrees.find(
+      (database) => database.name === selectedTree?.databaseName,
+    );
+
+    const navigationTreeSchema = navigationTreeDatabase?.schemas.find(
+      (schema) => schema.name === selectedTree?.schemaName,
+    );
+
+    const tablesOrViews = [
+      ...(navigationTreeSchema?.tables ?? []),
+      ...(navigationTreeSchema?.views ?? []),
+    ];
+    const navigationTreeTable = tablesOrViews.find(
+      (table) => table.name === selectedTree?.tableName,
+    );
+
+    if (!navigationTreeTable) {
+      setSelectedTree({
+        databaseName: '',
+        schemaName: '',
+        tableName: '',
+      });
+      firstTime.current = false;
+    }
+  }, [navigationTrees, selectedTree, isFetchingNavigationTrees, setSelectedTree]);
+};