feat: loading caption

js/Loading.js

@@ -1,17 +1,17 @@
-import { showLoading } from "./state.js";
+import { loadingCaption, 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 " +
+        "absolute flex flex-col 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",
-    })
+      class: "loading loading-spinner loading-lg mb-2",
+    }),
+    () => span(loadingCaption.val)
   );
 }

js/index.js

@@ -10,6 +10,7 @@ import {
   imagePromptsMulti,
   selectedLayer,
   showLoading,
+  loadingCaption,
 } from "./state.js";
 import { van } from "./van.js";
 import { app } from "./app.js";
@@ -287,6 +288,7 @@ const ext = {
     return {
       SAM_PROMPTS(node, inputName, inputData, app) {
         const btn = node.addWidget("button", "Edit prompt", "", () => {
+          loadingCaption.val = "Computing image embedding...";
           showLoading.val = true;
 
           let connectedImageFileName = getInputWidgetValue(node, 0, "image");

js/state.js

@@ -19,6 +19,7 @@ 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 loadingCaption = van.state('');
 export const imageUrl = van.state('');
 export const point_label = van.state(1);
 export const imageContainerSize = van.state({