100 lines
No EOL
3.4 KiB
TypeScript
100 lines
No EOL
3.4 KiB
TypeScript
import { cn } from "@/lib/utils"
|
|
import { Loader } from "./loader"
|
|
import { ProgressBar } from "./progress-bar"
|
|
import { useEffect, useRef } from "react"
|
|
import anime from "animejs"
|
|
import Image from "next/image"
|
|
interface OverlayLoaderProps {
|
|
text?: string
|
|
className?: string
|
|
show: boolean
|
|
showProgress?: boolean
|
|
duration?: number
|
|
extra_info?: string
|
|
onProgressComplete?: () => void
|
|
}
|
|
|
|
export const OverlayLoader = ({
|
|
text,
|
|
className,
|
|
show,
|
|
showProgress = false,
|
|
duration = 10,
|
|
onProgressComplete,
|
|
extra_info
|
|
}: OverlayLoaderProps) => {
|
|
const overlayRef = useRef<HTMLDivElement>(null);
|
|
const contentRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (show && overlayRef.current && contentRef.current) {
|
|
// Animate overlay fade in
|
|
anime({
|
|
targets: overlayRef.current,
|
|
opacity: [0, 1],
|
|
duration: 300,
|
|
easing: 'easeInOutQuad'
|
|
});
|
|
|
|
// Animate content scale and fade in
|
|
anime({
|
|
targets: contentRef.current,
|
|
scale: [0.9, 1],
|
|
opacity: [0, 1],
|
|
duration: 400,
|
|
easing: 'easeOutQuad'
|
|
});
|
|
}
|
|
}, [show]);
|
|
|
|
if (!show) return null;
|
|
|
|
return (
|
|
<div
|
|
ref={overlayRef}
|
|
className="fixed inset-0 bg-black/70 z-50 flex items-center justify-center opacity-0"
|
|
>
|
|
<div
|
|
ref={contentRef}
|
|
className={cn(
|
|
"flex flex-col items-center justify-center px-6 pt-0 pb-8 rounded-xl bg-[#030303] shadow-2xl",
|
|
"min-w-[280px] sm:min-w-[330px] border border-white/10 opacity-0",
|
|
className
|
|
)}
|
|
|
|
>
|
|
<img loading="eager" src={'/loading.gif'} alt="loading" width={250} height={250} />
|
|
{showProgress ? (
|
|
<div className="w-full space-y-6 pt-4">
|
|
<ProgressBar
|
|
duration={duration}
|
|
onComplete={onProgressComplete}
|
|
/>
|
|
{text && (
|
|
<div className="space-y-1">
|
|
<p className="text-white text-base text-center font-semibold font-inter">
|
|
{text}
|
|
</p>
|
|
{extra_info && <p className="text-white/80 text-xs text-center font-semibold font-inter">{extra_info}</p>}
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<p className="text-white text-base text-center font-semibold font-inter">
|
|
{text}
|
|
</p>
|
|
{extra_info && <p className="text-white/80 text-xs text-center font-semibold font-inter">{extra_info}</p>}
|
|
</>
|
|
// <div className="flex flex-col items-center gap-4">
|
|
// <div className="relative">
|
|
// <div className="absolute inset-0 bg-gradient-to-r from-[#9034EA] to-[#5146E5] blur-xl opacity-20" />
|
|
// <Loader text={text} />
|
|
// </div>
|
|
|
|
// </div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|