Added widget header refresh indicator #3970
Conversation
|
It looks good, but why in the right top corner and not in the bottom left where we already have a spinner? Just replace the existing spinner with this one when the query executes? |
Our assumption is that it's not clear when a widget is refreshing. It's obvious that the text and spinner are inconspicuous, so that's what I went for with my first experimentations. I 8000 can make the bottom only version to get the feel and help decide. |
Good point. It just bothers me that we have multiple spinners and counters. Maybe we should move the counter next to the spinner at the top? |
Yeah, it's now 3 corners with refresh spinners :D
Depends what this info is for - to gain a rough estimate of how much longer it's gonna take? To indicate a stuck job? |
Very deep questions for 11PM ... :-) Another option is to drop the spinner next to the counter, but keep the counter where it currently is. |
Why not show the timer next to the spinner?
Proposed UX:
|
|
Ok, let's give a try to:
(we have no concept of "stuck", so we can skip this for now) |
Actually, it's a bit more complex than that. The bottom refresh indicator has two more features that can't be easily ported to the top:
I might need to make some more changes. |
I thought of keeping only this, and hiding it when the query executes. |
It doesn't make sense to me. You press a button, it disappears, and an indication shows up at the opposite corner (which might be off-screen). |
|
I'm trying a different approach - a candy stripe animation atop but my current implementation is cpu intensive and doesn't work well. But lmk if you think this has potential. |
|
Oh and also, if the run time is under an hour I display |
It shows when the query was executed, so in a way it makes sense that you won't see it when you're currently executing the query.
I think it has potential. Mainly because it works well with the existing elements. The downside is that it feels a bit out of touch with the rest of the visual language of the application. |
|
Reverted candy stripe and updated the following changes:
|
|
Also, added a simple dashboard "🔄Refresh" button indication. |
The inconsistency feels confusing. Maybe they shouldn't animate at all? In most cases they will see the top indicator, so it's clear refresh started. Also on Ubuntu/Chrome the refresh indicator looks unaligned: |
If you played around with it and feel it's inconsistent and visually cluttered - I'm convinced.
👍Thanks, fixed. 87a7f44 |
I did play with it, but don't forget I'm biased: I already know what should happen... |
| @@ -14,7 +14,10 @@ export function Timer({ from }) { | |||
| return () => clearInterval(timer); | |||
| }, []); | |||
|
|
|||
| return moment.utc(moment.now() - startTime).format('HH:mm:ss'); | |||
| const diff = moment.now() - startTime; | |||
| const format = diff > 1000 * 60 * 60 ? 'HH:mm:ss' : 'mm:ss'; // no HH under an hour | |||
| @@ -480,6 +490,86 @@ body { | |||
| background-color: fade(@redash-gray, 12%) !important; | |||
| } | |||
|
|
|||
| .refresh-indicator { | |||
There was a problem hiding this comment.
Something that I missed when doing the review: we need to stop adding styles to redash-newstyle.less. The refresh indicator should've been a component and its style should've been next to it.
Not worth revisiting at the moment, just wanted to point out so we keep this in mind for future stuff.
There was a problem hiding this comment.
Had to be done! #4017
|
@ranbena ,
Now that I had real life experience with it, I can say that I was wrong. When you click on a widget to refresh, it's in the more subtle mode of the refresh indicator. Therefore it's easy to miss, and because the button doesn't animate it feels like nothing happens. I guess that we should bring back the animation on the button you click you had there... |
|
I had an alternative I tried - making the buttons have a hover+press+pressed state. |
|
Reverted in #4027 |
Description
Testing indicator design.
Play with it in the preview.
Related Tickets & Documents
#3878