From 179f00cceb7ad2c0438f75aa6e07becf2c366be9 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Mon, 18 May 2026 10:30:00 +0700
Subject: [PATCH] Fix duplicate empty state in unified logs (#45969)

## Before
<img width="2280" height="1564" alt="image"
src="https://github.com/user-attachments/assets/08d91834-a188-4b09-b266-d9d4b7c88959"
/>

## After
Also centralized the empty state
<img width="1448" height="960" alt="image"
src="https://github.com/user-attachments/assets/3ee1d386-b98e-49ee-b8ea-6a1c6b4359ab"
/>


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

## Summary by CodeRabbit

* **Bug Fixes**
  * Improved infinite scroll data table display when loading or empty
* "No more data to load" message now appears only when data exists,
reducing redundant messaging
* Refined table styling for better visual presentation during different
states

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45969)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../ui/DataTable/DataTableInfinite.tsx        | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/apps/studio/components/ui/DataTable/DataTableInfinite.tsx b/apps/studio/components/ui/DataTable/DataTableInfinite.tsx
index d67f89ddef2..be67cab38aa 100644
--- a/apps/studio/components/ui/DataTable/DataTableInfinite.tsx
+++ b/apps/studio/components/ui/DataTable/DataTableInfinite.tsx
@@ -73,9 +73,10 @@ export function DataTableInfinite<TData, TValue, TMeta>({
     <Table
       ref={tableRef}
       onScroll={onScroll}
-      className={
-        isLoading ? '[mask-image:linear-gradient(to_bottom,black_70%,transparent_100%)]' : ''
-      }
+      className={cn(
+        !isLoading && rows.length === 0 && 'h-full',
+        isLoading && '[mask-image:linear-gradient(to_bottom,black_70%,transparent_100%)]'
+      )}
     >
       <TableHeader>
         <TableRow className="bg-surface-75">
@@ -146,8 +147,8 @@ export function DataTableInfinite<TData, TValue, TMeta>({
           </Fragment>
         ) : (
           <Fragment>
-            <TableRow>
-              <TableCell colSpan={columns.length} className="h-[32vh] text-center">
+            <TableRow className="hover:bg-transparent h-full">
+              <TableCell colSpan={columns.length} className="text-center">
                 <div className="flex flex-col items-center justify-center h-full gap-3">
                   <p className="text-foreground-light text-sm">No results found</p>
                 </div>
@@ -184,12 +185,15 @@ export function DataTableInfinite<TData, TValue, TMeta>({
                   </p>
                 </div>
               ) : (
-                <p className="text-xs text-foreground-lighter">
-                  No more data to load (
-                  <span className="font-mono font-medium">{formatCompactNumber(filterRows)}</span>{' '}
-                  of <span className="font-mono font-medium">{formatCompactNumber(totalRows)}</span>{' '}
-                  rows)
-                </p>
+                rows.length > 0 && (
+                  <p className="text-xs text-foreground-lighter">
+                    No more data to load (
+                    <span className="font-mono font-medium">{formatCompactNumber(filterRows)}</span>{' '}
+                    of{' '}
+                    <span className="font-mono font-medium">{formatCompactNumber(totalRows)}</span>{' '}
+                    rows)
+                  </p>
+                )
               )}
             </TableCell>
           </TableRow>