For context

App : Blazor Interactive Web App

<HeadOutlet @rendermode="InteractiveAuto" />
<Routes @rendermode="InteractiveAuto" />

builder.Services.AddSingleton<StateManagementService>();

Here’s the component

@inject CharacterAPIClient CharacterAPIClient
@inject GameAPIClient GameAPIClient
@inject NavigationManager NavigationManager
@inject StateManagementService StateManagementService

@page "/character/create"

@layout BlankLayout

<div>
    <h4 style="color:white;">Create a Character</h4>

    @if (StateManagementService.Games is null)
    {
        <LoadingSpinner />
    }
    else
    {
       <p>@StateManagementService.Game.First().Title;</p>
    }
</div>

@code {
    public Character NewCharacter { get; set; } = new Character();

    protected override async Task OnInitializedAsync()
    {
        try
        {
            if (StateManagementService.Games is null)
                StateManagementService.Games = await GameAPIClient.GetAllGames();

            StateHasChanged();
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error fetching games: {ex.Message}");
        }
    }

    public async Task CreateCharacter()
    {
        var response = await CharacterAPIClient.CreateCharacter(NewCharacter);

        if (response){
            NavigationManager.NavigateTo("social");
        } 
        else
        {
          Console.WriteLine("Error creating character");
        }
    }
}

Every time I navigate to the page, either typing in the url or navigation via within the app, the page initially loads and does the OnInitializedAsync method, succesfully retrieves the List of Games.

and then it immediately reloads the page the StateManagementService.Games is null again and then I get the exception System.Net.Http.HttpRequestException : Failed to fetch

Even more confusing… When I hit reload on the page, I briefly see the game title and then it reloads and repeats the behavior getting stuck on the LoadingSpinner component.