From 75159ae68785366e8049def54f4309cc0e95f2de Mon Sep 17 00:00:00 2001
From: Konrad Borowski <konrad@borowski.pw>
Date: Mon, 23 Dec 2019 10:31:41 +0100
Subject: [PATCH] Implement a spinner

---
 js/views/editor/editor.ts   | 11 ++++-------
 js/views/editor/output.ts   | 10 +++++++++-
 js/views/editor/spinner.css | 18 ++++++++++++++++++
 3 files changed, 31 insertions(+), 8 deletions(-)
 create mode 100644 js/views/editor/spinner.css

diff --git a/js/views/editor/editor.ts b/js/views/editor/editor.ts
index c9162eb..3c806a3 100644
--- a/js/views/editor/editor.ts
+++ b/js/views/editor/editor.ts
@@ -100,7 +100,8 @@ class Editor {
     }
 
     changeToLookLikeNewPaste() {
-        this.clearOutput()
+        this.output.clear()
+        this.editor.update()
         if (this.autodeleteText) {
             this.autodeleteText.style.display = 'none'
         }
@@ -142,7 +143,8 @@ class Editor {
     }
 
     async run(wrapper, compilerOptions) {
-        this.clearOutput()
+        this.output.spin()
+        this.editor.update()
         if (this.abortEval) {
             this.abortEval.abort()
         }
@@ -180,11 +182,6 @@ class Editor {
         this.output.display(wrapper, response)
         this.editor.update()
     }
-
-    clearOutput() {
-        this.output.clear()
-        this.editor.update()
-    }
 }
 
 export default function createEditor(form) {
diff --git a/js/views/editor/output.ts b/js/views/editor/output.ts
index da50498..28b64f8 100644
--- a/js/views/editor/output.ts
+++ b/js/views/editor/output.ts
@@ -1,5 +1,5 @@
+import './spinner.css'
 import { Wrapper } from './types'
-import { SplitChunksPlugin } from 'webpack'
 
 const filterRegex = /(?:\t\.(?:text|file|section|globl|p2align|type|cfi_.*|size|section)\b|.Lfunc_end).*\n?/g
 
@@ -46,6 +46,14 @@ export default class Output {
         this.update()
     }
 
+    spin() {
+        this.output.textContent = ''
+        const spinner = document.createElement('div')
+        spinner.className = 'spinner'
+        this.output.append(spinner)
+        this.split.append(this.outputContainer)
+    }
+
     update() {
         const { stdout, stderr, status } = this.json
         this.clear()
diff --git a/js/views/editor/spinner.css b/js/views/editor/spinner.css
new file mode 100644
index 0000000..a2eae0c
--- /dev/null
+++ b/js/views/editor/spinner.css
@@ -0,0 +1,18 @@
+@keyframes spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.spinner {
+    animation: 1s linear infinite spinner;
+    border: solid 3px #f5f2f0;
+    border-bottom-color: #c7c75c;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+}