Tom Boullay
28 lines
793 B
TypeScript
28 lines
793 B
TypeScript
import type { SceneLoadingState } from "@/types/world/sceneLoading";
|
|
|
|
interface SceneLoadingOverlayProps {
|
|
state: SceneLoadingState;
|
|
}
|
|
|
|
export function SceneLoadingOverlay({
|
|
state,
|
|
}: SceneLoadingOverlayProps): React.JSX.Element | null {
|
|
const isReady = state.status === "ready";
|
|
const progress = Math.round(Math.max(0, Math.min(1, state.progress)) * 100);
|
|
|
|
return (
|
|
<div
|
|
className={`scene-loading-overlay${isReady ? " scene-loading-overlay--ready" : ""}`}
|
|
aria-live="polite"
|
|
>
|
|
<div className="scene-loading-overlay__content">
|
|
<strong>{state.currentStep}</strong>
|
|
<div className="scene-loading-overlay__track">
|
|
<span style={{ width: `${progress}%` }} />
|
|
<em>{progress}%</em>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|