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;
        }
    }
}

StPaulis · Accepted Answer · 2021-05-18 14:12:02Z

5

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>
}

edited May 18, 2021 at 14:12

answered May 18, 2021 at 13:17

StPaulis

2,9441 gold badge19 silver badges28 bronze badges

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

6 Comments

Mackan Over a year ago

Whats your reasoning?

StPaulis Over a year ago

Imagine trying to figure out why some giant chunk of markup is not rendering in some page, what with no conditionals surrounding it. Only to find that there's some unexpected return statement in the middle of the the component. I don't think I would react nicely if that were me. From: stackoverflow.com/a/67575364/6442841

Mackan Over a year ago

I see your point. In this case however, the code would always be on top of all other "html" markup, to keep it structured. Thanks for the input

StPaulis Over a year ago

Either way, would work and it is a matter of taste as @Henk said. But I would definitely use the @if-else approach. It's a matter of habit as well... With if-else, there are less chances to create spaghetti code in my opinion.

Mackan Over a year ago

I see it more of a way to return quickly if the code allows, like most do in methods. I'm happy with the structure, I was mostly worried it would cause some problems in the blazor stack or js even.

|

Henk Holterman · Accepted Answer · 2021-05-18 13:19:42Z

2

This is a matter of taste or style.

There is nothing intrinsically wrong with it, you are just returning form a method.

In this post it is likened to spaghetti code but that depends. The way you write this the return is very clear and hard to overlook. And the alternative else { } has its own reading costs.

answered May 18, 2021 at 13:19

Henk Holterman

276k33 gold badges353 silver badges540 bronze badges

1 Comment

Mackan Over a year ago

Thanks - that "it's a matter of taste and style" is the perfect answer. I'll stick with this approach as I don't like to nest big chunks of markup within if/else.

Collectives™ on Stack Overflow

Blazor, return from/halt rendering if loading

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related