From 1a8eea24cfda8e40a8e00a32dd727ec37777418f Mon Sep 17 00:00:00 2001
From: djmaze <djmaze@djmaze.lan>
Date: Tue, 20 Apr 2021 13:41:51 +0200
Subject: [PATCH] Improve non-composited animation

---
 dev/Styles/_progressjs.css                  | 22 ++++++---------------
 dev/boot.js                                 |  9 ++++-----
 snappymail/v/0.0.0/app/templates/Index.html |  2 +-
 3 files changed, 11 insertions(+), 22 deletions(-)

diff --git a/dev/Styles/_progressjs.css b/dev/Styles/_progressjs.css
index 152d1a519..d1f704ce4 100644
--- a/dev/Styles/_progressjs.css
+++ b/dev/Styles/_progressjs.css
@@ -1,30 +1,20 @@
 #progressjs {
+	background-color: #999;
 	left: 0;
+	overflow: hidden;
 	position: fixed;
 	top: 0;
-	width: 100%;
-	z-index: 2000;
-}
-
-.progressjs-inner {
-	background-color: #939595;
-	height: 3px;
-	overflow: hidden;
-	position: relative;
 	transition: width .5s;
 	width: 0;
 	z-index: 2000;
 }
 
-.progressjs-percent {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: -32px;
-	bottom: 0;
+#progressjs > div {
+	animation: simple-pace-stripe-animation 500ms linear infinite;
 	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
 	background-size: 32px 32px;
-	animation: simple-pace-stripe-animation 500ms linear infinite;
+	height: 3px;
+	margin-right: -32px;
 }
 
 @keyframes simple-pace-stripe-animation {
diff --git a/dev/boot.js b/dev/boot.js
index 3f988daf2..b5ba17185 100644
--- a/dev/boot.js
+++ b/dev/boot.js
@@ -72,11 +72,11 @@ const
 	p = win.progressJs = {
 		set: percent => progress.style.width = Math.min(percent, 100) + '%',
 		end: () => {
-			if (container) {
+			if (progress) {
 				p.set(100);
 				setTimeout(() => {
-					container.remove();
-					container = progress = null;
+					progress.remove();
+					progress = null;
 				}, 600);
 			}
 		}
@@ -90,8 +90,7 @@ const layout = getCookie('rllayout');
 doc.documentElement.classList.toggle('rl-mobile', 'mobile' === layout || (!layout && 1000 > innerWidth));
 
 let pStep = 0,
-	container = eId('progressjs'),
-	progress = container.querySelector('.progressjs-inner'),
+	progress = eId('progressjs'),
 
 	RL_APP_DATA = {};
 
diff --git a/snappymail/v/0.0.0/app/templates/Index.html b/snappymail/v/0.0.0/app/templates/Index.html
index d8c64941f..c2b494316 100644
--- a/snappymail/v/0.0.0/app/templates/Index.html
+++ b/snappymail/v/0.0.0/app/templates/Index.html
@@ -41,7 +41,7 @@
 		</div>
 		<div id="rl-templates"></div>
 	</div>
-	<div id="progressjs"><div class="progressjs-inner"><div class="progressjs-percent"></div></div></div>
+	<div id="progressjs"><div></div></div>
 	<script type="text/javascript">{{BaseAppBootScript}}</script>
 </body>