Loading blinking message is added

Author: AlexeiShmidman

css/editor.css

@@ -1,48 +1,75 @@
 ul {
-    list-style-type: none;
-    padding-inline-start: 2em;
+  list-style-type: none;
+  padding-inline-start: 2em;
 }
 
 .collapsed-list {
-    display: none;
+  display: none;
 }
+
 .single::before {
-    user-select: none;
-    content: "\25B6";
-    color: transparent;
-    display: inline-block;
-    margin-right: 6px;
+  user-select: none;
+  content: "\25B6";
+  color: transparent;
+  display: inline-block;
+  margin-right: 6px;
 }
 
 .collapsed::before {
-    cursor: pointer;
-    -webkit-user-select: none;
-    /* Safari 3.1+ */
-    -moz-user-select: none;
-    /* Firefox 2+ */
-    -ms-user-select: none;
-    /* IE 10+ */
-    user-select: none;
-    content: "\25B6";
-    display: inline-block;
-    margin-right: 6px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  /* Safari 3.1+ */
+  -moz-user-select: none;
+  /* Firefox 2+ */
+  -ms-user-select: none;
+  /* IE 10+ */
+  user-select: none;
+  content: "\25B6";
+  display: inline-block;
+  margin-right: 6px;
 }
 
 .expanded::before {
-    cursor: pointer;
-    content: "\25B6";
-    -webkit-user-select: none;
-    /* Safari 3.1+ */
-    -moz-user-select: none;
-    /* Firefox 2+ */
-    -ms-user-select: none;
-    /* IE 10+ */
-    user-select: none;
-    display: inline-block;
-    margin-right: 6px;
-    -ms-transform: rotate(90deg);
-    /* IE 9 */
-    -webkit-transform: rotate(90deg);
-    /* Safari */
-    transform: rotate(90deg);
+  cursor: pointer;
+  content: "\25B6";
+  -webkit-user-select: none;
+  /* Safari 3.1+ */
+  -moz-user-select: none;
+  /* Firefox 2+ */
+  -ms-user-select: none;
+  /* IE 10+ */
+  user-select: none;
+  display: inline-block;
+  margin-right: 6px;
+  -ms-transform: rotate(90deg);
+  /* IE 9 */
+  -webkit-transform: rotate(90deg);
+  /* Safari */
+  transform: rotate(90deg);
+}
+
+.loading {
+  animation: loadingAnimation 5s infinite;
+}
+
+@keyframes loadingAnimation {
+  0% {
+    color: inherit;
+  }
+
+  25% {
+    color: transparent;
+  }
+
+  50% {
+    color: inherit;
+  }
+
+  75% {
+    color: transparent;
+  }
+
+  100% {
+    color: inherit;
+  }
 }

js/editor.js

@@ -23,6 +23,7 @@ function onWindowMessageHandler (event) {
         }
         case 'listModules': {
             clearModules();
+            loadingOff();
             listModules(message);
             break;
         }
@@ -41,6 +42,7 @@ function onBrowseWorkspaceHandler () {
 
 function onLoadModulesHandler () {
     const sourceLocation = document.getElementById("workspaceLocation").value;
+    loadingOn();
     vscode.postMessage({
         command: 'loadModules',
         source: sourceLocation
@@ -186,3 +188,12 @@ function buildNode (cboxNode) {
     };
     return module;
 }
+
+function loadingOn () {
+    $("div#moduleList").before('<div id="loadingWindow"><span class="loading">Loading modules ...</span></div>');
+}
+
+function loadingOff () {
+    $("div#loadingWindow").remove();
+
+}

src/editor.ts

@@ -42,6 +42,16 @@ export function handleMessages(extCtx: vscode.ExtensionContext, webPanel: vscode
     }
 }
 
+function postLocation(fileUri: vscode.Uri[] | undefined, webPanel: vscode.WebviewPanel, command: string) {
+    if (fileUri && fileUri[0]) {
+        // vscode.window.showInformationMessage('Selected root ' + fileUri[0].fsPath);
+        webPanel.webview.postMessage({
+            command: command,
+            data: fileUri[0].fsPath
+        });
+    }
+}
+
 export function getWebviewContent(panel: vscode.WebviewPanel, extCtx: vscode.ExtensionContext): string {
     const jQueryOnDiskPath = vscode.Uri.file(path.join(extCtx.extensionPath, '/js/jquery.js'));
     const jQuerySrc: vscode.Uri = panel.webview.asWebviewUri(jQueryOnDiskPath);
@@ -84,13 +94,3 @@ export function getWebviewContent(panel: vscode.WebviewPanel, extCtx: vscode.Ext
     </html>
     `;
 }
-
-function postLocation(fileUri: vscode.Uri[] | undefined, webPanel: vscode.WebviewPanel, command: string) {
-    if (fileUri && fileUri[0]) {
-        // vscode.window.showInformationMessage('Selected root ' + fileUri[0].fsPath);
-        webPanel.webview.postMessage({
-            command: command,
-            data: fileUri[0].fsPath
-        });
-    }
-}