From ddc687bd64ada338bb43ef8d28524b5deddc1c83 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 9 Feb 2026 16:30:02 +0800
Subject: [PATCH] Fix missing loader in table grid editor while rows are
 loading (#42605)

## Context

Fix missing loader in table grid editor while the rows are loading - the
loading UI was rendering, but its width was 0 hence not showing up

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Improved grid layout styling to utilize full-width display
configuration.
* Enhanced loading skeleton container styling with better absolute
positioning and spacing.
* Refined empty state container layout for improved visual presentation.

* **Refactor**
  * Removed unused internal dependencies.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/studio/components/grid/SupabaseGrid.tsx         | 2 +-
 apps/studio/components/grid/components/grid/Grid.tsx | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/studio/components/grid/SupabaseGrid.tsx b/apps/studio/components/grid/SupabaseGrid.tsx
index 8a0ae8429f5..13f492af43c 100644
--- a/apps/studio/components/grid/SupabaseGrid.tsx
+++ b/apps/studio/components/grid/SupabaseGrid.tsx
@@ -1,5 +1,5 @@
 import { keepPreviousData, useQueryClient } from '@tanstack/react-query'
-import { useFlag, useParams } from 'common'
+import { useParams } from 'common'
 import { isMsSqlForeignTable } from 'data/table-editor/table-editor-types'
 import { useTableRowsQuery } from 'data/table-rows/table-rows-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
diff --git a/apps/studio/components/grid/components/grid/Grid.tsx b/apps/studio/components/grid/components/grid/Grid.tsx
index 4b7890caeae..54a9febe7cd 100644
--- a/apps/studio/components/grid/components/grid/Grid.tsx
+++ b/apps/studio/components/grid/components/grid/Grid.tsx
@@ -237,7 +237,7 @@ export const Grid = memo(
           {(rows ?? []).length === 0 && (
             <div
               className={cn(
-                'absolute inset-0 flex flex-col items-center justify-center p-2 z-[1]',
+                'absolute w-full inset-0 flex flex-col items-center justify-center p-2 z-[1]',
                 isTableEmpty && isDraggedOver && 'border-2 border-dashed',
                 isValidFileDraggedOver ? 'border-brand-600' : 'border-destructive-600'
               )}
@@ -245,7 +245,9 @@ export const Grid = memo(
               onDragLeave={onDragOver}
               onDrop={onFileDrop}
             >
-              {isLoading && !isDisabled && <GenericSkeletonLoader />}
+              {isLoading && !isDisabled && (
+                <GenericSkeletonLoader className="w-full top-9 absolute p-2" />
+              )}
 
               {isError && <GridError error={error} />}