From cb1bc7511c2fc7a0a54b72eeeeb2d48a6aad5769 Mon Sep 17 00:00:00 2001
From: Aleksander Grygier <aleksander.grygier@gmail.com>
Date: Tue, 1 Sep 2026 12:05:56 +0200
Subject: [PATCH] feat: skeleton loading states for model list and details

Replaces the 'Loading model...' text with a static skeleton mirroring
the detail layout (header, metadata chips, download options box, readme
lines). List item skeletons now vary widths per row so the loading list
does not render as identical blocks.

Assisted-by: pi:GLM-5.3-Flash
---
 .../models/discover/ModelsDiscoverList.svelte |  2 +-
 .../ModelsDiscoverListItemSkeleton.svelte     | 31 ++++--
 .../ModelsDiscoverModelDetails.svelte         |  5 +-
 .../ModelsDiscoverModelDetailsSkeleton.svelte | 97 +++++++++++++++++++
 .../components/app/models/discover/index.ts   |  8 ++
 5 files changed, 132 insertions(+), 11 deletions(-)
 create mode 100644 tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsSkeleton.svelte

diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList.svelte
index 705d79accd..8463af8abc 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverList.svelte
@@ -28,7 +28,7 @@
 <ul class="space-y-0.5 p-2">
 	{#if loading}
 		{#each Array(loadingCount) as _, index (index)}
-			<ModelsDiscoverListItemSkeleton />
+			<ModelsDiscoverListItemSkeleton {index} />
 		{/each}
 	{:else}
 		{#each models as model (model.id)}
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverListItemSkeleton.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverListItemSkeleton.svelte
index 7ce013fcb4..851abc5238 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverListItemSkeleton.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverListItemSkeleton.svelte
@@ -1,21 +1,38 @@
 <script lang="ts">
 	import { Skeleton } from '$lib/components/ui/skeleton';
+
+	interface Props {
+		/** Row index; varies skeleton widths so the list does not look mechanical. */
+		index?: number;
+	}
+
+	let { index = 0 }: Props = $props();
+
+	// Deterministic width variations keyed by row position.
+	const NAME_WIDTHS = ['w-40', 'w-52', 'w-44', 'w-56'];
+	const BADGE_WIDTHS = [
+		['w-12', 'w-14', 'w-10'],
+		['w-16', 'w-12', 'w-12'],
+		['w-10', 'w-16', 'w-10'],
+		['w-14', 'w-10', 'w-14']
+	];
+
+	let nameWidth = $derived(NAME_WIDTHS[index % NAME_WIDTHS.length]);
+	let badgeWidths = $derived(BADGE_WIDTHS[index % BADGE_WIDTHS.length]);
 </script>
 
 <!-- Static skeleton of ModelsDiscoverListItem: avatar, name and badge rows. -->
 <li>
 	<div class="flex w-full items-start gap-2.5 rounded-lg p-2.5 text-left">
-		<Skeleton class="h-9 w-9 rounded-md" />
+		<Skeleton class="h-9 w-9 shrink-0 rounded-md" />
 
 		<div class="min-w-0 flex-1 space-y-1.5">
-			<Skeleton class="h-4 w-48 max-w-full" />
+			<Skeleton class="{nameWidth} h-4 max-w-full" />
 
 			<div class="flex items-center gap-1">
-				<Skeleton class="h-3.5 w-12 rounded" />
-
-				<Skeleton class="h-3.5 w-14 rounded" />
-
-				<Skeleton class="h-3.5 w-10 rounded" />
+				{#each badgeWidths as width, i (i)}
+					<Skeleton class="{width} h-3.5 rounded" />
+				{/each}
 			</div>
 		</div>
 	</div>
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetails.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetails.svelte
index 27834dc17d..9e60cff728 100644
--- a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetails.svelte
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetails.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import ModelsDiscoverModelDetailsDownloadOptions from './ModelsDiscoverModelDetailsDownloadOptions.svelte';
 	import ModelsDiscoverModelDetailsHeader from './ModelsDiscoverModelDetailsHeader.svelte';
+	import ModelsDiscoverModelDetailsSkeleton from './ModelsDiscoverModelDetailsSkeleton.svelte';
 	import ModelsDiscoverModelDetailsReadme from './ModelsDiscoverModelDetailsReadme.svelte';
 	import { isAuxSidecar } from '$lib/constants';
 	import { HuggingFaceService } from '$lib/services';
@@ -74,9 +75,7 @@
 </script>
 
 {#if loading}
-	<div class="flex h-full items-center justify-center py-20">
-		<p class="text-sm text-muted-foreground">Loading model...</p>
-	</div>
+	<ModelsDiscoverModelDetailsSkeleton />
 {:else if error}
 	<div class="flex h-full items-center justify-center py-20">
 		<p class="text-sm text-destructive">{error}</p>
diff --git a/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsSkeleton.svelte b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsSkeleton.svelte
new file mode 100644
index 0000000000..9204b60d9c
--- /dev/null
+++ b/tools/ui/src/lib/components/app/models/discover/ModelsDiscoverModelDetailsSkeleton.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { Skeleton } from '$lib/components/ui/skeleton';
+</script>
+
+<!-- Static skeleton of ModelsDiscoverModelDetails: header, metadata chips, download options and readme lines. -->
+<div class="space-y-6 p-6" data-slot="model-details-skeleton">
+	<!-- Header: avatar, name with capability icons, base model line, HF link -->
+	<div class="space-y-3">
+		<div class="flex items-start justify-between gap-3">
+			<div class="flex min-w-0 items-center gap-2">
+				<Skeleton class="h-12 w-12 rounded-md" />
+
+				<div class="min-w-0 space-y-1.5">
+					<Skeleton class="h-5 w-56 max-w-full" />
+
+					<Skeleton class="h-3 w-40 max-w-full" />
+				</div>
+			</div>
+
+			<Skeleton class="h-7.5 w-44 shrink-0 rounded-md" />
+		</div>
+
+		<!-- downloads / likes / last updated -->
+		<div class="flex items-center gap-4">
+			<Skeleton class="h-3.5 w-16" />
+
+			<Skeleton class="h-3.5 w-12" />
+
+			<Skeleton class="h-3.5 w-24" />
+		</div>
+
+		<!-- description + metadata chips -->
+		<div class="space-y-3">
+			<Skeleton class="h-4 w-full max-w-2xl" />
+
+			<Skeleton class="h-4 w-2/3 max-w-lg" />
+
+			<div class="flex flex-wrap items-center gap-1.5">
+				<Skeleton class="h-7 w-36 rounded-md" />
+
+				<Skeleton class="h-7 w-28 rounded-md" />
+
+				<Skeleton class="h-7 w-32 rounded-md" />
+
+				<Skeleton class="h-7 w-24 rounded-md" />
+			</div>
+		</div>
+	</div>
+
+	<!-- Download options: quant rows, CTA, terminal command -->
+	<div
+		class="rounded-3xl border border-border/30 bg-muted/40 p-4 shadow-xs dark:border-border/20 dark:bg-muted/50"
+	>
+		<div class="space-y-3 divide-y divide-border/50 dark:divide-border/35 pb-1">
+			{#each [0, 1, 2] as _, index (index)}
+				<div class="grid grid-cols-[5rem_1fr] items-start gap-3 py-3">
+					<div class="space-y-1.5 pt-1">
+						<Skeleton class="h-4 w-14" />
+
+						<Skeleton class="h-2.5 w-24" />
+					</div>
+
+					<div class="flex flex-wrap items-center justify-end gap-1.5">
+						<Skeleton class="h-6 w-28 rounded-md" />
+
+						<Skeleton class="h-6 w-20 rounded-md" />
+					</div>
+				</div>
+			{/each}
+		</div>
+
+		<div class="space-y-2.5 border-t border-border/50 pt-3.5 dark:border-border/35">
+			<Skeleton class="h-9 w-full rounded-md" />
+
+			<div class="flex items-center gap-3">
+				<span class="h-px flex-1 bg-border/50"></span>
+
+				<Skeleton class="h-3 w-44" />
+
+				<span class="h-px flex-1 bg-border/50"></span>
+			</div>
+
+			<Skeleton class="h-11 w-full rounded-md" />
+		</div>
+	</div>
+
+	<!-- Readme -->
+	<div class="space-y-2.5">
+		<Skeleton class="h-3.5 w-full" />
+
+		<Skeleton class="h-3.5 w-full" />
+
+		<Skeleton class="h-3.5 w-5/6" />
+
+		<Skeleton class="h-3.5 w-2/3" />
+	</div>
+</div>
diff --git a/tools/ui/src/lib/components/app/models/discover/index.ts b/tools/ui/src/lib/components/app/models/discover/index.ts
index 99f639019e..6c5876b422 100644
--- a/tools/ui/src/lib/components/app/models/discover/index.ts
+++ b/tools/ui/src/lib/components/app/models/discover/index.ts
@@ -109,6 +109,14 @@ export { default as ModelsDiscoverModelDetailsDownloadOptionsDownloadButton } fr
  */
 export { default as ModelsDiscoverModelDetailsDownloadOptionsDownloadCommand } from './ModelsDiscoverModelDetailsDownloadOptionsDownloadCommand.svelte';
 
+/**
+ * **ModelsDiscoverDetailsSkeleton** - Detail view loading skeleton
+ *
+ * Static placeholder matching the detail layout: header with avatar and name,
+ * metadata chips, the download options box and readme text lines.
+ */
+export { default as ModelsDiscoverModelDetailsSkeleton } from './ModelsDiscoverModelDetailsSkeleton.svelte';
+
 /**
  * **ModelsDiscoverChatTemplateDialog** - Chat template viewer
  *