22 lines
736 B
TypeScript
22 lines
736 B
TypeScript
"use client";
|
|
|
|
import { Html } from "@react-three/drei";
|
|
import { Loader2 } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
|
|
export function ModelLoadingFallback() {
|
|
const [slow, setSlow] = useState(false);
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => setSlow(true), 15000);
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
return (
|
|
<Html center>
|
|
<div role="status" className="flex w-60 flex-col items-center gap-2 rounded-lg bg-zinc-900/90 px-4 py-3 text-center text-xs text-white">
|
|
<Loader2 className="h-5 w-5 animate-spin" />
|
|
<p>{slow ? "模型加载较慢，可退出预览后重试，或下载模型查看" : "正在加载 3D 模型…"}</p>
|
|
</div>
|
|
</Html>
|
|
);
|
|
}
|