Proposal: LoadingButton

Proposal:

A new ProgressButton control that can show the (indeterminate) progress ring next to the ContentPresenter to indicate that a running task.

Summary

A button control that can show a progress ring to indicate that the action that is attached to the click event is processed. The Fluent UI toolkits has this control already:(https://fluentsite.z22.web.core.windows.net/components/button/definition?showCode=false&showRtl=false&showTransparent=false&showVariables=false#states-loading)

Rationale

The ProgressBar and ProgressRing are great to show the user that the application is doing something. Often, these tasks (that show the progress) are attached to a specific user action, such as clicking a button. Writing the XAML to include both a e.g. ProgressRing and button can be a pain and we see a lot of different implementations of this, resulting in additional inconsistency across apps.

• Making it easier for developers to show to the user that a user invoked action is running in the control they just clicked.
• Creates better UX harmonization across applications if developers adopt the same pattern.

Scope

Capability	Priority
Should inherit default button behavior	Must
Should work with all default ButtonStyles (e.g. RevealButtonStyle or AccentButtonStyle	Must
A property to indicate that the (e.g. IsLoading)	Must
When the IsLoading property = true, the ProgressRing should be shown	Must
When the IsLoading property = true, the button should be in the disabled state	Must

Important Notes

XAML: <LoadingButton Content="Send message" IsLoading="True" />

Example visual from the Fluent UI toolkit:

Great examply by @mdtauk of the update button in the Microsoft Store:

Open Questions

…

[mdtauk]

Could I also suggest that there be a transition between the Loading states of this button.

Quick animated mockup.

Things I am thinking about:

• Transitioning between the Pre-loading | Loading | Loaded states
• Text Strings/Content for each of those three states
• Handling button sizing so each string and the ProgressRing can fit
• Possibly add a value property and a determinate state for the ProgressRing (when it is added to the control)

[mdtauk]

And can it please replace this button, so we have some consistency