58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
|
|
interface SearchLoadingModalProps {
|
|
isOpen: boolean;
|
|
onTimeout?: () => void;
|
|
maxSeconds?: number;
|
|
}
|
|
|
|
export function SearchLoadingModal({ isOpen, onTimeout, maxSeconds = 30 }: SearchLoadingModalProps) {
|
|
const [seconds, setSeconds] = useState(maxSeconds);
|
|
|
|
useEffect(() => {
|
|
if (!isOpen) {
|
|
setSeconds(maxSeconds);
|
|
return;
|
|
}
|
|
|
|
const interval = setInterval(() => {
|
|
setSeconds(prev => {
|
|
if (prev <= 1) {
|
|
clearInterval(interval);
|
|
onTimeout?.();
|
|
return maxSeconds;
|
|
}
|
|
return prev - 1;
|
|
});
|
|
}, 1000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [isOpen, maxSeconds, onTimeout]);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
|
<div className="bg-white p-6 max-w-md shadow-xl">
|
|
<h2 className="text-xl font-normal mb-4">Searching for specs...</h2>
|
|
<p className="text-sm text-outline-variant mb-4">This may take up to {maxSeconds} seconds</p>
|
|
|
|
<div className="mb-4">
|
|
<div className="relative h-2 bg-foreground overflow-hidden">
|
|
<div
|
|
className="h-full bg-primary transition-all duration-1000"
|
|
style={{ width: `${(seconds / maxSeconds) * 100}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-center text-sm font-normal">
|
|
<span className="text-primary text-lg">{seconds}</span> seconds remaining
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|