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 2 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