Spaces:
Build error
Build error
File size: 3,465 Bytes
75fefa7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
"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>
);
};
|