30 lines
1.0 KiB
TypeScript
30 lines
1.0 KiB
TypeScript
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
const loadingMessages = [
|
|
"Analisando o certificado...",
|
|
"Extraindo dados com OCR...",
|
|
"Consultando normas técnicas...",
|
|
"Verificando propriedades mecânicas...",
|
|
"Analisando composição química...",
|
|
"Compilando o relatório final...",
|
|
];
|
|
|
|
export const Loader: React.FC = () => {
|
|
const [messageIndex, setMessageIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setMessageIndex((prevIndex) => (prevIndex + 1) % loadingMessages.length);
|
|
}, 2500);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-white/80 dark:bg-gray-900/80 backdrop-blur-sm flex flex-col justify-center items-center z-50">
|
|
<div className="w-16 h-16 border-4 border-dashed rounded-full animate-spin border-blue-500"></div>
|
|
<p className="mt-4 text-gray-800 dark:text-white text-lg font-semibold">{loadingMessages[messageIndex]}</p>
|
|
</div>
|
|
);
|
|
}; |