Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: smooth the loader animation #4167

Merged
merged 2 commits into from
Dec 2, 2024
Merged

fix: smooth the loader animation #4167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ef6eae
fix: smooth the loader animation
louis-jan Nov 30, 2024
7b13384
test: remove irrelevant test case
louis-jan Nov 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 0 additions & 75 deletions web/containers/Loader/GenerateResponse.test.tsx
View file
Open in desktop

This file was deleted.

13 changes: 11 additions & 2 deletions web/containers/Loader/GenerateResponse.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
import React, { useEffect, useState } from 'react'

import { motion as m } from 'framer-motion'

export default function GenerateResponse() {
const [loader, setLoader] = useState(0)

Check warning on line 6 in web/containers/Loader/GenerateResponse.tsx

View workflow job for this annotation

GitHub Actions / coverage-check 

5-6 lines are not covered with tests

// This is fake loader please fix this when we have realtime percentage when load model
useEffect(() => {
if (loader === 24) {
setTimeout(() => {
setLoader(loader + 1)

Check warning on line 12 in web/containers/Loader/GenerateResponse.tsx

View workflow job for this annotation

GitHub Actions / coverage-check 

9-12 lines are not covered with tests
}, 250)
} else if (loader === 50) {
setTimeout(() => {
setLoader(loader + 1)

Check warning on line 16 in web/containers/Loader/GenerateResponse.tsx

View workflow job for this annotation

GitHub Actions / coverage-check 

14-16 lines are not covered with tests
}, 250)
} else if (loader === 78) {
setTimeout(() => {
setLoader(loader + 1)

Check warning on line 20 in web/containers/Loader/GenerateResponse.tsx

View workflow job for this annotation

GitHub Actions / coverage-check 

18-20 lines are not covered with tests
}, 250)
} else if (loader === 85) {
setLoader(85)

Check warning on line 23 in web/containers/Loader/GenerateResponse.tsx

View workflow job for this annotation

GitHub Actions / coverage-check 

22-23 lines are not covered with tests
} else {
setLoader(loader + 1)

Check warning on line 25 in web/containers/Loader/GenerateResponse.tsx

View workflow job for this annotation

GitHub Actions / coverage-check 

25 line is not covered with tests
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [loader])
Expand All @@ -28,10 +30,17 @@
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>
Expand Down
13 changes: 11 additions & 2 deletions web/containers/Loader/ModelStart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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() {
Expand All @@ -11,18 +13,18 @@
if (stateModel.loading) {
if (loader === 24) {
setTimeout(() => {
setLoader(loader + 1)

Check warning on line 16 in web/containers/Loader/ModelStart.tsx

View workflow job for this annotation

GitHub Actions / coverage-check 

16 line is not covered with tests
}, 250)
} else if (loader === 50) {
setTimeout(() => {
setLoader(loader + 1)

Check warning on line 20 in web/containers/Loader/ModelStart.tsx

View workflow job for this annotation

GitHub Actions / coverage-check 

19-20 lines are not covered with tests
}, 250)
} else if (loader === 78) {
setTimeout(() => {
setLoader(loader + 1)

Check warning on line 24 in web/containers/Loader/ModelStart.tsx

View workflow job for this annotation

GitHub Actions / coverage-check 

23-24 lines are not covered with tests
}, 250)
} else if (loader === 85) {
setLoader(85)

Check warning on line 27 in web/containers/Loader/ModelStart.tsx

View workflow job for this annotation

GitHub Actions / coverage-check 

27 line is not covered with tests
} else {
setLoader(loader + 1)
}
Expand All @@ -37,10 +39,17 @@
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'}
Expand Down
Loading