From d060468361663c51371d4129a4abcae279a1e64f Mon Sep 17 00:00:00 2001
From: Daniel Maya <daniel.maya@artica.es>
Date: Fri, 12 Jul 2019 11:00:11 +0200
Subject: [PATCH] Added spinner

---
 .../javascript/pandora_visual_console.js      | 25 ++++++++----
 visual_console_client/src/Item.ts             | 17 +++++++++
 .../src/items/ModuleGraph.ts                  | 21 ----------
 visual_console_client/src/main.css            | 38 +++++++++++++++++++
 4 files changed, 73 insertions(+), 28 deletions(-)

diff --git a/pandora_console/include/javascript/pandora_visual_console.js b/pandora_console/include/javascript/pandora_visual_console.js
index ad4c841b33..0ccca8751d 100755
--- a/pandora_console/include/javascript/pandora_visual_console.js
+++ b/pandora_console/include/javascript/pandora_visual_console.js
@@ -191,8 +191,13 @@ function createVisualConsole(
         height: e.newSize.height,
         type: e.item.props.type
       };
-      var taskId = "visual-console-item-resize-" + id;
 
+      visualConsole.elementsById[id].meta = {
+        ...visualConsole.elementsById[id].meta,
+        isUpdating: true
+      };
+
+      var taskId = "visual-console-item-resize-" + id;
       // Persist the new size.
       asyncTaskManager
         .add(taskId, function(done) {
@@ -210,6 +215,11 @@ function createVisualConsole(
                   error ? error.message : "Invalid response"
                 );
 
+                visualConsole.elementsById[id].meta = {
+                  ...visualConsole.elementsById[id].meta,
+                  isUpdating: false
+                };
+
                 // Resize the element to its initial Size.
                 e.item.resize(e.prevSize.width, e.prevSize.height);
               }
@@ -228,22 +238,23 @@ function createVisualConsole(
                         "[API]",
                         error ? error.message : "Invalid response"
                       );
+
+                      visualConsole.elementsById[id].meta = {
+                        ...visualConsole.elementsById[id].meta,
+                        isUpdating: false
+                      };
                     }
 
                     if (typeof data === "string") {
                       data = JSON.parse(data);
                     }
+                    visualConsole.updateElement(data);
 
                     visualConsole.elementsById[id].meta = {
                       ...visualConsole.elementsById[id].meta,
-                      isUpdating: true
+                      isUpdating: false
                     };
 
-                    // visualConsole.elementsById[id].elementRef.innerHTML +=
-                    //   "<div class = holas>";
-
-                    visualConsole.updateElement(data);
-
                     done();
                   });
 
diff --git a/visual_console_client/src/Item.ts b/visual_console_client/src/Item.ts
index 9d00060311..7004bb5d8a 100644
--- a/visual_console_client/src/Item.ts
+++ b/visual_console_client/src/Item.ts
@@ -639,8 +639,25 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
     if (!prevMeta || prevMeta.isUpdating !== this.meta.isUpdating) {
       if (this.meta.isUpdating) {
         this.elementRef.classList.add("is-updating");
+
+        const divParent = document.createElement("div");
+        divParent.className = "div-visual-console-spinner";
+        const divSpinner = document.createElement("div");
+        divSpinner.className = "visual-console-spinner";
+        divParent.appendChild(divSpinner);
+        this.elementRef.appendChild(divParent);
       } else {
         this.elementRef.classList.remove("is-updating");
+
+        const div = this.elementRef.querySelector(
+          ".div-visual-console-spinner"
+        );
+        if (div !== null) {
+          const parent = div.parentElement;
+          if (parent !== null) {
+            parent.removeChild(div);
+          }
+        }
       }
     }
   }
diff --git a/visual_console_client/src/items/ModuleGraph.ts b/visual_console_client/src/items/ModuleGraph.ts
index 1aa9b623fa..58c33a35b8 100644
--- a/visual_console_client/src/items/ModuleGraph.ts
+++ b/visual_console_client/src/items/ModuleGraph.ts
@@ -46,27 +46,6 @@ export function moduleGraphPropsDecoder(
 }
 
 export default class ModuleGraph extends Item<ModuleGraphProps> {
-  /**
-   * @override Item.resizeElement.
-   * Resize the DOM content container.
-   * We need to override the resize function cause this item's height
-   * is larger than the configured and the graph is over the label.
-   * @param width
-   * @param height
-   */
-  protected resizeElement(width: number): void {
-    super.resizeElement(width, 0);
-  }
-
-  /**
-   * @override Item.initResizementListener. To disable the functionality.
-   * Start the resizement funtionality.
-   * @param element Element to move inside its container.
-   */
-  protected initResizementListener(): void {
-    // No-Op. Disable the resizement functionality for this item.
-  }
-
   protected createDomElement(): HTMLElement {
     const element = document.createElement("div");
     element.className = "module-graph";
diff --git a/visual_console_client/src/main.css b/visual_console_client/src/main.css
index c69a486c8f..763a196665 100644
--- a/visual_console_client/src/main.css
+++ b/visual_console_client/src/main.css
@@ -32,3 +32,41 @@
   background: url(./resize-handle.svg);
   cursor: se-resize;
 }
+
+.visual-console-spinner,
+.visual-console-spinner :after {
+  display: block;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+.visual-console-spinner {
+  background-color: transparent;
+  margin: 0px auto;
+  border-top: 5px solid rgb(82, 85, 87);
+  border-right: 5px solid rgb(82, 85, 87);
+  border-bottom: 5px solid rgb(82, 85, 87);
+  border-left: 5px solid rgba(82, 85, 87, 0.2);
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-duration: 0.8s;
+  animation-name: spinner-loading;
+}
+@keyframes spinner-loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.div-visual-console-spinner {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  opacity: 0.7;
+  background: rgb(212, 215, 218);
+}