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

src/web/stylesheets/preloader.css

@@ -16,7 +16,7 @@
     background-color: var(--secondary-border-colour);
 }
 
-#preloader {
+.loader {
     display: block;
     position: relative;
     left: 50%;
@@ -28,20 +28,19 @@
     border: 3px solid transparent;
     border-top-color: #3498db;
     border-radius: 50%;
-    z-index: 1500;
 
     animation: spin 2s linear infinite;
 }
 
-#preloader:before,
-#preloader:after {
+.loader:before,
+.loader:after {
     content: "";
     position: absolute;
     border: 3px solid transparent;
     border-radius: 50%;
 }
 
-#preloader:before {
+.loader:before {
     top: 5px;
     left: 5px;
     right: 5px;
@@ -50,7 +49,7 @@
     animation: spin 3s linear infinite;
 }
 
-#preloader:after {
+.loader:after {
     top: 13px;
     left: 13px;
     right: 13px;
@@ -77,7 +76,6 @@
 
 
 /* Loaded */
-.loaded #preloader,
 .loaded #preloader-msg {
     opacity: 0;
     transition: all 0.3s ease-out;