RadzenButton to expose IsBusy Property #98

New Issue

claunia · 2026-01-29T17:31:32Z

claunia commented

2026-01-29 17:31:32 +00:00

Originally created by @MPapst on GitHub (May 23, 2021).

Is your feature request related to a problem? Please describe.
Most Buttons in Web Application trigger actions (duh!)
As those actions are executed async, there is need to inform the user that there is progress, but not visible to him. There are several solution to create these progress informations, one of the is to use a "Busy Indicator" on the button where the user clicked.
Currently this is not that easy to achieve with Radzen, as there are multiple properties to adjust and animation of an icon is not possible throught the RadzenButton API.

Describe the solution you'd like
Please see PR.

Describe alternatives you've considered
See above in Description.

Additional context
Various other Button implementations (especially Angular, where I worked with) offer similar APIs.

Notes
A.K.A.: There is stuff to discuss on my PR:

I am unable to run the tests, as the compilation only works in the CLI not in VS 2019; and the CLI does not find the Tests
I added inline style items --> I am not 100% sure if this matches the correct style
Maybe there is a better icon for the spinner (or even plain css)
The solution is overridable by using ChildContent
Not setting the BusyText Property removes eventual text and the button will resize!

For the Documentation:

When setting IsBusy = true, the Disabled state is stored and restored when setting IsBusy to false
Does not work in combination with ChildContent

Originally created by @MPapst on GitHub (May 23, 2021). **Is your feature request related to a problem? Please describe.** Most Buttons in Web Application trigger actions (duh!) As those actions are executed async, there is need to inform the user that there is progress, but not visible to him. There are several solution to create these progress informations, one of the is to use a "Busy Indicator" on the button where the user clicked. Currently this is not that easy to achieve with Radzen, as there are multiple properties to adjust and animation of an icon is not possible throught the RadzenButton API. **Describe the solution you'd like** Please see PR. **Describe alternatives you've considered** See above in Description. **Additional context** Various other Button implementations (especially Angular, where I worked with) offer similar APIs. **Notes** A.K.A.: There is stuff to discuss on my PR: * I am unable to run the tests, as the compilation only works in the CLI not in VS 2019; and the CLI does not find the Tests * I added inline style items --> I am not 100% sure if this matches the correct style * Maybe there is a better icon for the spinner (or even plain css) * The solution is overridable by using ChildContent * Not setting the BusyText Property removes eventual text and the button will resize! For the Documentation: * When setting IsBusy = true, the Disabled state is stored and restored when setting IsBusy to false * Does not work in combination with ChildContent

claunia closed this issue

2026-01-29 17:31:32 +00:00

claunia commented

2026-01-29 17:31:33 +00:00

@akorchev commented on GitHub (May 24, 2021):

Hi @MPapst and thank you for the pull request!

I like the feature and the general idea but I am not sure it would work in 100% of the cases due to the way Blazor server-side is implemented. We have tried this idea before but it fails in a high latency scenario. The user can still click many times on a button and more than one click handler will execute. Disabling the button happens after some interval which depends on the network latency and Blazor will execute any pending event handlers without considering the disabled state (or at least this is what our tests in the online demo show). A recent change may mitigate this problem - the Click handler of the button now does not fire until the previous one finished executing. Have you tested the IsBusy feature in a high latency scenario?

@akorchev commented on GitHub (May 24, 2021): Hi @MPapst and thank you for the pull request! I like the feature and the general idea but I am not sure it would work in 100% of the cases due to the way Blazor server-side is implemented. We have tried this idea before but it fails in a high latency scenario. The user can still click many times on a button and more than one click handler will execute. Disabling the button happens after some interval which depends on the network latency and Blazor will execute any pending event handlers without considering the disabled state (or at least this is what our tests in the online demo show). [A recent change](https://github.com/radzenhq/radzen-blazor/commit/14bcb6ac2bbd94ed484b161b6f5d619d80252503) may mitigate this problem - the Click handler of the button now does not fire until the previous one finished executing. Have you tested the IsBusy feature in a high latency scenario?

claunia commented

2026-01-29 17:31:34 +00:00

@MPapst commented on GitHub (May 24, 2021):

HI @akorchev

sorry for not thinking about latency in server side scenarios - I always work with wasm :)

I did some tests and added an additional scenario to the ButtonPage.
Even with 5s latency profile in the browser, the button is instantly changed to its busy state and it was not possible for me to achieve the click handler to be executed twice.

I am not 100% satisfied with the busy-indicator icon, as it uses the refresh icon from MaterialIcons.
I thought about creating a spinner using css and tried that before, but it seemed that I am not firm enough with sass to figure out what I did wrong:
I created a new class definition in _button.sass that creates a round border around a div with the upper side in a different color. Unfortunately any other dependency overrides the width and height properties (both set to 16px).
Any idea about that?

@MPapst commented on GitHub (May 24, 2021): HI @akorchev sorry for not thinking about latency in server side scenarios - I always work with wasm :) I did some tests and added an additional scenario to the ButtonPage. Even with 5s latency profile in the browser, the button is instantly changed to its busy state and it was not possible for me to achieve the click handler to be executed twice. I am not 100% satisfied with the busy-indicator icon, as it uses the refresh icon from MaterialIcons. I thought about creating a spinner using css and tried that before, but it seemed that I am not firm enough with sass to figure out what I did wrong: I created a new class definition in _button.sass that creates a round border around a div with the upper side in a different color. Unfortunately any other dependency overrides the width and height properties (both set to 16px). Any idea about that?

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#98