mirror of
https://github.com/stackblitz/bolt.new
synced 2024-11-27 22:42:21 +00:00
28 lines
705 B
TypeScript
28 lines
705 B
TypeScript
import { memo, useEffect, useState } from 'react';
|
|
|
|
interface LoadingDotsProps {
|
|
text: string;
|
|
}
|
|
|
|
export const LoadingDots = memo(({ text }: LoadingDotsProps) => {
|
|
const [dotCount, setDotCount] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setDotCount((prevDotCount) => (prevDotCount + 1) % 4);
|
|
}, 500);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex justify-center items-center h-full">
|
|
<div className="relative">
|
|
<span>{text}</span>
|
|
<span className="absolute left-[calc(100%-12px)]">{'.'.repeat(dotCount)}</span>
|
|
<span className="invisible">...</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|