Add a loading bar for tools #1188
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Collaborator
|
in the img above, once the img was produced, shouldn't the bar be finished as well? question: what happens to the bar when there is an error from the tool ? |
Contributor
Author
|
Uh I think the video I attached is loading poorly on the web, will let you try locally if you can to see if the behaviour works ok for you there edit: attached a better example |
Contributor
|
Looks great but maybe we shouldn't animate to completion once the tool returns. Also, the estimated time can be known ahead of time for some tools (web search is 4-8s, url fetch is 2-4s, gradio spaces have an existing estimate). It might be nice to let the tools define their own estimates dynamically |
and no rounding on the loading bar
gary149
reviewed
May 28, 2024
| } | ||
| }); | ||
| // go to 100% quickly if loading is done |
gary149
approved these changes
May 28, 2024
mishig25
reviewed
May 28, 2024
Co-authored-by: Mishig <[email protected]>
* Clear animation when done * make the bar go to the end --------- Co-authored-by: Nathan Sarrazin <[email protected]>
Contributor
Author
|
Accepted the suggestion, also made sure the loading bar goes til the end properly. Will add estimates from gradio API in a follow up PR if they are returned |
gary149
reviewed
May 28, 2024
| <div | ||
| bind:this={loadingBarEl} | ||
| class="absolute -m-1 hidden h-full w-full rounded-l-lg bg-purple-500/5 transition-all dark:bg-purple-500/10" | ||
| class="absolute -m-1 hidden h-full w-[calc(100%+1rem)] rounded-lg bg-purple-500/5 transition-all dark:bg-purple-500/10" |
Collaborator
There was a problem hiding this comment.
looked more like a progress bar without the rounded lg on the right imo (you could add an overflow-hidden on the parent instead).
Contributor
Author
There was a problem hiding this comment.
agreed, working on bringing it back but fighting with the padding 😆
Collaborator
There was a problem hiding this comment.
it was fine as it was imo :D even if it wasn't taking the full width
ice91
pushed a commit
to ice91/chat-ui
that referenced
this pull request
Oct 30, 2024
* Add a loading bar for tools * move css to right file * lighter purple and no rounding on the loading bar * Update src/routes/+layout.server.ts Co-authored-by: Mishig <[email protected]> * Clear animation when done (huggingface#1191) * Clear animation when done * make the bar go to the end --------- Co-authored-by: Nathan Sarrazin <[email protected]> --------- Co-authored-by: Victor Mustar <[email protected]> Co-authored-by: Mishig <[email protected]>
maksym-work
pushed a commit
to siilats/chat-ui
that referenced
this pull request
Jul 2, 2025
* Add a loading bar for tools * move css to right file * lighter purple and no rounding on the loading bar * Update src/routes/+layout.server.ts Co-authored-by: Mishig <[email protected]> * Clear animation when done (huggingface#1191) * Clear animation when done * make the bar go to the end --------- Co-authored-by: Nathan Sarrazin <[email protected]> --------- Co-authored-by: Victor Mustar <[email protected]> Co-authored-by: Mishig <[email protected]>
Matsenas
pushed a commit
to Matsenas/chat-ui
that referenced
this pull request
Jul 4, 2025
* Add a loading bar for tools * move css to right file * lighter purple and no rounding on the loading bar * Update src/routes/+layout.server.ts Co-authored-by: Mishig <[email protected]> * Clear animation when done (huggingface#1191) * Clear animation when done * make the bar go to the end --------- Co-authored-by: Nathan Sarrazin <[email protected]> --------- Co-authored-by: Victor Mustar <[email protected]> Co-authored-by: Mishig <[email protected]>
Matsenas
pushed a commit
to Matsenas/chat-ui
that referenced
this pull request
Jul 4, 2025
* Add a loading bar for tools * move css to right file * lighter purple and no rounding on the loading bar * Update src/routes/+layout.server.ts Co-authored-by: Mishig <[email protected]> * Clear animation when done (huggingface#1191) * Clear animation when done * make the bar go to the end --------- Co-authored-by: Nathan Sarrazin <[email protected]> --------- Co-authored-by: Victor Mustar <[email protected]> Co-authored-by: Mishig <[email protected]>
gary149
added a commit
to gary149/chat-ui
that referenced
this pull request
Aug 29, 2025
* Add a loading bar for tools * move css to right file * lighter purple and no rounding on the loading bar * Update src/routes/+layout.server.ts Co-authored-by: Mishig <[email protected]> * Clear animation when done (huggingface#1191) * Clear animation when done * make the bar go to the end --------- Co-authored-by: Nathan Sarrazin <[email protected]> --------- Co-authored-by: Victor Mustar <[email protected]> Co-authored-by: Mishig <[email protected]>
gary149
added a commit
to gary149/chat-ui
that referenced
this pull request
Aug 29, 2025
* Add a loading bar for tools * move css to right file * lighter purple and no rounding on the loading bar * Update src/routes/+layout.server.ts Co-authored-by: Mishig <[email protected]> * Clear animation when done (huggingface#1191) * Clear animation when done * make the bar go to the end --------- Co-authored-by: Nathan Sarrazin <[email protected]> --------- Co-authored-by: Victor Mustar <[email protected]> Co-authored-by: Mishig <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This uses the prometheus metrics, takes the 90th percentile to estimate the size of the loading bar with a default to 15s.
The bar finishes quickly if done early, or hangs close to the end if late.
Screen.Recording.2024-05-28.at.01.08.43.mov