From 36e313c9ee2b8e125d7a9e43795f8a4e028dc5f3 Mon Sep 17 00:00:00 2001
From: GogoVega <92022724+GogoVega@users.noreply.github.com>
Date: Sun, 27 Oct 2024 23:08:19 +0100
Subject: [PATCH] Add spinner + fix typos

---
 .../editor-client/src/js/ui/palette-editor.js         | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
index 644a094f4..76a64cb82 100644
--- a/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
+++ b/packages/node_modules/@node-red/editor-client/src/js/ui/palette-editor.js
@@ -1534,21 +1534,18 @@ RED.palette.editor = (function() {
         const installModule = function (module) {
             const [moduleName, moduleVersion] = module;
 
-            const msg = RED.notify(RED._("palette.editor.installing", { module: moduleName }));
+            const spinner = '<div style="text-align: center; height: 100%; padding-top: 20px;"><img src="red/images/spin.svg" style="width: 60px;"/></div>';
+            const msg = "<p>" + RED._("palette.editor.installing", { module: moduleName }) + "</p>" + spinner;
 
             if (!notification) {
                 notification = RED.notify(msg, notificationOptions);
             } else {
-                notification.update(msg);
+                notification.update(msg, notificationOptions);
             }
 
-            // TODO: add spinner to a div below the title
-            //const spinner = RED.utils.addSpinnerOverlay(container, true);
-
             RED.eventLog.startEvent(RED._("palette.editor.confirm.button.install") + " : " + moduleName + " " + moduleVersion);
 
             installNodeModule(moduleName, moduleVersion, undefined, function(xhr, textStatus, err) {
-                //spinner.close();
                 if (err && xhr.status === 504) {
                     notification.update(RED._("palette.editor.errors.installTimeout"), {
                         modal: true,
@@ -1568,7 +1565,7 @@ RED.palette.editor = (function() {
                     if (moduleArray.length) {
                         installModule(moduleArray.shift());
                     } else {
-                        notification.update(RED._("palette.editor.successfulInstall"), { ...notificationOptions, type: "success", timeout: 1000 });
+                        notification.update(RED._("palette.editor.successfulInstall"), { ...notificationOptions, type: "success", timeout: 10000 });
                     }
                 }
             });