Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

How to Show Spinner while retrieving data?

$
0
0

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.


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>