I have a blazor page that is used to create a user, when the button is clicked, i want to display a loading text. and when it is done, i want to hide the text, here is my code:
<AuthorizeView><Authorized> @if (@IsLoading) {<div>Loading</div> } else {<div class="add-user"><PageHeader Text="Add User" /><form Model="NewUser" class="user-form"><div class="line"><label for="name">Name</label><input type="text" id="name" @bind="NewUser.Name" /></div><div class="line"><label for="email">Email</label><input type="email" id="email" @bind="NewUser.Email" /></div><div class="line"><div><label>Gender</label></div><div><label for="male">Male</label><input type="radio" id="male" name="gender" value="Male" @onchange="UpdateGender" checked="@IsMaleRadioButtonChecked" /><label for="female">Female</label><input type="radio" id="female" name="gender" value="Female" @onchange="UpdateGender" checked="@IsFemaleRadioButtonChecked"/></div></div><div class="line"><label for="date-of-birth">Date of Birth</label><input type="date" id="date-of-birth" @bind="NewUser.DateOfBirth" /></div><Button Text="Add User" OnClick="Save" /></form></div> }</Authorized></AuthorizeView>@code { private async void Save() { IsLoading = true; StateHasChanged(); if (!AreFormValuesValid()) return; NewUser.Id = 0; NewUser.Password = NewUser.Name; NewUser.Role = roleService.Get("Participant"); NewUser.Gender = Gender == "Male" ? Enumerations.Gender.Male : Enumerations.Gender.Female; if (await userService.AddOrUpdate(NewUser)) { js.InvokeVoidAsync("alert", "User Added Successfully"); NewUser = new User(); Gender = ""; StateHasChanged(); } else { js.InvokeVoidAsync("alert", "Couldn't Save User"); } IsLoading = false; StateHasChanged(); }the loading text appears righ after the alert, but i want the loading text to appear right when i click the button. how do i change my code to achieve that.
i tried a lot of methods, and have been stuck for hours, can anyonw help? (this is a blazor server app project)