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 -->
This commit is contained in:
Joshen Lim authored and GitHub committed 2026-05-18 10:30:00 +07:00
1 parent 598d664213
commit 179f00cceb
1 file changed
+15 -11
@@ -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>