Blazor, return from/halt rendering if loading

Question

We have similar code as below in all our Blazor pages, to simply halt the rendering until loading is done. It seems to work ok, but the site has not had that much testing yet.

I am a bit worried that this, meaning the return; in the middle of the page, will/could mess up blazors flow in one way or another, lead to memory leaks or whatever.

Every example I see uses if/else instead, but if the below example is valid it's much preferred to reduce nesting and complexity of the page.

So, is this method ok to use, or will it cause us problems down the line?

A simplified example:

@usings/injects here
    
@if (IsLoading)
{
    @:Loading content..
    return;
}
    
<p>This will not be rendered until page is initialized and Model populated</p> 
<p>@Foo.Bar</p>
    
@code {
    public bool IsLoading { get; set; } = true;
    public FooModel Foo { get; set;}
    
    protected override async Task OnInitializedAsync()
    {
        try
        {
            Foo = await GetFooFromRepo();
        }
        catch (Exception ex)
        {
            Toaster.Add("Something went wrong when loading foo.", 
                 MatToastType.Danger, "Error");
        }
        finally
        {
            IsLoading = false;
        }
    }
}

Answer 1

I would not use this approach,

The way I recommend to do this it would be with an @if-else statement, like the follow:

@if (IsLoading)
{
    @:Loading content..
}
else 
{  
  <p>This will not be rendered until page is initialized and Model populated</p> 
  <p>@Foo.Bar</p>
}