Show a loader on top of the graph editor when waiting for the preview canvas

Author: adamwych

packages/renderer/engine.ts

@@ -1,4 +1,5 @@
 import { createContextProvider } from "@solid-primitives/context";
+import { createEmitter } from "@solid-primitives/event-bus";
 import { onCleanup } from "solid-js";
 import { unwrap } from "solid-js/store";
 import { Material } from "../material/material";
@@ -8,13 +9,13 @@ import { useNodeBlueprintsStore } from "../stores/blueprints";
 import { useMaterialStore } from "../stores/material";
 import TextureFilterMethod from "../types/texture-filter";
 import { mapDictionary as mapMap } from "../utils/map";
+import createRenderCommandQueue, { RenderCommandQueue } from "./command-queue";
 import { RenderWorkerCommand, RenderWorkerResponse } from "./commands";
+import { PreviewMode } from "./preview";
+import { Preview2dSettings } from "./preview-2d";
 import { Preview3dSettings } from "./preview-3d";
 import { MaterialNodeSnapshot, MinimalMaterialNodeSnapshot, WebGL2RenderWorker } from "./types";
 import WebGL2RenderWorkerImpl from "./webgl2/worker?worker";
-import createRenderCommandQueue, { RenderCommandQueue } from "./command-queue";
-import { PreviewMode } from "./preview";
-import { Preview2dSettings } from "./preview-2d";
 
 // A re-type of `Worker`, because the original doesn't support specifying message type...
 export interface RenderWorker extends Omit<Worker, "postMessage"> {
@@ -36,6 +37,7 @@ export interface RenderWorker extends Omit<Worker, "postMessage"> {
  * a re-render of the modified node and its entire chain.
  */
 export const [RenderEngineProvider, useRenderEngine] = createContextProvider(() => {
+    const events = createEmitter<{ previewCanvasReady: object }>();
     const materialStore = useMaterialStore()!;
     const blueprintStore = useNodeBlueprintsStore()!;
     let worker: RenderWorker | undefined;
@@ -227,6 +229,8 @@ export const [RenderEngineProvider, useRenderEngine] = createContextProvider(()
                 },
                 [canvas],
             );
+
+            events.emit("previewCanvasReady", {});
         },
 
         async setPreviewMode(mode: PreviewMode) {
@@ -263,5 +267,7 @@ export const [RenderEngineProvider, useRenderEngine] = createContextProvider(()
                 settings,
             });
         },
+
+        events,
     };
 });

packages/ui/components/loader/fill-loader.tsx

@@ -0,0 +1,12 @@
+import { RiSystemLoader2Fill } from "solid-icons/ri";
+
+export default function FillLoader() {
+    return (
+        <div
+            class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-black bg-opacity-25 z-50"
+            onPointerDown={(e) => e.stopPropagation()}
+        >
+            <RiSystemLoader2Fill class="animate-spin" size={24} />
+        </div>
+    );
+}

packages/ui/editor/canvas/node-thumbnails-canvas.tsx

@@ -1,21 +1,25 @@
 import { createResizeObserver } from "@solid-primitives/resize-observer";
-import { createEffect, onMount } from "solid-js";
+import { createEffect, createSignal, onMount } from "solid-js";
 import { useRenderEngine } from "../../../renderer/engine";
+import { WebGL2RenderWorker } from "../../../renderer/types";
 import { useWorkspaceStore } from "../../../stores/workspace";
+import FillLoader from "../../components/loader/fill-loader";
 import { useEditorCameraState } from "./interaction/camera";
-import { WebGL2RenderWorker } from "../../../renderer/types";
 
 export default function EditorNodeThumbnailsCanvas() {
     const workspaceManager = useWorkspaceStore()!;
-    const renderEngine = useRenderEngine()!;
+    const renderer = useRenderEngine()!;
     const cameraState = useEditorCameraState()!;
+    const [waitingForPreviewCanvas, setWaitingForPreviewCanvas] = createSignal(true);
     let sizeElement!: HTMLDivElement;
     let worker: WebGL2RenderWorker;
 
     function initialize(canvasElement: HTMLCanvasElement) {
         const material = workspaceManager.getActiveMaterial()!;
 
-        renderEngine
+        renderer.events.on("previewCanvasReady", () => setWaitingForPreviewCanvas(false));
+
+        renderer
             .initializeWebGLWorker(canvasElement.transferControlToOffscreen(), material, true)
             .then((w) => {
                 worker = w;
@@ -47,6 +51,8 @@ export default function EditorNodeThumbnailsCanvas() {
             */}
             <div ref={sizeElement} class="absolute w-full h-full" />
 
+            {waitingForPreviewCanvas() && <FillLoader />}
+
             <canvas
                 ref={(e) => onMount(() => initialize(e))}
                 class="absolute z-10 pointer-events-none"

packages/ui/editor/preview/panel.tsx

@@ -2,7 +2,6 @@ import {
     RiMediaFullscreenFill,
     RiOthersBox3Fill,
     RiOthersLightbulbFill,
-    RiSystemLoader2Fill,
     RiSystemRefreshLine,
 } from "solid-icons/ri";
 import { createSignal, onMount } from "solid-js";
@@ -20,6 +19,7 @@ import Button from "../../components/button/button";
 import ButtonGroup from "../../components/button/button-group";
 import MenuButton from "../../components/button/menu-button";
 import MenuButtonOption from "../../components/button/menu-button-option";
+import FillLoader from "../../components/loader/fill-loader";
 import PanelSection from "../../components/panel/section";
 import Preview2dCamera from "./2d-camera";
 import PreviewOrbitCamera from "./orbit-camera";
@@ -158,11 +158,7 @@ export default function PreviewPanel() {
                 <Button icon={RiMediaFullscreenFill} size="small" onClick={toggleFullscreen} />,
             ]}
         >
-            {loading() && (
-                <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-10">
-                    <RiSystemLoader2Fill class="animate-spin" size={24} />
-                </div>
-            )}
+            {loading() && <FillLoader />}
 
             {!is3D() && resetCameraVisible() && (
                 <div class="absolute top-12 right-0 m-3 z-10 animate-fade-in">