Home Blazored LocalStorage State with MudBlazor initialization / rendering to late

Questions

Blazored LocalStorage State with MudBlazor initialization / rendering to late

May 29, 2023

I have a switch that selection is stored as a state. The last state is to be taken out of the state when loading the view. That works.

However, you can see the change of state during rendering. Actually, the view should only be visible when the rendering is finished and you can’t see the transition.

Index.razor:

@page "/"

<MudToolBar>
    <MudSwitch T="bool" Checked="Show" CheckedChanged="HandleShowChanged" />
</MudToolBar>

@if (Show)
{
    <h1>Show something</h1>
}
else
{
    <h1>Nothing to show</h1>
}

Index.razor.cs:

public partial class Index
{
    private bool Show { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Show = await LocalStorage.GetItemAsync<bool>(nameof(Show));
    }

    private async Task HandleShowChanged(bool value)
    {
        Show = value;
        await LocalStorage.SetItemAsync(nameof(Show), value);
    }
}

>Solution :

Your problem is that the rendering happens too soon, and that you can’t prevent. But you can eliminate the relevant parts until loading is finished:

@page "/"

@if (isLoaded)
{
  <MudToolBar>
    <MudSwitch T="bool" Checked="Show" CheckedChanged="HandleShowChanged" />
  </MudToolBar>

  @if (Show)
  {
      <h1>Show something</h1>
  }
  else
  {
     <h1>Nothing to show</h1>
  }
}

I assume you can handle the isLoaded implementation.