From ad1eaa52108e383469a8ada174953522f2a85e3c Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Wed, 28 Jul 2021 15:52:44 -0400
Subject: [PATCH] fix: Jank at beginning of loading indicator bar

---
 app/components/LoadingIndicator/LoadingIndicatorBar.js | 8 +++-----
 shared/theme.js                                        | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/components/LoadingIndicator/LoadingIndicatorBar.js b/app/components/LoadingIndicator/LoadingIndicatorBar.js
index 87c2f7aa2..e8fe70d95 100644
--- a/app/components/LoadingIndicator/LoadingIndicatorBar.js
+++ b/app/components/LoadingIndicator/LoadingIndicatorBar.js
@@ -11,16 +11,14 @@ const LoadingIndicatorBar = () => {
 };
 
 const loadingFrame = keyframes`
-  from {margin-left: -100%; z-index:100;}
-  to {margin-left: 100%; }
+  from { margin-left: -100%; }
+  to { margin-left: 100%; }
 `;
 
 const Container = styled.div`
   position: fixed;
   top: 0;
   z-index: ${(props) => props.theme.depths.loadingIndicatorBar};
-
-  background-color: #03a9f4;
   width: 100%;
   animation: ${loadingFrame} 4s ease-in-out infinite;
   animation-delay: 250ms;
@@ -30,7 +28,7 @@ const Container = styled.div`
 const Loader = styled.div`
   width: 100%;
   height: 2px;
-  background-color: #03a9f4;
+  background-color: ${(props) => props.theme.primary};
 `;
 
 export default LoadingIndicatorBar;
diff --git a/shared/theme.js b/shared/theme.js
index 496f2e42e..0095b7201 100644
--- a/shared/theme.js
+++ b/shared/theme.js
@@ -118,9 +118,9 @@ export const base = {
     modal: 3000,
     menu: 4000,
     toasts: 5000,
-    loadingIndicatorBar: 6000,
     popover: 9000,
     titleBarDivider: 10000,
+    loadingIndicatorBar: 20000,
   },
 };