diff --git a/pandora_console/include/javascript/pandora_visual_console.js b/pandora_console/include/javascript/pandora_visual_console.js
index b515ab01cb..289fc66ba9 100755
--- a/pandora_console/include/javascript/pandora_visual_console.js
+++ b/pandora_console/include/javascript/pandora_visual_console.js
@@ -229,8 +229,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) {
@@ -248,6 +253,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);
}
@@ -266,22 +276,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 +=
- // "
";
-
- visualConsole.updateElement(data);
-
done();
});
diff --git a/visual_console_client/src/Item.ts b/visual_console_client/src/Item.ts
index caf2c139d7..f74c80f25c 100644
--- a/visual_console_client/src/Item.ts
+++ b/visual_console_client/src/Item.ts
@@ -708,8 +708,25 @@ abstract class VisualConsoleItem
{
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);
+ }
+ }
}
}
if (!prevMeta || prevMeta.isSelected !== this.meta.isSelected) {
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 {
- /**
- * @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 b0d7a16295..2ccce47baf 100644
--- a/visual_console_client/src/main.css
+++ b/visual_console_client/src/main.css
@@ -22,6 +22,9 @@
user-select: none;
}
+.visual-console-item.is-editing.is-selected {
+ border: 2px dashed #2b2b2b;
+}
.visual-console-item.is-editing > .resize-draggable {
float: right;
position: absolute;
@@ -33,9 +36,41 @@
cursor: se-resize;
}
-.visual-console-item.is-editing.is-selected {
- border: 2px dashed #2b2b2b;
- transform: translateX(-2px) translateY(-2px);
- cursor: move;
- user-select: none;
+.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-name: spinner-loading;
+ animation-duration: 0.8s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+}
+@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);
}