Merge pull request #4167 from janhq/fix/smooth-the-loader-animation

fix: smooth the loader animation

web/containers/Loader/GenerateResponse.test.tsx

@@ -1,75 +0,0 @@
-// GenerateResponse.test.tsx
-import React from 'react';
-import { render, screen, act } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import GenerateResponse from './GenerateResponse';
-
-jest.useFakeTimers();
-
-describe('GenerateResponse Component', () => {
-  it('renders initially with 1% loader width', () => {
-    render(<GenerateResponse />);
-    const loader = screen.getByTestId('response-loader');
-    expect(loader).toHaveStyle('width: 24%');
-  });
-
-  it('updates loader width over time', () => {
-    render(<GenerateResponse />);
-    const loader = screen.getByTestId('response-loader');
-
-    // Advance timers to simulate time passing
-    act(() => {
-      jest.advanceTimersByTime(1000);
-    });
-
-    expect(loader).not.toHaveStyle('width: 1%');
-    expect(parseFloat(loader.style.width)).toBeGreaterThan(1);
-  });
-
-  it('pauses at specific percentages', () => {
-    render(<GenerateResponse />);
-    const loader = screen.getByTestId('response-loader');
-
-    // Advance to 24%
-    act(() => {
-      for (let i = 0; i < 24; i++) {
-        jest.advanceTimersByTime(50);
-      }
-    });
-
-    expect(loader).toHaveStyle('width: 50%');
-
-    // Advance past the pause
-    act(() => {
-      jest.advanceTimersByTime(300);
-    });
-
-    expect(loader).toHaveStyle('width: 78%');
-  });
-
-  it('stops at 85%', () => {
-    render(<GenerateResponse />);
-    const loader = screen.getByTestId('response-loader');
-
-    // Advance to 50%
-    act(() => {
-      for (let i = 0; i < 85; i++) {
-        jest.advanceTimersByTime(50);
-      }
-    });
-
-    expect(loader).toHaveStyle('width: 50%');
-
-    // Check if it stays at 78%
-    act(() => {
-      jest.advanceTimersByTime(1000);
-    });
-
-    expect(loader).toHaveStyle('width: 78%');
-  });
-
-  it('displays the correct text', () => {
-    render(<GenerateResponse />);
-    expect(screen.getByText('Generating response...')).toBeInTheDocument();
-  });
-});

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>

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'}