feat: loading indicator

js/Container.js

@@ -2,6 +2,7 @@ import { ImageEditor } from './ImageEditor.js';
 import { AvatarEditor } from './AvatarEditor.js';
 import { van } from './van.js';
 import { AvatarViewer } from './AvatarViewer.js';
+import { Loading } from './Loading.js';
 const { button, iframe, div, img } = van.tags;
 
 export function Container() {
@@ -12,6 +13,7 @@ export function Container() {
     },
     AvatarEditor(),
     ImageEditor(),
-    AvatarViewer()
+    AvatarViewer(),
+    Loading()
   );
 }

js/Loading.js

@@ -0,0 +1,17 @@
+import { showLoading } from "./state.js";
+import { van } from "./van.js";
+const { div, span } = van.tags;
+
+export function Loading() {
+  console.log("???", showLoading.val);
+  return div(
+    {
+      class: () =>
+        "absolute flex justify-center items-center top-0 left-0 bg-gray-900 bg-opacity-50 pointer-events-auto w-full h-full " +
+        (showLoading.val ? "" : "hidden"),
+    },
+    span({
+      class: "loading loading-spinner loading-lg",
+    })
+  );
+}

js/index.js

@@ -9,6 +9,7 @@ import {
   embeddings,
   imagePromptsMulti,
   selectedLayer,
+  showLoading,
 } from "./state.js";
 import { van } from "./van.js";
 import { app } from "./app.js";
@@ -284,12 +285,13 @@ const ext = {
     return {
       SAM_PROMPTS(node, inputName, inputData, app) {
         const btn = node.addWidget("button", "Edit prompt", "", () => {
-          let connectedImageFileName = getInputWidgetValue(node, 0, "image");
-          
-          const split = connectedImageFileName.split("/");
-          let id = connectedImageFileName
-          if (split.length > 1) id = split[1];
+          showLoading.val = true;
 
+          let connectedImageFileName = getInputWidgetValue(node, 0, "image");
+
+          const split = connectedImageFileName.split("/");
+          let id = connectedImageFileName;
+          if (split.length > 1) id = split[1];
 
           node.widgets.find((x) => x.name === "embedding_id").value = id;
 
@@ -309,6 +311,7 @@ const ext = {
               }),
             })
             .then(() => {
+              showLoading.val = false;
               showMyImageEditor(node);
             });
         });

js/state.js

@@ -18,6 +18,7 @@ export const iframeSrc = van.state('https://editor.avatech.ai');
 export const showEditor = van.state(false);
 export const fileName = van.state('');
 export const showImageEditor = van.state(false);
+export const showLoading = van.state(false);
 export const imageUrl = van.state('');
 export const point_label = van.state(1);
 export const imageContainerSize = van.state({