Added loader for long bakes and improved initial loading sequence

src/web/stylesheets/layout/_io.css

@@ -22,8 +22,6 @@
     background-color: transparent;
     white-space: pre-wrap;
     word-wrap: break-word;
-
-    transition: all 0.5s ease;
 }
 
 #output-html {
@@ -65,6 +63,20 @@
     border: none;
 }
 
+#output-loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    background-color: var(--primary-background-colour);
+    visibility: hidden;
+    opacity: 0; 
+
+    transition: all 0.5s ease;
+}
+
 .io-btn-group {
     float: right;
     margin-top: -4px;
@@ -89,23 +101,3 @@
 .dropping-file {
     border: 5px dashed var(--drop-file-border-colour) !important;
 }
-
-@keyframes spinner {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(359deg);
-    }
-}
-
-.loading-icon::before {
-    content: "\21bb";
-}
-
-.loading-icon {
-    animation-name: spinner;
-    animation-duration: 1000ms;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-}