Merge branch 'spinner' into 'master'

Implement a spinner

See merge request pastebin.run/server!95

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) {

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()

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;
+}