Small improvement to the loading animation so it moves left to right only (#2012)

Author: samejr

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();