Merge pull request #44 from guicassolato/running-image

Animated 'loading' image while running commands in a separate shell in the background
guicassolato · Feb 15, 2023 · 2d7daed · 2d7daed
2 parents 3dc6438 + 183b56d
commit 2d7daed
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,8 @@ This file is structured according to the [Keep a Changelog](http://keepachangelo
 
 ## [Unreleased]
 
+- Animated 'loading' image while running commands in a separate shell in the background
+
 ## [v0.6.0] - 2022-01-10
 
 ### Changed

diff --git a/media/main.js b/media/main.js
@@ -21,6 +21,19 @@
     //connect to the vscode api
     const vscode = acquireVsCodeApi();
 
+    const updateOutputPanel = (id, html) => {
+      const panel = document.getElementById(`${id}-out`);
+      if (panel) {
+        panel.innerHTML = html;
+        return;
+      }
+      const target = document.getElementById(id);
+      if (!target) {
+        return;
+      }
+      target.insertAdjacentHTML('afterend', `<p>Output:</p><div class="tothom-code-output" id="${id}-out">${html}</div>`);
+    };
+
     document.body.addEventListener('click', event => {
       const node = event && event.target;
       while (node) {
@@ -49,19 +62,11 @@
       const message = event.data; // The JSON data our extension sent
 
       switch (message.command) {
+        case 'tothom.showRunning':
+          updateOutputPanel(message.data.codeId, `<img src="${document.body.dataset.running}" alt="Running" class="running">`);
+          break;
         case 'tothom.terminalOutput':
-          const id = message.data.codeId;
-          const el = document.getElementById(id);
-          if (!el) {
-            return;
-          }
-          const out = document.getElementById(`${id}-out`);
-          const html = `<code>${message.data.text}</code>`;
-          if (out) {
-            out.innerHTML = html;
-          } else {
-            el.insertAdjacentHTML('afterend', `<p>Output:</p><pre class="tothom-code-output" id="${id}-out">${html}</pre>`);
-          }
+          updateOutputPanel(message.data.codeId, `<pre><code>${message.data.text}</code></pre>`);
           break;
       }
     });

diff --git a/media/running.gif b/media/running.gif
diff --git a/media/tothom.css b/media/tothom.css
@@ -17,3 +17,7 @@
 .tothom-body pre a.tothom-code-action:hover {
   color: var(--color-accent-fg);
 }
+
+.tothom-body img.running {
+  width: 1.5em;
+}
diff --git a/samples/tothom.md b/samples/tothom.md
@@ -6,6 +6,7 @@
   - [Interpolation](#interpolation)
   - [Multiline](#multiline)
   - [Carrying values](#carrying-values)
+  - [Loading](#loading)
 - [Compatibility](#compatibility)
   - [Formatting](#formatting)
   - [Attributes](#attributes)
@@ -71,6 +72,13 @@ echo "Time was: $TIME\nTime now is: $(date)"
 unset TIME
 ```
 
+### Loading
+
+```sh
+sleep 3
+echo 'Done.'
+```
+
 ## Compatibility
 
 ### Formatting

diff --git a/src/tothom.ts b/src/tothom.ts
@@ -190,7 +190,7 @@ export class Tothom {
       ${baseTag}
       <script defer="true" src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
     </head>
-    <body class="tothom-body ${colorScheme}" data-uri="${uri}">
+    <body class="tothom-body ${colorScheme}" data-uri="${uri}" data-running="${this.mediaFilePath(webview, 'running.gif')}">
       <div class="tothom-content">
         ${htmlContent}
       </div>
@@ -300,6 +300,12 @@ export class Tothom {
       commandWithEnv += `\nenv > ${envFile}`;
     }
 
+    preview.panel.webview.postMessage({
+      uri: uri.fsPath,
+      command: 'tothom.showRunning',
+      data: { codeId: codeId }
+    });
+
     exec(commandWithEnv, { encoding: "utf8", cwd: workspaceRoot }, callback);
   };