Loading indicator in button Slot

[madcoda9000]

Hello,

i hope to find anybody who can tell me how to display a loading indicator after a click on a button.

My first try is not working (progress ring is not beeing displayed.).

Many Thanks Sascha

Login Component:

@page "/Login"
@layout AuthLayout

@inject AppAuthenticationStateProvider _authProvider;
@inject NavigationManager NavigationManager;
@attribute [Microsoft.AspNetCore.Authorization.Authorize]
@attribute [Microsoft.AspNetCore.Authorization.AllowAnonymous]

<AuthorizeView>
    <Authorized>
        @{
            NavigationManager.NavigateTo("/");
        }
    </Authorized>
</AuthorizeView>

<div style="width: 100%;">
    <div class="form-signin-headline">
        <div style="margin: auto; min-width:440px;display:flex;justify-content:center;">
            <img src="images/logow.png" style=";margin-right:10px;margin-top:3px;" width="28" height="32" />
            <h1 style="color: var(--neutral-layer-floating);">GroupVault</h1>
        </div>
    </div>
    <div class="form-signin">
        <EditForm class=" mb-4" Model="@_credential" OnSubmit="@Authenticate">
            <span
                style="margin-bottom: 0%; color:var(--neutral-fill-inverse-active);font-size:1.5rem;font-weight:600;line-height: 1.75rem;">Anmelden</span><br>
            <sub style="color: var(--neutral-fill-inverse-active);">an GroupVault anmelden...</sub>
            <div class="form-group" style="margin-top: 40px;">
                <FluentTextField @bind-Value=@_credential.UserName placeholder="enter your username" Size=60
                    TextFieldType="@TextFieldType.Text" style="width: 100%;"></FluentTextField>
            </div>
            <div class="form-group" style="margin-top: 20px;">
                <FluentTextField @bind-Value=@_credential.Password placeholder="insert your password"
                    TextFieldType="@TextFieldType.Password" style="width: 100%;"></FluentTextField>
            </div>
            <div class="form-signin-buttonContainer">

                <FluentButton onclick="@(async () => await Authenticate())" Appearance="Appearance.Accent" Type="@ButtonType.Button" Disabled=@(ShowActivityVisible)>@btnText
                    @if (ShowActivityVisible==true)
                    {
                    <FluentProgressRing style="width: 16px; height: 16px;"  Slot="start" ></FluentProgressRing>
                    }
                </FluentButton>

            </div>
        </EditForm>
    </div>
    <div class="signin-addon">
        <div class="signin-addon-btn">
           <i class="ms-Icon ms-Icon--Lock" style="color: var(--neutral-fill-inverse-active);font-size:x-large;"></i><span style="margin-left: 10px;margin-top: 3px;">forgot your password?</span>
        </div>        
    </div>
    <div class="signin-addon">
        <div class="signin-addon-btn">
           <i class="ms-Icon ms-Icon--UserOptional" style="color: var(--neutral-fill-inverse-active);font-size:x-large;"></i><span style="margin-left: 10px;margin-top: 3px;">register a new account.</span>
        </div>        
    </div>
</div>



@code {
    public class Credential { public string UserName { get; set; } = ""; public string Password { get; set; } = ""; }
    private Credential _credential = new Credential();
    private bool ShowActivityVisible = false;
    private string btnText = "login..";

    private async Task Authenticate()
    {
        ShowActivityVisible = true;
        btnText = "processing...";
        @* bool erg = await _authProvider.LoginAsync(_credential.UserName, _credential.Password);
        if (erg)
        {
            NavigationManager.NavigateTo("/");
        } *@
    }
}

Result:

[madcoda9000]

so it seems i found the problem by myself. The ProgressRoing is shown, but i cant see it because it has the accent color (the same as the button).

I've tried to set the progress ring color by css. But that ist not working. It seems the component is ignoring the css.

<FluentButton Appearance="Appearance.Accent" Type="@ButtonType.Submit" Disabled=@(ShowActivityVisible)>
                    @if (ShowActivityVisible==true)
                    {
                    <FluentProgressRing  style="color:#fff;width: 16px; height: 16px;"  Slot="start" ></FluentProgressRing>@btnText
                    } else {
                        @btnText
                    }
                </FluentButton>

[madcoda9000]

okay, i found a solution. By setting the stroke value, you can change the color of the progress spinner.

<FluentProgressRing class="btnLoginProgress" style="width: 16px; height: 16px;stroke:#fff;" Slot="start" ></FluentProgressRing>
But to be honest, it would be much more comfortable to have a parameter like color for the component.

Reagrds Sascha

[vnbaaij]

We added a Loading parameter to <FluentButton> for v3 (not available in RC1 yet). See https://preview.fluentui-blazor.net/Button#simplebuttonexamples and then the 'Loading' button

[madcoda9000]

Whohaaaa, that's awesome! Many thanks for implementing this.