42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
'use client';
|
|
import * as React from 'react';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import type * as ProgressPrimitive from '@radix-ui/react-progress';
|
|
|
|
type Loading_Props = React.ComponentProps<typeof ProgressPrimitive.Root> & {
|
|
/** how many ms between updates */
|
|
intervalMs?: number;
|
|
/** fraction of the remaining distance to add each tick */
|
|
alpha?: number;
|
|
};
|
|
|
|
export const Loading: React.FC<Loading_Props> = ({
|
|
intervalMs = 50,
|
|
alpha = 0.1,
|
|
className,
|
|
...props
|
|
}: Loading_Props) => {
|
|
const [progress, setProgress] = React.useState(0);
|
|
|
|
React.useEffect(() => {
|
|
const id = window.setInterval(() => {
|
|
setProgress((prev) => {
|
|
// compute the next progress
|
|
const next = prev + (100 - prev) * alpha;
|
|
// optional: round if you want neat numbers
|
|
return Math.min(100, Math.round(next * 10) / 10);
|
|
});
|
|
}, intervalMs);
|
|
|
|
return () => window.clearInterval(id);
|
|
}, [intervalMs, alpha]);
|
|
|
|
return (
|
|
<div className='items-center justify-center w-1/3 m-auto pt-20'>
|
|
<Progress value={progress} className={className} {...props} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Loading;
|