From 54adea0895015b3d2bbc8cdff0ba1d8c14c2127d Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 1 May 2025 19:07:46 +0100
Subject: [PATCH] Small improvement to the loading animation so it moves left
 to right only

---
 .../app/components/primitives/LoadingBarDivider.tsx    | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/components/primitives/LoadingBarDivider.tsx b/apps/webapp/app/components/primitives/LoadingBarDivider.tsx
index f227f9e731..d35067ea62 100644
--- a/apps/webapp/app/components/primitives/LoadingBarDivider.tsx
+++ b/apps/webapp/app/components/primitives/LoadingBarDivider.tsx
@@ -7,7 +7,7 @@ type LoadingBarDividerProps = {
 
 export function LoadingBarDivider({ isLoading }: LoadingBarDividerProps) {
   return (
-    <div className="relative h-px w-full bg-grid-bright">
+    <div className="relative h-px w-full overflow-hidden bg-grid-bright">
       <AnimationDivider isLoading={isLoading} />
     </div>
   );
@@ -21,11 +21,9 @@ export function AnimationDivider({ isLoading }: LoadingBarDividerProps) {
     if (isPresent) {
       const enterAnimation = async () => {
         await animate(
-          [
-            [scope.current, { width: "30%", left: "35%" }, { duration: 1, ease: "easeIn" }],
-            [scope.current, { width: 0, left: "100%" }, { duration: 1, ease: "easeOut" }],
-          ],
-          { repeat: Infinity, repeatType: "reverse" }
+          scope.current,
+          { left: ["-100%", "100%"], width: "100%" },
+          { duration: 2, ease: "easeOut", repeat: Infinity }
         );
       };
       enterAnimation();