fix: smooth the loader animation

[louis-jan]

Describe Your Changes

This pull request aims to improve the progress bar animation for model loading and chat generation. waiting for the model to load is already frustrating, and the glitchy effects make it even worse

Before:

After:

Future update:
Pull progress from the engine and update accordingly.

Changes made

The changes made in this git diff involve two components — GenerateResponse.tsx and ModelStart.tsx — both of which add animation to progress loaders using the framer-motion library.

1. Import Framer Motion:

   • Both files added the import statement: import { motion as m } from 'framer-motion'.

2. Modify Progress Bar:

   • In both components, the <div> used for displaying the progress bar is replaced with <m.div>, indicating the use of a framer-motion div to add animations.
   • Added an initial prop with a width of 0 to start the animation from zero width.
   • The style for the width is hardcoded to 250 before the animation so it starts from a set size.
   • Added an animate prop to both loaders, which animates the width to ${loader}% over a 0.25 second duration using the transition property.

These changes enhance the user interface with smooth animated transitions for loader width changes.

[github-actions]

Barecheck - Code coverage report

Total: 69.28%

Your code coverage diff: -0.26% ▾

Uncovered files and lines

File	Lines
web/containers/Loader/GenerateResponse.tsx	5-6, 9-12, 14-16, 18-20, 22-23, 25
web/containers/Loader/ModelStart.tsx	16, 19-20, 23-24, 27