refactor: fix css animations and restructure css classes

ui/apps/dashboard/components/Art.scss

@@ -1,6 +1,7 @@
 @import "../../../styles/mixins";
 @import "../../../styles/vars";
 @import "../../../styles/artwork";
+
 .art-wrapper {
     position: absolute;
     top: 50%;
@@ -8,25 +9,7 @@
     transform: translate(-50%, -125%);
     transition: left 500ms, transform 500ms;
     z-index: -1;
-
+    .art {
-    &.done {
-        top: 50%;
-        left: -35em;
-        transform: translate(0, -50%);
-    }
-}
-
-.art-rotate {
-    transform: rotate(-180deg);
-    animation: 5000ms rotate;
-    transition: transform 500ms;
-
-    &.done {
-        transform: rotate(-151.13deg);
-    }
-}
-
-.art {
         position: relative;
         @include fluid-width-height(9.0625rem, 9.0625rem);
         background-image: $lume-2-base64;
@@ -86,6 +69,27 @@
             opacity: 0;
             z-index: -4;
         }
+    }
+
+    &.connected {
+        top: 50%;
+        left: -35em;
+        transform: translate(0, -50%);
+        .art-rotate {
+            transform: rotate(-151.13deg);
+            animation: none;
+            .art {
+                @include fluid-width-height(72rem, 72rem);
+            }
+        }
+        .gradient-1 {
+            opacity: 0;
+        }
+
+        .gradient-4 {
+            opacity: 1;
+        }
+    }
 
     &.pulse {
         .gradient-1 {
@@ -96,38 +100,16 @@
             opacity: 1;
         }
     }
+}
+
+.art-rotate {
+    //   transform: rotate(-180deg);
+    animation: 5000ms rotate linear infinite;
+    transition: transform 500ms;
 
     &.connected {
-        .gradient-1 {
+        transform: rotate(-151.13deg);
-            opacity: 0;
+        animation: none;
-        }
-
-        .gradient-3 {
-            opacity: 1;
-        }
-    }
-
-    &.done {
-        @include fluid-width-height(72rem, 72rem);
-
-        .gradient-1 {
-            opacity: 0;
-        }
-
-        .gradient-4 {
-            opacity: 1;
-        }
-
-        .loading-text {
-            display: block;
-
-            .loading-text-connected {
-                top: 0;
-                left: -25%;
-                transform: translate(-125%, 0);
-                opacity: 0;
-            }
-        }
     }
 }
 
@@ -145,28 +127,28 @@
     0% {
         transform: rotate(127.54deg);
     }
-
+    15.38% {
-    20% {
         transform: rotate(127.54deg);
     }
-
+    23.08% {
-    30% {
         transform: rotate(420deg);
     }
-
+    38.46% {
-    50% {
         transform: rotate(420deg);
     }
-
+    46.15% {
-    60% {
         transform: rotate(360deg);
     }
-
+    69.23% {
-    90% {
         transform: rotate(360deg);
     }
-
+    76.92% {
-    100% {
         transform: rotate(540deg);
     }
+    92.31% {
+        transform: rotate(540deg);
+    }
+    100% {
+        transform: rotate(127.54deg);
+    }
 }

ui/apps/dashboard/components/Art.svelte

@@ -2,13 +2,14 @@
   import { waitForConnected } from "../../../../shared/util.ts";
 
   let connected = false;
+  let pulse = false;
 
   waitForConnected(() => {
     connected = true;
   });
 </script>
 
-<div class="art-wrapper">
+<div class="art-wrapper" class:pulse class:connected>
   <div class="art-rotate">
     <div class="art">
       <div class="gradient-1" />