41 lines
979 B
TypeScript
41 lines
979 B
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { cn } from '../../lib/utils'
|
|
|
|
const LOADERS = [
|
|
'pascal-loader-1',
|
|
'pascal-loader-2',
|
|
'pascal-loader-3',
|
|
'pascal-loader-4',
|
|
'pascal-loader-5',
|
|
]
|
|
|
|
interface SceneLoaderProps {
|
|
className?: string
|
|
fullScreen?: boolean
|
|
}
|
|
|
|
export function SceneLoader({ className, fullScreen = false }: SceneLoaderProps) {
|
|
const [loaderClass, setLoaderClass] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
// Pick a random loader on mount
|
|
setLoaderClass(LOADERS[Math.floor(Math.random() * LOADERS.length)] ?? LOADERS[0]!)
|
|
}, [])
|
|
|
|
if (!loaderClass) return null
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"z-100 flex items-center justify-center bg-background/80 backdrop-blur-md transition-opacity duration-300",
|
|
fullScreen ? "fixed inset-0" : "absolute inset-0",
|
|
className
|
|
)}
|
|
>
|
|
<div className={cn(loaderClass, "text-foreground opacity-80")} />
|
|
</div>
|
|
)
|
|
}
|