Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Pull Request Overview
This PR replaces the circular progress pie with a horizontal loading bar for visual progress indication. Key changes include:
- Integrating a new LoadingWrapper component in MainPage.
- Removing the CircularProgressbar and associated properties from Header.
- Adding the LoadingWrapper component with custom striped styling and an onClick navigation trigger.
Reviewed Changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| frontend/src/components/pages/MainPage.tsx | Imports LoadingWrapper and adds it alongside Header for loading. |
| frontend/src/components/header/Header.tsx | Removes CircularProgressbar and related props, simplifying Header. |
| frontend/src/components/LoadingWrapper.tsx | Introduces a new loading bar component with time-based progress. |
Files not reviewed (1)
- frontend/package.json: Language not supported
| const [startTime, setStartTime] = useState<number | null>(null) | ||
|
|
||
| useEffect(() => { | ||
| setStartTime(Date.now()) | ||
|
|
||
| const interval = setInterval(() => { | ||
| const elapsed = Date.now() - (startTime || Date.now()) |
There was a problem hiding this comment.
The useEffect callback may capture a stale value of startTime from the closure, causing inaccurate progress calculations. Consider initializing the start time using a ref or setting it outside the interval callback to ensure consistent timing.
| const [startTime, setStartTime] = useState<number | null>(null) | |
| useEffect(() => { | |
| setStartTime(Date.now()) | |
| const interval = setInterval(() => { | |
| const elapsed = Date.now() - (startTime || Date.now()) | |
| const startTime = useRef<number | null>(null) | |
| useEffect(() => { | |
| startTime.current = Date.now() | |
| const interval = setInterval(() => { | |
| const elapsed = Date.now() - (startTime.current || Date.now()) |
|
Mhmmmm, jeg syns pien var søt... og baren var litt harry. Hvorfor bytter vi fra pie til bar? |
|
Synes ikke paien var så fin. Og baren kan vises på sider som er fullscreen uten headeren. |
|
Hvis det hjelper kan vi jo endre opacity'en på den |
Skjønner med pien. Syns bare det r litt harry med to farger, minner meg om "utlandet barber shop candy cane". Men kanskje vi kan ta en bestemt farge i en annen opacity? Som gjør at den skiller seg litt ut men samtidig ikke? |
|
Hva tenker du @jorgengaldal ? |
|
I utgangspunktet litt enig med Sylvia i at det ser litt halvrart ut. Kunne det vært en idé at man heller har progressbar langs hele kanten både oppe og nede fra topp venstre til bunn høyre, sånn som det er på noen sponsede segmenter på youtube? |
Removed the loading pie in the header, and replaced it with a thin loading bar on either the top ro bottom on the screen.
Need input. Place it on top or bottom?