senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui(components): add shimmer animation to Skeleton component

Browse source 
Replace static animate-pulse with a sweeping gradient shimmer overlay
for a premium loading experience (Spotify/Discord-like).

Skeleton: bg-kodo-steel/50 → bg-muted/50 (design system token), adds
a child div with .skeleton-shimmer class for the gradient sweep.

index.css: add .skeleton-shimmer utility class with linear-gradient
animation (1.8s ease-in-out infinite). Respects prefers-reduced-motion
by disabling animation.

Existing inline skeletons using animate-pulse are unaffected.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
senke 2026-02-08 23:01:31 +01:00
parent 27107245a6
commit b80b06f073
2 changed files with 26 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/web/src/components/ui/skeleton.tsx
View file

@ -61,7 +61,7 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
({ variant = 'rectangular', width, height, className, ...props }, ref) => {
const baseClasses = 'animate-pulse bg-kodo-steel/50';
const baseClasses = 'relative overflow-hidden bg-muted/50';
const variantClasses = {
text: 'rounded h-4 w-full',
@ -80,7 +80,10 @@ const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
className={cn(baseClasses, variantClasses[variant], className)}
style={style}
{...props}
/>
>
{/* Shimmer overlay — sweeping gradient for premium loading feel */}
<div className="absolute inset-0 skeleton-shimmer" />
</div>
);
},
);

21
apps/web/src/index.css
View file

@ -1072,6 +1072,27 @@
}
}
/* Skeleton shimmer — premium loading effect (Spotify/Discord-like) */
.skeleton-shimmer {
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.06) 40%,
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.06) 60%,
transparent 100%
);
background-size: 200% 100%;
animation: shimmer 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.skeleton-shimmer {
animation: none;
background: none;
}
}
@keyframes spin-slow {
to {
transform: rotate(360deg);