From 99b4f505b17c78363d3323129b7a544335dacb83 Mon Sep 17 00:00:00 2001
From: scar <91326008+alk-spriet@users.noreply.github.com>
Date: Thu, 7 Apr 2022 21:07:53 +0200
Subject: [PATCH] feat(PREP): Strip now only animate during loading times

Strips are suspended while ilde and will animate when the loading animation is triggered.

Animations are saccaded when the browser is too busy updating the DOM with the fetched items
---
 .vscode/settings.json |  5 +++++
 PPR banner.css        | 17 +++++++++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..529b068
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "conventionalCommits.scopes": [
+        "PREP"
+    ]
+}
\ No newline at end of file
diff --git a/PPR banner.css b/PPR banner.css
index cd72f08..b2821bf 100644
--- a/PPR banner.css	
+++ b/PPR banner.css	
@@ -2,20 +2,29 @@
 domain("ppr-admin.alkemics.com") {
      :root {
         --stripe-size: 100px;
-        --color1: hsl(194, 71%, 30%);
-        --color2: hsl(194, 77%, 35%);
-        --duration: 20s;
+        --color1: hsla(194, 71%, 30%, 1);
+        --color2: hsla(194, 77%, 35%, 1);
+        --duration: 1s;
+        --state: paused;
     }
     .AuthLayoutFooter,
     .Navbar.navbar.Navbar--PPR.bg-inverse {
         background: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color1) 50%, var(--color1) 75%);
+        background-color: var(--color1);
         background-size: var(--stripe-size) var(--stripe-size);
-        animation: alkegrad var(--duration) linear infinite;
+        animation: alkegrad var(--duration) linear 0s infinite normal var(--state);
     }
     .AuthLayoutFooter {
         --stripe-size: 200px;
         --duration: 40s;
     }
+    .navbar:not(:only-child) {
+        --state: running;
+    }
+    .PageTop>.Loader {
+        visibility: hidden;
+        animation: none;
+    }
     @keyframes alkegrad {
         from {
             background-position: 0 0;