vscode-webview-ui-toolkit icon indicating copy to clipboard operation
vscode-webview-ui-toolkit copied to clipboard

Feature request: progress bar

Open benmcmorran opened this issue 3 years ago • 2 comments

Feature request

It would be great if this toolkit provided a progress bar based on the VS Code progress bar that appears at the top of views while they are loading.

Expected behavior

A new component vscode-progress-bar component that exposes properties with similar functionality as the VS Code core class.

  • total set to the total amount of work, if known. This could be set to undefined to represent an infinite spinner, or there could be a separate infinite property.
  • worked set to the amount of work currently completed.
  • visible set to true if the progress bar should be displayed. When set to false, ideally the progress bar would do a fade-out animation like the existing VS Code component.

Current behavior

The toolkit only provides a progress ring, but this isn't suitable for making views that look similar to built-in views, like when the extension marketplace is searching.

Use case

Indicating to the user that a view is doing work in a way that looks the same as built-in VS Code views, like the Extension Marketplace.

Screenshots/references

See the infinite progress bar at the top of the view

image

VS Code reference implementation: https://github.com/microsoft/vscode/tree/0bf30719729d76dc3db934ac2e04eed892a9ae7e/src/vs/base/browser/ui/progressbar

benmcmorran avatar Nov 09 '22 23:11 benmcmorran

Thanks for the request @benmcmorran!

We actually had a progress bar implemented in the toolkit long ago, before it was released publically. We ultimately decided to scrap it last minute because (if I recall correctly??) we were undecided if a progress bar should be exposed to a webview from a design system perspective.

It think it sounds reasonable to include a progress bar now imo, but I'll defer to @daviddossett –– what are your thoughts on this?

hawkticehurst avatar Nov 21 '22 20:11 hawkticehurst

I think a progress bar would be a good addition. FWIW, we added a ProgressIndicator webcomponent in GitLens using the VS Code styles:

https://github.com/gitkraken/vscode-gitlens/blob/d65bc6e2722ee9f9d94633942ee1fb837cfb2e12/src/webviews/apps/shared/components/progress.ts#L1

eamodio avatar Dec 04 '22 23:12 eamodio

Hi all,

Back with a final update: I'm very sorry to say that the toolkit is being deprecated and all active development will be coming to a close.

There was an announcement last week where you can learn more details and leave any questions or comments you may have.

Beyond that, thank you so much filing this issue and apologies for never getting around to addressing it. It means a lot that you contributed to the improvement of this project. I wish you all the best in your future VS Code extension endeavors!

hawkticehurst avatar Aug 08 '24 21:08 hawkticehurst