I use Blazor and .net 7.I have a Spinner component MyCompanySpinner. I want the spinner will show when a process SetSomething is started and the spinner will hide after the process.Then the data will shown in the page. Sometimes the process for getting data is a little bit slow. But most of the time not.
@code { [Parameter] public int DelayDuration { get; set; } = 200; private bool showSpinner = false; private bool isInitialized = false; protected override async Task OnInitializedAsync() { // Introduce a delay before showing the spinner await Task.Delay(DelayDuration); Show(); } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { isInitialized = true; Show(); // Show the spinner after initialization } } public void Show() { if (isInitialized) { showSpinner = true; StateHasChanged(); } } public void Hide() { if (isInitialized) { showSpinner = false; StateHasChanged(); } }}@if (showSpinner){<div class="d-flex justify-content-center mt-5 mb-5"><i class="fa-solid fa-arrow-rotate-right fa-spin fa-xl pageSpinner" role="status" style="color: #4CAEA8;"></i><span class="visually-hidden">Loading...</span></div>}in the razor page:
SetSomething(); @if (!_showContent) {<MyCompanySpinner @ref="_spinner" DelayDuration="200" /> } else {<div class="row form-group"><div class="col-12"><MyCompanyData @ref="MyCompanyRef" SomeData="ViewModel.MyCompanyData" /></div></div> }in the razor.cs
protected MyCompanySpinner _spinner { get; set; } = new();protected bool _showContent = false;protected async Task SetSomething(){ //_spinner = new(); _spinner.Show(); //Int64 s = 0; //for (Int64 i = 0; i < 10000000000; i++) //{ // s += i; //} //await Task.Delay(500); ViewModel.IBAN = ""; ViewModel.IbanTenNameVan = ""; ViewModel.SomethingElse = GetSomethingElse(); etc... _spinner.Hide(); _showContent = true;}I didn't see the spinner. Also when I create a delay (for-loop). When I call the Task.Delay I will see the spinner but I will not see the data.