Progress indicator bar#997
Conversation
aliabid94
requested review from
abidlabs,
omerXfaruq and
pngwn
and removed request for
omerXfaruq and
pngwn
|
How do we handle parallel events or actions in the frontend? |
|
Dropping Queueing issue here for design reference: #572
|
|
Nice design, LGTM. It would be great to see an example of a Blocks demo that uses Status Tracker for some or all of the events. |
There was a problem hiding this comment.
Left a few notes but implementation looks good 👍
I think we need to discuss how this should work, though. In my opinion we should be handling concurrent requests whereas this implementation will only handle one at a time. We also have awareness on which components will be populated as a result of the API request and should be outputting the loader visuals into the affected components. (This is also the basis on which @gary149 is deisgning as far as I'm aware as well, so it would be good to get that mechanism implemented as part of this and we can tweak the design later).
I think we should be tracking the loading status across components. So a map of some sort, keyed by the function ID which will set a prop on the relevant components of 'idle', 'pending' or 'failed'. Each component can then decide what to do for each loading state. We have all of the information for this functionality.
The current visuals will work well for most components (it just needs to be adapter to fill the component width + height as an overlay).
Happy to go over this in-person if needed.
| let handled_dependencies: Array<number[]> = []; | ||
| let status_tracker_values: Record<number, string> = {}; | ||
|
|
||
| let setStatus = (dependency_index: number, status: string) => { |
There was a problem hiding this comment.
We should use snake_case for consistent casing:
| let setStatus = (dependency_index: number, status: string) => { | |
| let set_status = (dependency_index: number, status: string) => { |
| }); | ||
| }) | ||
| .catch((error) => { | ||
| setStatus(i, "error"); |
There was a problem hiding this comment.
| setStatus(i, "error"); | |
| set_status(i, "error"); |
|
@aliabid94 Scratch some of that last comment, i misread the implementation at first. |
4 participants
Created a progress indicator that can be attached to an event listener API call. Still a little work to show ETA and queue position, but mostly functional, try out demo/calculator.py. I think there will be opinions on how this is implemented so thought to open PR now to get feedback.