Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

MudButton: Add loading parameter

See original GitHub issue

Feature request type

New component

Component name

MudLoadingButton

Is your feature request related to a problem?

No response

Describe the solution you’d like

To improve the usability i usually add MudProgressCircular in a Button. The Code looks mostly something like the example in the docu:

<MudButton Disabled="@_processing" OnClick="ProcessSomething" Variant="Variant.Filled" Color="Color.Primary">
    @if (_processing)
    {
        <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
        <MudText Class="ms-2">Processing</MudText>
    }
    else
    {
        <MudText>Click me</MudText>
    }
</MudButton>

@code {
    private bool _processing = false;

    async Task ProcessSomething()
    {
        _processing = true;
        await Task.Delay(2000);
        _processing = false;
    }
}

But this is a lot of bloat for always the same code. My suggestion is to create a dedicated MudLoadingButton. It’s basically a normal MudButton with a MudProgressCircular.

I made a test, Copy&Pasted the normal MudButton and overwrite the OnClickHandler. Looks like this:

/* Added in MudLoadingButton.razor.cs*/
protected bool IsLoading;
  
  protected new async Task OnClickHandler(MouseEventArgs ev)
  {
      if (Disabled)
          return;
      IsLoading = true;
      await OnClick.InvokeAsync(ev);
      if (Command?.CanExecute(CommandParameter) ?? false)
      {
          Command.Execute(CommandParameter);
      }
      Activateable?.Activate(this, ev);
      IsLoading = false;
  }

/// And this in the MudLoadingButton.razor
@if (!string.IsNullOrWhiteSpace(StartIcon))
        {
            <span class="@StartIconClass">
                <MudIcon Icon="@StartIcon" Size="@Size" Color="@IconColor" />
            </span>
        }
        @if(IsLoading){
            <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
        }
        @ChildContent
        @if (!string.IsNullOrWhiteSpace(@EndIcon))
        {
            <span class="@EndIconClass">
                <MudIcon Icon="@EndIcon" Size="@Size" Color="@IconColor" />
            </span>
        }

Have you seen this feature anywhere else?

No response

Describe alternatives you’ve considered

Problem at the Moment is, that the Loading Spinner is not customizable. But this can be simple be done with adding the MudProgressCircular Parameters to the MudLoadingButton and passing them further to the ProgressCircular. Also maybe a ManualLoading Parameter is useful, when the Loading State should be managed manually.

I use this as a custom element in my applications and really happy about this component. What is your opinion about that component?

I appreciate every type of feedback, when wished i would be happy to make a Pull Request.