From 0385a2b32d3e4e39dc358b964cf91e91c55b1863 Mon Sep 17 00:00:00 2001
From: David Requeno <davidrequeno52@gmail.com>
Date: Thu, 21 Nov 2024 21:14:13 -0600
Subject: [PATCH] tweak: enhance working overlay behavior

---
 src/puter-js/src/modules/UI.js | 53 ++++++++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)

diff --git a/src/puter-js/src/modules/UI.js b/src/puter-js/src/modules/UI.js
index 7c9f7ab87..ecda81d73 100644
--- a/src/puter-js/src/modules/UI.js
+++ b/src/puter-js/src/modules/UI.js
@@ -162,6 +162,9 @@ class UI extends EventListener {
     // The most recent value that we received for a given broadcast, by name.
     #lastBroadcastValue = new Map(); // name -> data
 
+    #overlayActive = false;
+    #overlayTimer = null;
+
     // Replaces boilerplate for most methods: posts a message to the GUI with a unique ID, and sets a callback for it.
     #postMessageWithCallback = function(name, resolve, args = {}) {
         const msg_id = this.#messageID++;
@@ -1278,6 +1281,56 @@ class UI extends EventListener {
             callback(this.#lastBroadcastValue.get(eventName));
         }
     }
+
+    showWorking() {
+        if (this.#overlayActive) return;
+
+        const overlay = document.createElement('div');
+        overlay.classList.add('puter-loading-overlay');
+
+        const styles = {
+            position: 'fixed',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            zIndex: '2147483647',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            pointerEvents: 'all'
+        };
+
+        Object.assign(overlay.style, styles);
+        overlay.innerHTML = '<div class="puter-loading-spinner">Working...</div>';
+        document.body.appendChild(overlay);
+
+        this.#overlayActive = true;
+        this.#overlayTimer = setTimeout(() => {
+            this.#overlayTimer = null;
+        }, 1000);
+    }
+
+    hideWorking() {
+        if (!this.#overlayActive) return;
+    
+        if (this.#overlayTimer) {
+            clearTimeout(this.#overlayTimer);
+            this.#overlayTimer = null;
+        }
+    
+        const overlay = document.querySelector('.puter-loading-overlay');
+        if (overlay) {
+            overlay.parentNode?.removeChild(overlay);
+        }
+    
+        this.#overlayActive = false;
+    }
+
+    isWorkingActive() {
+        return this.#overlayActive;
+    }
 }
 
 export default UI