Loading animation add, incorrect class reference fix

Author: nikitaeverywhere

package.json

@@ -2,7 +2,7 @@
   "name": "cache-visual-editor",
   "printableName": "Cache Visual Editor",
   "packageName": "VisualEditor",
-  "version": "0.9.9",
+  "version": "0.9.10",
   "description": "Visual class editor for InterSystems Caché",
   "main": "index.js",
   "keywords": [

source/cache/REST/Content.cls

@@ -23,7 +23,7 @@ ClassMethod PrintXData(XDataName as %String = "") As %Status [ Private ]
         return $$$OK
     }
 
-    do ##class(VisualEditor.REST.StaticContent).PrintContent(xdata)
+    do ..PrintContent(xdata)
     return $$$OK
 }
 

source/client/js/classEditor/index.js

@@ -6,6 +6,7 @@ import { saveChanges } from "./changes";
 import { Toast } from "../toast";
 import { addChange } from "./changes";
 import { init as initTerminal } from "./modules/terminal";
+import { showLoader, hideLoader } from "./loader";
 
 var PATH = "",
     INITIALIZED = false,
@@ -311,15 +312,22 @@ export function loadLevel (level) {
 
     setURLHashParameter("level", PATH || undefined);
 
+    showLoader();
+
     getList(NAMESPACE, PATH, (data) => {
+
         grid.clear();
         CLASSES_RENDERED = {};
         if (PATH !== "")
             backButton.style.display = "";
+
         data = orderData(data);
         for (let obj in data) {
             grid.applyChild(applyClass(data[obj]));
         }
+
+        hideLoader();
+
     });
 
 }

source/client/js/classEditor/loader.js

@@ -0,0 +1,36 @@
+import { block } from "../domUtils";
+
+let loader = null;
+
+/**
+ * Returns loader animated element markup.
+ * @returns {HTMLElement}
+ */
+function getLoaderElement () {
+    let b = block(`div`, `loader`),
+        b1 = block(`div`, `inner one`),
+        b2 = block(`div`, `inner two`),
+        b3 = block(`div`, `inner three`);
+    b.appendChild(b1);
+    b.appendChild(b2);
+    b.appendChild(b3);
+    return b;
+}
+
+export function showLoader () {
+    
+    if (loader)
+        return;
+    
+    document.body.appendChild(loader = getLoaderElement());
+    
+}
+
+export function hideLoader () {
+    
+    if (loader && loader.parentNode)
+        loader.parentNode.removeChild(loader);
+    
+    loader = null;
+    
+}

source/client/scss/domUtils.scss

@@ -3,4 +3,76 @@
 
 .inline-input {
     @include transition($defaultTransition);
+}
+
+.loader {
+
+    position: fixed;
+    top: calc(50% - 32px);
+    left: calc(50% - 32px);
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    perspective: 800px;
+    z-index: $zIndexTop + 10;
+
+    > .inner {
+
+        position: absolute;
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        box-shadow: 0 0 3px $colorFront;
+
+        &.one {
+            left: 0;
+            top: 0;
+            animation: rotate-one 1s linear infinite;
+            border-bottom: 3px solid $colorP2;
+        }
+
+        &.two {
+            right: 0;
+            top: 0;
+            animation: rotate-two 1s linear infinite;
+            border-right: 3px solid $colorP3;
+        }
+
+        &.three {
+            right: 0;
+            bottom: 0;
+            animation: rotate-three 1s linear infinite;
+            border-top: 3px solid $colorP4;
+        }
+
+    }
+
+}
+
+@include keyframes(rotate-one) {
+    0% {
+        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
+    }
+    100% {
+        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
+    }
+}
+
+@include keyframes(rotate-two) {
+    0% {
+        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
+    }
+    100% {
+        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
+    }
+}
+
+@include keyframes(rotate-three) {
+    0% {
+        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
+    }
+    100% {
+        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
+    }
 }