editor: show progress bar while opening huge styles

edit/edit.css

@@ -2,6 +2,23 @@ body {
   margin: 0;
   font: 12px arial,sans-serif;
 }
+
+#global-progress {
+  position: fixed;
+  height: 4px;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: hsla(180, 66%, 36%, .25);
+  border-left: 0 solid darkcyan;
+  z-index: 2147483647;
+  opacity: 0;
+  transition: opacity 2s;
+}
+#global-progress[title] {
+  opacity: 1;
+}
+
 /************ header ************/
 #header {
   width: 280px;

edit/edit.js

@@ -1300,6 +1300,11 @@ function initWithStyle({style, codeIsUpdated}) {
     if (queue.length) {
       add();
       setTimeout(processQueue);
+      if (performance.now() - t0 > 500) {
+        setGlobalProgress(editors.length, style.sections.length);
+      }
+    } else {
+      setGlobalProgress();
     }
   })();
   initHooks();
@@ -2164,3 +2169,17 @@ function getCodeMirrorThemes() {
     });
   });
 }
+
+function setGlobalProgress(done, total) {
+  const progressElement = $('#global-progress') ||
+    total && document.body.appendChild($element({id: 'global-progress'}));
+  if (total) {
+    const progress = (done / Math.max(done, total) * 100).toFixed(1);
+    progressElement.style.borderLeftWidth = progress + 'vw';
+    setTimeout(() => {
+      progressElement.title = progress + '%';
+    });
+  } else if (progressElement) {
+    progressElement.remove();
+  }
+}