From ea277bcf4c42ff99a23755d97d347b9e0904ce90 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Fri, 24 Nov 2017 20:27:09 +0300
Subject: [PATCH] show a spinner on usercss install page while fetching code

---
 install-usercss/install-usercss.css | 218 +++++++++++++++++++++++++++-
 install-usercss/install-usercss.js  |  12 ++
 2 files changed, 225 insertions(+), 5 deletions(-)

diff --git a/install-usercss/install-usercss.css b/install-usercss/install-usercss.css
index cfb941cf..7f3a6534 100644
--- a/install-usercss/install-usercss.css
+++ b/install-usercss/install-usercss.css
@@ -44,10 +44,6 @@ svg.icon {
   z-index: 100;
 }
 
-.header:not(.meta-init) {
-  visibility: hidden;
-}
-
 .header.meta-init-error {
   display: none;
 }
@@ -79,7 +75,7 @@ svg.icon {
   font-size: 80%;
 }
 
-.header > :first-child {
+h1 {
   margin-top: 0;
 }
 
@@ -139,6 +135,218 @@ li {
   border: none;
 }
 
+/* spinner-related */
+
+.header {
+  position: relative;
+}
+
+.header:not(.meta-init) > *:not(.lds-spinner),
+.header.meta-init > .lds-spinner {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.header.meta-init > * {
+  opacity: 1;
+  transition: opacity .5s;
+  -webkit-user-select: auto;
+  -moz-user-select: auto;
+  -ms-user-select: auto;
+  user-select: auto;
+}
+
+/* spinner: https://github.com/loadingio/css-spinner */
+
+@keyframes lds-spinner {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-webkit-keyframes lds-spinner {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.lds-spinner {
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  top: 50px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  opacity: .2;
+  transition: opacity .5s;
+}
+.lds-spinner div {
+  left: 94px;
+  top: 23px;
+  position: absolute;
+  -webkit-animation: lds-spinner linear 1s infinite;
+  animation: lds-spinner linear 1s infinite;
+  background: currentColor;
+  width: 12px;
+  height: 34px;
+  border-radius: 20%;
+  -webkit-transform-origin: 6px 77px;
+  transform-origin: 6px 77px;
+}
+.lds-spinner div:nth-child(1) {
+  -webkit-transform: rotate(0deg);
+  transform: rotate(0deg);
+  -webkit-animation-delay: -0.916666666666667s;
+  animation-delay: -0.916666666666667s;
+}
+.lds-spinner div:nth-child(2) {
+  -webkit-transform: rotate(30deg);
+  transform: rotate(30deg);
+  -webkit-animation-delay: -0.833333333333333s;
+  animation-delay: -0.833333333333333s;
+}
+.lds-spinner div:nth-child(3) {
+  -webkit-transform: rotate(60deg);
+  transform: rotate(60deg);
+  -webkit-animation-delay: -0.75s;
+  animation-delay: -0.75s;
+}
+.lds-spinner div:nth-child(4) {
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
+  -webkit-animation-delay: -0.666666666666667s;
+  animation-delay: -0.666666666666667s;
+}
+.lds-spinner div:nth-child(5) {
+  -webkit-transform: rotate(120deg);
+  transform: rotate(120deg);
+  -webkit-animation-delay: -0.583333333333333s;
+  animation-delay: -0.583333333333333s;
+}
+.lds-spinner div:nth-child(6) {
+  -webkit-transform: rotate(150deg);
+  transform: rotate(150deg);
+  -webkit-animation-delay: -0.5s;
+  animation-delay: -0.5s;
+}
+.lds-spinner div:nth-child(7) {
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+  -webkit-animation-delay: -0.416666666666667s;
+  animation-delay: -0.416666666666667s;
+}
+.lds-spinner div:nth-child(8) {
+  -webkit-transform: rotate(210deg);
+  transform: rotate(210deg);
+  -webkit-animation-delay: -0.333333333333333s;
+  animation-delay: -0.333333333333333s;
+}
+.lds-spinner div:nth-child(9) {
+  -webkit-transform: rotate(240deg);
+  transform: rotate(240deg);
+  -webkit-animation-delay: -0.25s;
+  animation-delay: -0.25s;
+}
+.lds-spinner div:nth-child(10) {
+  -webkit-transform: rotate(270deg);
+  transform: rotate(270deg);
+  -webkit-animation-delay: -0.166666666666667s;
+  animation-delay: -0.166666666666667s;
+}
+.lds-spinner div:nth-child(11) {
+  -webkit-transform: rotate(300deg);
+  transform: rotate(300deg);
+  -webkit-animation-delay: -0.083333333333333s;
+  animation-delay: -0.083333333333333s;
+}
+.lds-spinner div:nth-child(12) {
+  -webkit-transform: rotate(330deg);
+  transform: rotate(330deg);
+  -webkit-animation-delay: 0s;
+  animation-delay: 0s;
+}
+
+/* https://github.com/lukehaas/css-loaders */
+/*
+.spinner {
+  --color: currentColor;
+  --background-color: currentColor;
+  font-size: 10px;
+  margin: 50px auto;
+  text-indent: -9999em;
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  background: #ffffff;
+  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+  position: relative;
+  -webkit-animation: load3 1.4s infinite linear;
+  animation: load3 1.4s infinite linear;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+}
+
+.spinner:before {
+  width: 50%;
+  height: 50%;
+  background: #ffffff;
+  border-radius: 100% 0 0 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: '';
+}
+
+.spinner:after {
+  background: #0dc5c1;
+  width: 75%;
+  height: 75%;
+  border-radius: 50%;
+  content: '';
+  margin: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+*/
+
+@-webkit-keyframes load3 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load3 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
 /************ reponsive layouts ************/
 
 @media (max-width:10in) {
diff --git a/install-usercss/install-usercss.js b/install-usercss/install-usercss.js
index fbfc3a73..d1abbf74 100644
--- a/install-usercss/install-usercss.js
+++ b/install-usercss/install-usercss.js
@@ -41,6 +41,16 @@
   let liveReloadPending = Promise.resolve();
   window.addEventListener('resize', adjustCodeHeight);
 
+  setTimeout(() => {
+    if (!installed) {
+      const div = $element({});
+      $('.header').appendChild($element({
+        className: 'lds-spinner',
+        appendChild: new Array(12).fill(div).map(e => e.cloneNode()),
+      }));
+    }
+  }, 200);
+
   function liveReloadUpdate(sourceCode) {
     liveReloadPending = liveReloadPending.then(() => {
       const scrollInfo = cm.getScrollInfo();
@@ -100,6 +110,8 @@
 
     $('.header').classList.add('meta-init');
     $('.header').classList.remove('meta-init-error');
+    setTimeout(() => $('.lds-spinner').remove(), 1000);
+
     showError('');
     requestAnimationFrame(adjustCodeHeight);