add: loading

src/components/ui/SceneLoadingOverlay.tsx

@@ -0,0 +1,27 @@
+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>
+  );
+}