Mahyar Khanbolooki
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import React, { useEffect, useState } from 'react'
|
|
import PingAnimation from './animations/PingAnimation';
|
|
|
|
type Props = {
|
|
visible?: boolean;
|
|
bgOpacity?: number;
|
|
delay?: number;
|
|
} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
|
|
|
|
const LoadingOverlay = ({ visible = true, bgOpacity = 30, delay = 0, children = <PingAnimation /> }: Props) => {
|
|
const [loaded, setLoaded] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Trigger fade-in after mount
|
|
const timeout = setTimeout(() => setLoaded(visible), 300);
|
|
return () => clearTimeout(timeout);
|
|
}, [visible]);
|
|
|
|
return (
|
|
<div
|
|
data-visible={visible}
|
|
data-loaded={loaded}
|
|
className={`absolute inset-0 flex items-center justify-center
|
|
backdrop-blur-sm bg-background/${bgOpacity}
|
|
opacity-0 transition-opacity duration-300 ease-in-out delay-${delay}
|
|
data-[loaded=false]:-z-50
|
|
data-[visible=true]:z-50
|
|
data-[visible=true]:opacity-100`}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default LoadingOverlay |