Fix loading bar to handle longer requests, god forbid

[david-crespo]

Fixes #1657. Two main changes:

• Use animation-fill-mode: forwards to make the bar sit in place when it runs out of time instead of resetting to 0
• Stretch out the time of the loading part of the animation from 1.5s to 4s, adjusting the % location of the keyframes to make it so it looks the same as before for short requests, but for longer ones can spend a bit more time creeping forward rather than sitting still

The video is too long, I did not feel like editing out the useless parts.

• main with fast request (good)
• main with 2000ms request (bad, bar disappears at 1.5s, reappears for whoosh done animation)
• This PR with 2000ms request (good, bar hangs out in the middle, moving slowly, then finishes with whoosh out)
• This PR with fast request (good, looks about the same as main)

loading-bar.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Jul 17, 2023 5:29pm