Spaces:
Sleeping
Sleeping
File size: 3,622 Bytes
da8e27d 7afca7e 0891c10 7afca7e 354aaac da8e27d 354aaac da8e27d 354aaac da8e27d 354aaac da8e27d 354aaac 7afca7e 354aaac 7afca7e da8e27d 354aaac da8e27d 354aaac 7afca7e 354aaac da8e27d 7afca7e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | import { Brain } from 'lucide-react'
interface Props {
title?: string
subtitle?: string
statusText?: string
}
export default function LoadingState({
title = "Đang phân tích hình ảnh MRI",
subtitle = "Hệ thống đang thực hiện gọt sọ, trích xuất đặc trưng hình ảnh và tính toán xác suất bệnh lý. Vui lòng chờ trong giây lát...",
statusText = "Hệ thống đang xử lý"
}: Props) {
return (
<div className="flex min-h-[60vh] flex-col items-center justify-center gap-10 px-4 py-16">
{/* CSS Hoạt họa cục bộ để tạo hiệu ứng trượt vô hạn và sóng radar đồng tâm */}
<style>{`
@keyframes radar-ripple {
0% {
transform: scale(0.95);
opacity: 1;
}
100% {
transform: scale(2.2);
opacity: 0;
}
}
@keyframes loading-slide {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(200%);
}
}
.animate-radar-ripple-1 {
animation: radar-ripple 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.animate-radar-ripple-2 {
animation: radar-ripple 3s cubic-bezier(0, 0, 0.2, 1) infinite;
animation-delay: 1s;
}
.animate-radar-ripple-3 {
animation: radar-ripple 3s cubic-bezier(0, 0, 0.2, 1) infinite;
animation-delay: 2s;
}
.animate-loading-slide {
animation: loading-slide 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
`}</style>
{/* Radar Pulse Animation & Brain Icon */}
<div className="relative flex h-36 w-36 items-center justify-center">
{/* Các vòng sóng radar đồng tâm phát sáng ngọc bích */}
<div className="absolute h-16 w-16 rounded-full bg-teal-500/20 opacity-0 animate-radar-ripple-1" />
<div className="absolute h-16 w-16 rounded-full bg-teal-500/15 opacity-0 animate-radar-ripple-2" />
<div className="absolute h-16 w-16 rounded-full bg-teal-500/10 opacity-0 animate-radar-ripple-3" />
{/* Vòng viền xoay nhẹ tĩnh phía trong */}
<div className="absolute h-20 w-20 animate-[spin_10s_linear_infinite] rounded-full border border-dashed border-teal-300/40" />
{/* Vòng tròn trung tâm chứa biểu tượng bộ não */}
<div className="relative z-10 flex h-20 w-20 animate-pulse items-center justify-center rounded-full bg-gradient-to-tr from-teal-500 to-emerald-500 shadow-lg shadow-teal-500/30">
<Brain className="h-10 w-10 text-white" strokeWidth={1.5} />
</div>
</div>
{/* Text thuyết minh trạng thái sang trọng */}
<div className="flex flex-col items-center gap-3 text-center max-w-sm">
<h3 className="text-lg font-bold text-slate-800 tracking-tight">
{title}
</h3>
<p className="text-sm text-slate-500 leading-relaxed font-normal">
{subtitle}
</p>
</div>
{/* Thanh loading trượt vô hạn cực mảnh */}
<div className="w-full max-w-xs space-y-2">
<div className="relative h-1 w-full overflow-hidden rounded-full bg-slate-100">
<div className="absolute top-0 bottom-0 left-0 w-1/3 rounded-full bg-gradient-to-r from-teal-500 to-emerald-500 animate-loading-slide" />
</div>
<p className="text-center text-[11px] font-medium uppercase tracking-widest text-teal-600/80 animate-pulse">
{statusText}
</p>
</div>
</div>
)
}
|