Blazor Server Prerendered: Where to load data and update the UI?

Question

I want to load data from an API and display a loading animation.

When I load in OnInitializedAsync() the animation is shown but the API call is made twice.

public class MyComponent : ComponentBase
{
    private bool isLoading;
    private List<MyData> myData;

    protected override async Task OnInitializedAsync()
    {
        isLoading = true;
        myData = await _myService.GetDataAsync();
        isLoading = false;
    }
}

When I load in OnAfterRenderAsync() the API call is made once but the UI is not updated.

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            isLoading = true;
            myData = await _myService.GetDataAsync();
            isLoading = false;

            StateHasChanged();
        }
    }

How can I load the data only once and show the loading animation/update the UI properly?

jeb · Accepted Answer · 2023-03-29 14:53:58Z

1

This was actually straight forward.

If you call StateHasChanged() each time the bool is set the UI is updated properly in OnAfterRenderAsync

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        isLoading = true;
        StateHasChanged();
        myData = await _myService.GetDataAsync();
        isLoading = false;
        StateHasChanged();
    }
}

answered Mar 29, 2023 at 14:53

jeb

1,3961 gold badge10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zita · Accepted Answer · 2023-03-28 08:25:30Z

0

Either follow the steps stated here or simply add an if-statement in OnInitializedAsync checking if myData is empty and then fetch the data from the API.

answered Mar 28, 2023 at 8:25

Zita

1661 silver badge12 bronze badges

4 Comments

jeb Over a year ago

Yes, one could swap the servermode to RenderMode.Server but I don't want to loose the benefits of prerendering if I could avoid it. Checking the myData is not an option since both calls have different variables. Both counts would be 0. I tested it.

Zita Over a year ago

Did you read the entire answer? You don't have to disable pre-rendering, simply check if IJSRuntime has been initialized, it's always false in first iteration.

jeb Over a year ago

I am not sure if i understand you correctly. Shouldn't the JsRuntime only be available after Render? If i check the (JsRuntime != null) in OnInitialisedAsync() it is null both times. Or do you mean something else ?

Zita Over a year ago

My bad, it was quite some time since I last did this. You need to use reflection in order to check if JsRuntime has been initialized. PropertyInfo prop = js.GetType().GetProperty("IsInitialized"); bool haveInitialized = (bool)prop.GetValue(js);

Collectives™ on Stack Overflow

Blazor Server Prerendered: Where to load data and update the UI?

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related