From 7ef6eae97aa3aa2274241311b6af269608ce9aa3 Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Sat, 30 Nov 2024 17:07:57 +0700
Subject: [PATCH] fix: smooth the loader animation

---
 web/containers/Loader/GenerateResponse.tsx | 13 +++++++++++--
 web/containers/Loader/ModelStart.tsx       | 13 +++++++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/web/containers/Loader/GenerateResponse.tsx b/web/containers/Loader/GenerateResponse.tsx
index 7f23d73ea..d43c8cab9 100644
--- a/web/containers/Loader/GenerateResponse.tsx
+++ b/web/containers/Loader/GenerateResponse.tsx
@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react'
 
+import { motion as m } from 'framer-motion'
+
 export default function GenerateResponse() {
   const [loader, setLoader] = useState(0)
 
@@ -28,10 +30,17 @@ export default function GenerateResponse() {
   return (
     <div className=" mb-1 mt-2 py-2 text-center">
       <div className="relative inline-block overflow-hidden rounded-lg bg-[hsla(var(--loader-bg))] px-4 py-2 font-semibold text-[hsla(var(--loader-fg))] shadow-lg">
-        <div
+        <m.div
+          initial={{ width: 0 }}
           className="absolute left-0 top-0 h-full bg-[hsla(var(--loader-active-bg))]"
-          style={{ width: `${loader}%` }}
+          style={{ width: 250 }}
           data-testid="response-loader"
+          animate={{
+            width: `${loader}%`,
+            transition: {
+              duration: 0.25,
+            },
+          }}
         />
         <span className="relative z-10">Generating response...</span>
       </div>
diff --git a/web/containers/Loader/ModelStart.tsx b/web/containers/Loader/ModelStart.tsx
index 4979bbb33..cad8afab0 100644
--- a/web/containers/Loader/ModelStart.tsx
+++ b/web/containers/Loader/ModelStart.tsx
@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react'
 
+import { motion as m } from 'framer-motion'
+
 import { useActiveModel } from '@/hooks/useActiveModel'
 
 export default function ModelStart() {
@@ -37,10 +39,17 @@ export default function ModelStart() {
   return (
     <div className=" mb-1 mt-2 py-2 text-center">
       <div className="relative inline-block max-w-[300px] overflow-hidden text-ellipsis whitespace-nowrap rounded-lg bg-[hsla(var(--loader-bg))] px-4 py-2 font-semibold text-[hsla(var(--loader-fg))] shadow-lg">
-        <div
+        <m.div
+          initial={{ width: 0 }}
           className="absolute left-0 top-0 h-full bg-[hsla(var(--loader-active-bg))]"
-          style={{ width: `${loader}%` }}
+          style={{ width: 250 }}
           data-testid="model-loader"
+          animate={{
+            width: `${loader}%`,
+            transition: {
+              duration: 0.25,
+            },
+          }}
         />
         <span className="relative z-10 line-clamp-1 max-w-[300px]">
           {stateModel.state === 'start' ? 'Starting' : 'Stopping'}