ASP.NET Core 6 and IAsyncEnumerable - Receiving Async Streamed JSON in Blazor WebAssembly

Back in July, I've shared my experiments around new JSON async streaming capabilities in ASP.NET Core 6. Last week I've received a question about utilizing these capabilities in the Blazor WebAssembly application. The person asking the question has adopted the DeserializeAsyncEnumerable based client code, but it didn't seem to work properly. All the results were always displayed at once. As I didn't have a Blazor WebAssembly sample as part of my streaming JSON objects demo, I've decided I'll add one and figure out the answer to the question along the way.

Blazor WebAssembly and IAsyncEnumerable

Before I focus on the problem of results not being received in an async stream manner, I think it is worth discussing the way of working with IAsyncEnumerable in Blazor WebAssembly. What's the challenge here? The first one is that await foreach can't be used in the page markup, only in the code block. So the markup must use a synchronous loop.

<table>
    <thead>
        <tr>
            <th>Date</th>
            <th>Temp. (C)</th>
            <th>Temp. (F)</th>
            <th>Summary</th>
        </tr>
    </thead>
    <tbody>
        @foreach (WeatherForecast weatherForecast in weatherForecasts)
        {
            <tr>
                <td>@weatherForecast.DateFormatted</td>
                <td>@weatherForecast.TemperatureC</td>
                <td>@weatherForecast.TemperatureF</td>
                <td>@weatherForecast.Summary</td>
            </tr>
        }
    </tbody>
</table>
<