From 2a8358d0e6002a37066c9f0e867f6bf702d369e3 Mon Sep 17 00:00:00 2001
From: dawn <90008@gaze.systems>
Date: Sun, 31 May 2026 13:49:57 +0300
Subject: [PATCH] fix repo metrics skeleton blocks causing layout shift, and
 add blocks to represent the numeric metrics

---
 src/components/repo.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/repo.tsx b/src/components/repo.tsx
index 585e14f..2d85ded 100644
--- a/src/components/repo.tsx
+++ b/src/components/repo.tsx
@@ -1189,15 +1189,15 @@ export const RepoStatsList: Component<RepoStatsListProps> = (props) => {
 		<Show
 			when={!isMetricsLoading()}
 			fallback={
-				<div class="text-gray-400 text-sm font-mono inline-flex gap-4 mt-auto">
+				<div class="text-gray-400 text-sm font-mono inline-flex items-center gap-3 mt-auto h-5">
 					<SkeletonBlock class="h-4 w-16" />
-					<SkeletonBlock class="h-4 w-12" />
-					<SkeletonBlock class="h-4 w-12" />
-					<SkeletonBlock class="h-4 w-12" />
+					<SkeletonBlock class="h-4 w-4" />
+					<SkeletonBlock class="h-4 w-8" />
+					<SkeletonBlock class="h-4 w-6" />
 				</div>
 			}
 		>
-			<div class="text-gray-400 text-sm font-mono inline-flex flex-wrap gap-4 mt-auto">
+			<div class="text-gray-400 text-sm font-mono inline-flex flex-wrap gap-3 mt-auto">
 				<Show when={resolvedLanguage()}>
 					<div class="flex gap-2 items-center text-sm">
 						<span
@@ -1303,9 +1303,11 @@ export const RepoCardSkeleton: Component<{ compact?: boolean; noBorder?: boolean
 				<SkeletonBlock class="h-4 w-2/3" />
 			</div>
 
-			<div class="flex items-center gap-4 mt-3">
-				<SkeletonBlock class="h-4 w-12" />
-				<SkeletonBlock class="h-4 w-12" />
+			<div class="flex items-center gap-3 mt-auto h-5">
+				<SkeletonBlock class="h-4 w-16" />
+				<SkeletonBlock class="h-4 w-4" />
+				<SkeletonBlock class="h-4 w-8" />
+				<SkeletonBlock class="h-4 w-6" />
 			</div>
 		</div>
 	);
-- 
2.51.2