Improve loading

src/App.vue

@@ -12,7 +12,7 @@
             <div class="content">
                 <Programming v-show="currentView === 'PROGRAMMING'" />
                 <Stage v-show="currentView === 'STAGE'" />
-                <Visualization v-show="currentView === 'VISUALIZATION'" />
+                <Visualization v-show="currentView === 'VISUALIZATION'" :active="currentView === 'VISUALIZATION'" />
             </div>
         </div>
         <Settings v-model="showSettings" />

src/stage/stage.ts

@@ -40,7 +40,6 @@ export const useStage = defineStore("stage", () => {
     const fixtures = ref<ExtendedMap<string, BaseFixture>>(new ExtendedMap()) as Ref<ExtendedMap<string, BaseFixture>>;
     const controllers = ref<ExtendedMap<string, BaseController>>(new ExtendedMap()) as Ref<ExtendedMap<string, BaseController>>;
     const renderer = markRaw(rendererProxy) as RemoteStageRenderer;
-    // const renderer = {} as any;
     const visualization = ref(new StageVisualization(fixtures.value));
 
     function afterFrame() {

src/stage/visualization/StageView.vue

@@ -8,11 +8,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, onBeforeUnmount, watch } from "vue";
 import { useResizeObserver, useThrottleFn } from "@vueuse/core";
 import * as Comlink from "comlink";
 import { useStage } from "../stage";
 
+const props = defineProps<{ active: boolean }>();
+
 const stage = useStage();
 
 const stageViewEl = ref<HTMLElement>();
@@ -41,6 +43,13 @@ function onResize() {
     stage.renderer.setCanvasSize(stageViewEl.value.clientWidth, stageViewEl.value.clientHeight);
 }
 
+watch(
+    () => props.active,
+    (active) => {
+        stage.renderer.setActive(active);
+    }
+);
+
 onMounted(() => {
     initialize();
     onResize();

src/stage/visualization/stageRenderer.ts

@@ -33,6 +33,7 @@ export interface RemoteStageRenderer {
     onFixtureValueUpdate<T extends VisualizationType>(fixtureId: string, value: FixtureRendererValue<T>): Promise<void>;
     setCanvas(canvas: OffscreenCanvas | null): Promise<void>;
     setCanvasSize(width: number, height: number): Promise<void>;
+    setActive(loading: boolean): Promise<void>;
     removeFixtureRenderer(fixtureId: string): Promise<void>;
     loadScene(scene: any): Promise<void>;
     reset(): Promise<void>;
@@ -43,6 +44,7 @@ export class StageRenderer {
     private _camera: THREE.PerspectiveCamera | null = null;
     private _fixtureRenderers: Map<string, BaseRenderer> = new Map();
 
+    private active = false;
     private renderer: THREE.WebGLRenderer | null = null;
     private canvas: OffscreenCanvas | null = null;
 
@@ -84,6 +86,10 @@ export class StageRenderer {
         }
     }
 
+    public setActive(active: boolean) {
+        this.active = active;
+    }
+
     public createFixtureRenderer<T extends VisualizationType>(
         fixtureId: string,
         visualizationType: T,
@@ -143,7 +149,7 @@ export class StageRenderer {
     private render() {
         requestAnimationFrame(() => this.render());
 
-        if (!this.renderer || !this.scene || !this.camera) {
+        if (!this.renderer || !this.scene || !this.camera || !this.active) {
             return;
         }
 

src/views/Visualization.vue

@@ -1,7 +1,7 @@
 <template>
     <splitpanes horizontal>
         <pane>
-            <StageView />
+            <StageView :active="active" />
         </pane>
         <pane>
             <Timeline />
@@ -14,4 +14,6 @@ import { Splitpanes, Pane } from "splitpanes";
 
 import Timeline from "@/timeline/Timeline.vue";
 import StageView from "@/stage/visualization/StageView.vue";
+
+defineProps<{ active: boolean }>();
 </script>