feature: improve loady bar thing

Author: alexpineda

src/renderer/scenes/interstitial-scene/interstitial-scene.tsx

@@ -30,7 +30,7 @@ export const InterstitialScene = ({
       {error && <GlobalErrorState error={error} action={null} />}
       <WrappedCanvas canvas={surface} style={{ zIndex: "-1" }} />
       <LoadBar
-        color="rgb(100 200 87)"
+        color="#64c857"
         thickness={5}
         style={{ marginBottom: "var(--size-10)" }}
       />

src/renderer/scenes/pre-home-scene/load-bar.tsx

@@ -1,5 +1,6 @@
 import { useProcessStore } from "@stores/process-store";
-import { useEffect, useRef } from "react";
+import { useLayoutEffect, useRef } from "react";
+import { Color } from "three";
 
 interface LoadBarProps {
   color: string;
@@ -10,24 +11,49 @@ interface LoadBarProps {
 export const LoadBar = ({ color, thickness, style }: LoadBarProps) => {
   const divRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     return useProcessStore.subscribe((store) => {
       if (!divRef.current) return;
       divRef.current.style.transform = `scaleX(${store.getTotalProgress()})`;
     });
   }, []);
 
+  const c1 = new Color(color);
+  const hsl = {
+    h: 0,
+    s: 0,
+    l: 0,
+  };
+  c1.getHSL(hsl);
+  hsl.l -= 0.75;
+  c1.setHSL(hsl.h, hsl.s, hsl.l);
+
+  hsl.h += 0.1;
+  hsl.l -= 0.1;
+  const c2 = new Color().setHSL(hsl.h, hsl.s, hsl.l);
+  const gradient = c2.getHexString();
+
   return (
     <div
-      ref={divRef}
       style={{
-        background: color,
+        background: `linear-gradient(-45deg, ${color}, #${gradient})`,
+        backgroundSize: "400% 400%",
+        animation: "gradient 15s ease infinite",
         height: `${thickness}px`,
         width: "100%",
+        position: "relative",
         ...style,
       }}
     >
-      &nbsp;
+      <div
+        ref={divRef}
+        style={{
+          position: "absolute",
+          background: color,
+          height: `${thickness}px`,
+          width: "100%",
+        }}
+      ></div>
     </div>
   );
 };

src/renderer/scenes/pre-home-scene/pre-home-scene.tsx

@@ -14,7 +14,7 @@ const styleCenterText = {
   position: "absolute",
   left: "50%",
   top: "50%",
-  transform: `translate(-50%, -50%)`,
+  transform: "translate(-50%, -50%)",
   cursor: "wait",
   color: "#ffeedd",
   fontFamily: "Conthrax",
@@ -53,7 +53,8 @@ export const PreHomeScene = () => {
 
   useEffect(() => {
     //@ts-ignore
-    document.body.style.backdropFilter = `blur(20px) grayscale(0.2) contrast(0.5) brightness(0.2)`;
+    document.body.style.backdropFilter =
+      "blur(20px) grayscale(0.2) contrast(0.5) brightness(0.2)";
     document.body.style.background = `url(${titanReactorLogo}) center center / cover`;
     return () => {
       //@ts-ignore
@@ -81,7 +82,11 @@ export const PreHomeScene = () => {
         //@ts-ignore
         <div style={styleCenterText}>
           <div>{imbateamLogo}</div>
-          <LoadBar color="white" thickness={20} style={{ marginTop: "20px" }} />
+          <LoadBar
+            color="#ffffff"
+            thickness={20}
+            style={{ marginTop: "20px" }}
+          />
         </div>
       )}
       {initialInstall && (

src/renderer/scenes/pre-home-scene/styles.css

@@ -36,3 +36,15 @@ body {
   max-inline-size: 100%;
   overflow: hidden;
 }
+
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+}