apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-29 02:46:25 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(ui): show skeleton instead of fake star count while loading (#918)

Browse source 
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
This commit is contained in:
Tyson Cung 2026-03-25 14:43:11 +00:00
parent a474c4651c
commit b17ce0e64f
1 changed files with 11 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

17
surfsense_web/components/homepage/github-stars-badge.tsx
View file

@ -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>
);
}