Developers Digest
121 lines
3.4 KiB
TypeScript
121 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/utils/cn";
|
|
import { useState, useEffect } from "react";
|
|
import ScrambleText from "@/components/ui/motion/scramble-text";
|
|
|
|
export const Shimmer = ({
|
|
className,
|
|
text = "Loading...",
|
|
}: {
|
|
className?: string;
|
|
text?: string;
|
|
}) => {
|
|
const [isInView, setIsInView] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsInView(true);
|
|
}, []);
|
|
|
|
return (
|
|
<div className={cn("w-full", className)}>
|
|
{text && (
|
|
<div className="mb-4 text-label-large text-black-alpha-56">
|
|
<ScrambleText
|
|
text={text}
|
|
delay={0}
|
|
duration={1.2}
|
|
isInView={isInView}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="space-y-3">
|
|
<div className="h-4 rounded-8 bg-gradient-to-r from-black-alpha-4 via-black-alpha-8 to-black-alpha-4 animate-shimmer mb-2 w-3/4">
|
|
<span className="sr-only">{text}</span>
|
|
</div>
|
|
<div className="h-4 rounded-8 bg-gradient-to-r from-black-alpha-4 via-black-alpha-8 to-black-alpha-4 animate-shimmer animation-delay-150 mb-2 w-1/2"></div>
|
|
<div className="h-4 rounded-8 bg-gradient-to-r from-black-alpha-4 via-black-alpha-8 to-black-alpha-4 animate-shimmer animation-delay-300 mb-2 w-full"></div>
|
|
<div className="h-4 rounded-8 bg-gradient-to-r from-black-alpha-4 via-black-alpha-8 to-black-alpha-4 animate-shimmer animation-delay-450 mb-2 w-1/2"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const ShimmerSingle = ({
|
|
className,
|
|
text,
|
|
}: {
|
|
className?: string;
|
|
text?: string;
|
|
}) => {
|
|
const [isInView, setIsInView] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsInView(true);
|
|
}, []);
|
|
|
|
return (
|
|
<div className={cn("w-full", className)}>
|
|
{text && (
|
|
<div className="mb-2 text-label-small text-black-alpha-56">
|
|
<ScrambleText
|
|
text={text}
|
|
delay={0}
|
|
duration={1}
|
|
isInView={isInView}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="h-4 rounded-8 bg-gradient-to-r from-black-alpha-4 via-black-alpha-8 to-black-alpha-4 animate-shimmer w-full"></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Chart shimmer with fire glow effect
|
|
export const ChartShimmer = ({
|
|
className,
|
|
text = "Loading chart data...",
|
|
}: {
|
|
className?: string;
|
|
text?: string;
|
|
}) => {
|
|
const [isInView, setIsInView] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsInView(true);
|
|
}, []);
|
|
|
|
return (
|
|
<div className={cn("w-full h-full relative overflow-hidden", className)}>
|
|
{/* Subtle fire glow background */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-heat-4/10 via-transparent to-heat-4/10 animate-pulse" />
|
|
|
|
{/* Loading text */}
|
|
{text && (
|
|
<div className="absolute top-4 left-4 text-label-small text-black-alpha-56 z-10">
|
|
<ScrambleText
|
|
text={text}
|
|
delay={0}
|
|
duration={0.8}
|
|
isInView={isInView}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Chart bars */}
|
|
<div className="absolute bottom-0 left-0 right-0 flex items-end justify-between px-4 pb-4 gap-2">
|
|
{Array.from({ length: 8 }, (_, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex-1 bg-gradient-to-t from-black-alpha-8 to-transparent rounded-t-4 animate-shimmer"
|
|
style={{
|
|
height: `${Math.random() * 60 + 20}%`,
|
|
animationDelay: `${i * 100}ms`,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|