Skip to content

Commit 179f00c

Browse files
authored
Fix duplicate empty state in unified logs (supabase#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 -->
1 parent 598d664 commit 179f00c

1 file changed

Lines changed: 15 additions & 11 deletions

File tree

apps/studio/components/ui/DataTable/DataTableInfinite.tsx

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,10 @@ export function DataTableInfinite<TData, TValue, TMeta>({
7373
<Table
7474
ref={tableRef}
7575
onScroll={onScroll}
76-
className={
77-
isLoading ? '[mask-image:linear-gradient(to_bottom,black_70%,transparent_100%)]' : ''
78-
}
76+
className={cn(
77+
!isLoading && rows.length === 0 && 'h-full',
78+
isLoading && '[mask-image:linear-gradient(to_bottom,black_70%,transparent_100%)]'
79+
)}
7980
>
8081
<TableHeader>
8182
<TableRow className="bg-surface-75">
@@ -146,8 +147,8 @@ export function DataTableInfinite<TData, TValue, TMeta>({
146147
</Fragment>
147148
) : (
148149
<Fragment>
149-
<TableRow>
150-
<TableCell colSpan={columns.length} className="h-[32vh] text-center">
150+
<TableRow className="hover:bg-transparent h-full">
151+
<TableCell colSpan={columns.length} className="text-center">
151152
<div className="flex flex-col items-center justify-center h-full gap-3">
152153
<p className="text-foreground-light text-sm">No results found</p>
153154
</div>
@@ -184,12 +185,15 @@ export function DataTableInfinite<TData, TValue, TMeta>({
184185
</p>
185186
</div>
186187
) : (
187-
<p className="text-xs text-foreground-lighter">
188-
No more data to load (
189-
<span className="font-mono font-medium">{formatCompactNumber(filterRows)}</span>{' '}
190-
of <span className="font-mono font-medium">{formatCompactNumber(totalRows)}</span>{' '}
191-
rows)
192-
</p>
188+
rows.length > 0 && (
189+
<p className="text-xs text-foreground-lighter">
190+
No more data to load (
191+
<span className="font-mono font-medium">{formatCompactNumber(filterRows)}</span>{' '}
192+
of{' '}
193+
<span className="font-mono font-medium">{formatCompactNumber(totalRows)}</span>{' '}
194+
rows)
195+
</p>
196+
)
193197
)}
194198
</TableCell>
195199
</TableRow>

0 commit comments

Comments
 (0)