ProductDetail.razor - does not display "Loading..." when ProductId parameter changes

[EDIT by guardrex to add the metadata]

@guardrex I'm not certain if this is an addition you'd consider for the sample code, but I believe it's important that the examples are accurate not just in the concepts they aim to demonstrate but also in embodying best practices for the other aspects they touch upon.

The ProductDetails.razor page, mentioned in handle-errors.md, employs the following code snippet to display the page's result or state:

blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/Pages/ProductDetails.razor

Lines 9 to 25 in 5172978

    
           @if (details != null) 
        
           { 
        
               <h2>@details.ProductName</h2> 
        
               <p> 
        
                   @details.Description 
        
                   <a href="@details.Url">Company Link</a> 
        
               </p> 
        
           } 
        
           else if (loadFailed) 
        
           { 
        
               <h1>Sorry, we could not load this product due to an error.</h1> 
        
           } 
        
           else 
        
           { 
        
               <h1>Loading...</h1> 
        
           }

However, when the ProductId parameter changes, the current implementation of OnParametersSetAsync() doesn't reset the details to null before fetching the repository data, resulting in the previous product details being displayed until the new one loads, instead of showing the "Loading..." indicator.

To ensure the "Loading..." indicator is shown, we should update OnParametersSetAsync() to:

protected override async Task OnParametersSetAsync()
{
    try
    {
        loadFailed = false;
        details = null; // Reset details to null to display the loading indicator
        details = await Product.GetProductByIdAsync(ProductId);
    }
    catch (Exception ex)
    {
        loadFailed = true;
        Logger.LogWarning(ex, "Failed to load product {ProductId}", ProductId);
    }
}

Anyway, I think the sample code for custom error handling could be simplified. Right now, there's a lot of extra detail, like the interface and implementation of the repository, that might distract from the main focus.

Page URL

https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/handle-errors?view=aspnetcore-8.0#lifecycle-methods

Content source URL

https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/blazor/fundamentals/handle-errors.md

Document ID

66a0b1c2-c45c-98ca-9808-6f340a861c44

Article author

@guardrex

Let me circle around on this one, too, because I'm experiencing an extremely high Blazor issue load at the moment. I'll get back to this as soon as I can.

Still crank'in on issues. I'll get back to this ASAP 🏃‍♂️🏃‍♂️🏃‍♂️🏃‍♂️🏃‍♂️🏃‍♂️🏃‍♂️🏃‍♂️. I hope on Friday, but it might be early next week ... Tuesday or later due to our Monday holiday.

Don't worry, no rush.

	@if (details != null)
	{
	<h2>@details.ProductName</h2>
	<p>
	@details.Description
	<a href="@details.Url">Company Link</a>
	</p>

	}
	else if (loadFailed)
	{
	<h1>Sorry, we could not load this product due to an error.</h1>
	}
	else
	{
	<h1>Loading...</h1>
	}