gortium/openconcho
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show structured page placeholders while loading

Browse Source
This commit is contained in:
Offending Commit
2026-05-12 10:05:00 -05:00
parent 3d1bb4c93c
commit 3075e4a005
10 changed files with 432 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/web/src/components/peers/PeerList.tsx
View File

@@ -7,8 +7,8 @@ import type { components } from "@/api/schema.d.ts";
import { EmptyState } from "@/components/shared/EmptyState";
import { ErrorAlert } from "@/components/shared/ErrorAlert";
import { JsonViewer } from "@/components/shared/JsonViewer";
import { PageLoader } from "@/components/shared/LoadingSpinner";
import { Pagination } from "@/components/shared/Pagination";
import { Skeleton } from "@/components/shared/Skeleton";
import { SortControl, type SortDir } from "@/components/shared/SortControl";
import { MonoCaption, PageTitle } from "@/components/ui/typography";
import { useDemo } from "@/hooks/useDemo";
@@ -178,7 +178,7 @@ export function PeerList() {
)}
<ErrorAlert error={error instanceof Error ? error : null} />
{isLoading && <PageLoader />}
{isLoading && <PeerListSkeleton />}
{!isLoading && peers.length === 0 && (
<EmptyState
@@ -329,3 +329,40 @@ export function PeerList() {
</div>
);
}
function PeerListSkeleton() {
return (
<div aria-hidden="true">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
{Array.from({ length: 6 }).map((_, index) => (
<div
key={index}
className="rounded-xl px-5 py-4"
style={{
background: COLOR.cardBaseBg,
border: `1px solid ${COLOR.cardBaseBorder}`,
}}
>
<div className="flex items-center justify-between">
<Skeleton accent className="h-4 w-40 rounded" />
<Skeleton className="h-4 w-4 rounded" />
</div>
<div className="mt-3 flex items-center gap-2 flex-wrap">
<Skeleton className="h-5 w-14 rounded-full" />
<Skeleton className="h-5 w-12 rounded-full" />
</div>
<div className="mt-3 flex items-center gap-2">
<Skeleton className="h-3 w-3 rounded-full" />
<Skeleton className="h-3 w-28 rounded" />
</div>
</div>
))}
</div>
<div className="mt-4 flex items-center justify-between">
<Skeleton className="h-8 w-20 rounded-lg" />
<Skeleton className="h-4 w-16 rounded" />
<Skeleton className="h-8 w-20 rounded-lg" />
</div>
</div>
);
}