ui/scene: add loading splash screen

pkgs/clan-app/ui/src/routes/Clan/Clan.css

@@ -0,0 +1,4 @@
+.fade-out {
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}

pkgs/clan-app/ui/src/routes/Clan/Clan.tsx

@@ -1,5 +1,5 @@
 import { RouteSectionProps } from "@solidjs/router";
-import { Component, createEffect, JSX } from "solid-js";
+import { Component, JSX } from "solid-js";
 import { useClanURI } from "@/src/hooks/clan";
 import { CubeScene } from "@/src/scene/cubes";
 import { MachinesQueryResult, useMachinesQuery } from "@/src/queries/queries";
@@ -7,6 +7,9 @@ import { callApi } from "@/src/hooks/api";
 import { store, setStore } from "@/src/stores/clan";
 import { produce } from "solid-js/store";
 import { Button } from "@/src/components/Button/Button";
+import { Splash } from "@/src/scene/splash";
+import cx from "classnames";
+import "./Clan.css";
 
 export const Clan: Component<RouteSectionProps> = (props) => {
   return (
@@ -49,10 +52,6 @@ const ClanSceneController = () => {
     return;
   };
 
-  createEffect(() => {
-    console.log("sceneData changed:", store.sceneData);
-  });
-
   return (
     <SceneDataProvider clanURI={clanURI}>
       {({ query }) => {
@@ -87,7 +86,12 @@ const ClanSceneController = () => {
                 Refetch API
               </Button>
             </div>
+            {/* TODO: Add minimal display time */}
+            <div class={cx({ "fade-out": !query.isLoading })}>
+              <Splash />
+            </div>
             <CubeScene
+              isLoading={query.isLoading}
               cubesQuery={query}
               onCreate={onCreate}
               sceneStore={() => {

pkgs/clan-app/ui/src/scene/cubes.tsx

@@ -69,6 +69,7 @@ export function CubeScene(props: {
   onCreate?: (id: string) => Promise<void>;
   sceneStore: Accessor<SceneData>;
   setMachinePos: (machineId: string, pos: [number, number]) => void;
+  isLoading: boolean;
 }) {
   // sceneData.cubesQuer
   let container: HTMLDivElement;
@@ -78,7 +79,7 @@ export function CubeScene(props: {
   let floor: THREE.Mesh;
   let controls: MapControls;
   // Raycaster for clicking
-  let raycaster = new THREE.Raycaster();
+  const raycaster = new THREE.Raycaster();
 
   let needsRender = false; // Flag to control rendering
 
@@ -181,6 +182,7 @@ export function CubeScene(props: {
       requestAnimationFrame(renderScene);
     }
   }
+
   function renderScene() {
     if (!isAnimating) return;
     needsRender = false;
@@ -587,9 +589,6 @@ export function CubeScene(props: {
       BASE_SIZE,
     );
 
-    // Basic OrbitControls implementation (simplified)
-    let isDragging = false;
-    let previousMousePosition = { x: 0, y: 0 };
     // const spherical = new THREE.Spherical();
     // spherical.setFromVector3(camera.position);