Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: smooth the loader animation

Browse Source
This commit is contained in:
Louis 2024-11-30 17:07:57 +07:00
parent 73d34ea69b
commit 7ef6eae97a
No known key found for this signature in database
GPG Key ID: 44FA9F4D33C37DE2
2 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/containers/Loader/GenerateResponse.tsx
View File

@ -1,5 +1,7 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { motion as m } from 'framer-motion'
export default function GenerateResponse() { export default function GenerateResponse() {
const [loader, setLoader] = useState(0) const [loader, setLoader] = useState(0)
@ -28,10 +30,17 @@ export default function GenerateResponse() {
return ( return (
<div className=" mb-1 mt-2 py-2 text-center"> <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 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))]" className="absolute left-0 top-0 h-full bg-[hsla(var(--loader-active-bg))]"
style={{ width: `${loader}%` }} style={{ width: 250 }}
data-testid="response-loader" data-testid="response-loader"
animate={{
width: `${loader}%`,
transition: {
duration: 0.25,
},
}}
/> />
<span className="relative z-10">Generating response...</span> <span className="relative z-10">Generating response...</span>
</div> </div>

13
web/containers/Loader/ModelStart.tsx
View File

@ -1,5 +1,7 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { motion as m } from 'framer-motion'
import { useActiveModel } from '@/hooks/useActiveModel' import { useActiveModel } from '@/hooks/useActiveModel'
export default function ModelStart() { export default function ModelStart() {
@ -37,10 +39,17 @@ export default function ModelStart() {
return ( return (
<div className=" mb-1 mt-2 py-2 text-center"> <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 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))]" className="absolute left-0 top-0 h-full bg-[hsla(var(--loader-active-bg))]"
style={{ width: `${loader}%` }} style={{ width: 250 }}
data-testid="model-loader" data-testid="model-loader"
animate={{
width: `${loader}%`,
transition: {
duration: 0.25,
},
}}
/> />
<span className="relative z-10 line-clamp-1 max-w-[300px]"> <span className="relative z-10 line-clamp-1 max-w-[300px]">
{stateModel.state === 'start' ? 'Starting' : 'Stopping'} {stateModel.state === 'start' ? 'Starting' : 'Stopping'}