fix(PREP): Fixed animation always running on admin panel

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

@@ -0,0 +1,5 @@
+{
+    "conventionalCommits.scopes": [
+        "PREP"
+    ]
+}

PPR banner.css

@@ -2,20 +2,30 @@
 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: repeating-linear-gradient(-45deg, var(--color2) 25%, var(--color2) 50%, 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;
     }
+    .PageTop>.navbar:not(:only-child) {
+        --state: running;
+    }
+    .PageTop>.Loader {
+        visibility: hidden;
+        animation: none;
+        --state: paused;
+    }
     @keyframes alkegrad {
         from {
             background-position: 0 0;