From 86ebca5e1a39b3bdebf5f799784a62bca1f33ce3 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Fri, 1 Sep 2017 00:52:38 +0300
Subject: [PATCH] editor: show progress bar while opening huge styles

---
 edit/edit.css | 17 +++++++++++++++++
 edit/edit.js  | 19 +++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/edit/edit.css b/edit/edit.css
index 5e54a2b1..27b669ed 100644
--- a/edit/edit.css
+++ b/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;
diff --git a/edit/edit.js b/edit/edit.js
index 9b25a902..b1a99462 100644
--- a/edit/edit.js
+++ b/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();
+  }
+}