Spaces:
Running
Running
File size: 2,073 Bytes
f9c67bc c10f8f8 f9c67bc 9c17740 c10f8f8 9c17740 c10f8f8 9c17740 f9c67bc 9c17740 f9c67bc 9c17740 c10f8f8 9c17740 c10f8f8 9c17740 c10f8f8 |
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 |
"use client";
import Loading from "@/components/loading";
import { useState, useEffect } from "react";
import { useInterval } from "react-use";
const TEXTS = [
"Teaching pixels to dance with style...",
"AI is having a creative breakthrough...",
"Channeling digital vibes into pure code...",
"Summoning the website spirits...",
"Brewing some algorithmic magic...",
"Composing a symphony of divs and spans...",
"Riding the wave of computational creativity...",
"Aligning the stars for perfect design...",
"Training circus animals to write CSS...",
"Launching ideas into the digital stratosphere...",
];
export const AiLoading = ({
text,
className,
}: {
text?: string;
className?: string;
}) => {
const [selectedText, setSelectedText] = useState(
text ?? TEXTS[0] // Start with first text to avoid hydration issues
);
// Set random text on client-side only to avoid hydration mismatch
useEffect(() => {
if (!text) {
setSelectedText(TEXTS[Math.floor(Math.random() * TEXTS.length)]);
}
}, [text]);
useInterval(() => {
if (!text) {
if (selectedText === TEXTS[TEXTS.length - 1]) {
setSelectedText(TEXTS[0]);
} else {
setSelectedText(TEXTS[TEXTS.indexOf(selectedText) + 1]);
}
}
}, 12000);
return (
<div className={`flex items-center justify-start gap-2 ${className}`}>
<Loading overlay={false} className="!size-5 opacity-50" />
<p className="text-neutral-400 text-sm">
<span className="inline-flex">
{selectedText.split("").map((char, index) => (
<span
key={index}
className="bg-gradient-to-r from-neutral-100 to-neutral-300 bg-clip-text text-transparent animate-pulse"
style={{
animationDelay: `${index * 0.1}s`,
animationDuration: "1.3s",
animationIterationCount: "infinite",
}}
>
{char === " " ? "\u00A0" : char}
</span>
))}
</span>
</p>
</div>
);
};
|