mirror of
https://github.com/supabase/supabase.git
synced 2026-05-12 13:19:37 +08:00
89760b26e0
## Context Just refactors Database publications pages to use the `PageLayout` component, otherwise was missing a header currently Also fix search results empty state for publications pages ### Before <img width="1144" height="550" alt="image" src="https://github.com/user-attachments/assets/e178d31a-313e-48f3-a87c-bf26b13fef9e" /> ### After <img width="1145" height="396" alt="image" src="https://github.com/user-attachments/assets/82a29529-46d8-40eb-ad25-9b424995e89e" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a dedicated shimmering skeleton for publications table loading states * **Refactor** * Restructured Publications interface for unified table rendering * Unified loading, error, empty and "missing selection" states into the table * Moved empty-results to render inside the table * Removed the back-navigation button * Page layout and section structure refactored for clearer spacing and navigation * **Style** * Improved loading visuals with skeleton rows * Updated empty-results styling for a cleaner table appearance <!-- end of auto-generated comment: release notes by coderabbit.ai -->
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { Switch, TableCell, TableRow } from 'ui'
|
|
import { ShimmeringLoader } from 'ui-patterns/ShimmeringLoader'
|
|
|
|
export interface PublicationSkeletonProps {
|
|
index?: number
|
|
}
|
|
|
|
export const PublicationSkeleton = ({ index }: PublicationSkeletonProps) => {
|
|
return (
|
|
<TableRow>
|
|
<TableCell style={{ width: '35%' }}>
|
|
<ShimmeringLoader className="h-4 w-24 my-0.5 p-0" delayIndex={index} />
|
|
</TableCell>
|
|
<TableCell className="hidden lg:table-cell" style={{ width: '15%' }}>
|
|
<ShimmeringLoader className="h-4 w-14 my-0.5 p-0" delayIndex={index} />
|
|
</TableCell>
|
|
{Array.from({ length: 4 }).map((_, i) => (
|
|
<TableCell key={i}>
|
|
<Switch size="small" checked={false} disabled={true} />
|
|
</TableCell>
|
|
))}
|
|
<TableCell className="px-4 py-3 pr-2">
|
|
<div className="flex justify-end">
|
|
<ShimmeringLoader className="h-6 w-12 p-0" delayIndex={index} />
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
}
|
|
|
|
export const PublicationTablesSkeleton = ({ index }: PublicationSkeletonProps) => {
|
|
return (
|
|
<TableRow>
|
|
<TableCell style={{ width: '35%' }}>
|
|
<ShimmeringLoader className="h-4 w-24 my-0.5 p-0" delayIndex={index} />
|
|
</TableCell>
|
|
<TableCell className="hidden lg:table-cell" style={{ width: '15%' }}>
|
|
<ShimmeringLoader className="h-4 w-14 my-0.5 p-0" delayIndex={index} />
|
|
</TableCell>
|
|
<TableCell className="px-4 py-3 pr-2">
|
|
<div className="flex">
|
|
<ShimmeringLoader className="h-6 w-12 p-0" delayIndex={index} />
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
}
|