add confirmation indicator when refresh finishes

[charliepark]

This PR builds on #2161, adding in an indicator to confirm that the refresh has completed.

[vercel]

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

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Apr 17, 2024 11:25pm

[david-crespo]

I think you're definitely right that we can improve on the spinner, and especially that its ending feels anticlimactic. As it is, however, I find this combination a little too disjointed to work. The checkmark feels like the wrong thing too — it's a weird response to a refresh. It also adds time to the animation after the request is already done, so it draws the eye longer than necessary.

Taking out the spinner and going straight to the checkbox thing is interesting. It does feel a bit better, though the checkmark is still odd:

Changing the icon to match the one in the button also has an interesting effect.

I think @paryhin and @benjaminleonard will have to take a look at the icon with the spinner and see if it's worth revisiting.

[benjaminleonard]

So my recommendation here is to use the same implementation as the utilization page. The spinner loader already has a minimum time set on it. The assumption should be if the spinner has finished, the refresh was successful (we might need to handle the error state with a toast if the refresh didn't work.

console/app/ui/lib/Spinner.tsx

Line 72 in b6da415

export const SpinnerLoader = ({ isLoading, children = null, minTime = 500 }: Props) => {

The animation is really nice on its own, but in this situation it feels too significant – especially until we do polling on this page – it makes refreshing repeatedly frustrating.

I also think David's suggestions don't necessarily work with what is an asynchronous action with an unpredictable response time.

We'll refactor this anyway following the refreshing/polling RFD. IMO stick with the SpinnerLoader and a minTime that feels right.

[david-crespo]

I didn’t notice the minTime prop. I think I want it a little less than 500, will fix.