From b17ce0e64f10f9a6dddb06512ec2bb2da6a5df43 Mon Sep 17 00:00:00 2001
From: Tyson Cung <tysoncung@example.com>
Date: Wed, 25 Mar 2026 14:43:11 +0000
Subject: [PATCH] fix(ui): show skeleton instead of fake star count while
 loading (#918)

Replace the misleading 10000 placeholder with a Skeleton component
during the loading state of the GitHub stars badge. This prevents
users from thinking 10000 is the actual star count before real data
loads.

Closes #918
---
 .../components/homepage/github-stars-badge.tsx  | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/surfsense_web/components/homepage/github-stars-badge.tsx b/surfsense_web/components/homepage/github-stars-badge.tsx
index e11d6ff2d..feee8ee33 100644
--- a/surfsense_web/components/homepage/github-stars-badge.tsx
+++ b/surfsense_web/components/homepage/github-stars-badge.tsx
@@ -4,6 +4,7 @@ import { IconBrandGithub } from "@tabler/icons-react";
 import { motion, useMotionValue, useSpring } from "motion/react";
 import * as React from "react";
 import { cn } from "@/lib/utils";
+import { Skeleton } from "@/components/ui/skeleton";
 
 // ---------------------------------------------------------------------------
 // Per-digit scrolling wheel
@@ -277,12 +278,16 @@ function NavbarGitHubStars({
 			)}
 		>
 			<IconBrandGithub className="h-5 w-5 text-neutral-700 dark:text-neutral-300 shrink-0" />
-			<AnimatedStarCount
-				value={isLoading ? 10000 : stars}
-				itemSize={ITEM_SIZE}
-				isRolling={isLoading}
-				className="text-sm font-semibold tabular-nums text-neutral-700 dark:text-neutral-300 group-hover:text-neutral-900 dark:group-hover:text-neutral-100 transition-colors"
-			/>
+			{isLoading ? (
+				<Skeleton className="h-4 w-10" />
+			) : (
+				<AnimatedStarCount
+					value={stars}
+					itemSize={ITEM_SIZE}
+					isRolling={false}
+					className="text-sm font-semibold tabular-nums text-neutral-700 dark:text-neutral-300 group-hover:text-neutral-900 dark:group-hover:text-neutral-100 transition-colors"
+				/>
+			)}
 		</a>
 	);
 }