Dotnet 8 Blazor Web App Stream Rendering Confuse

As I understand from Microsoft that Streaming rendering allows pages that need to execute long running requests to load quickly via an initial payload of HTML, Once that long running call completes, the remaining HTML is streamed to the browser and is seamlessly patched into the existing DOM on the client.

I'm playing around the default template for dotnet 8 Blazor Web App, As Microsoft did they added delay on OnInitializedAsync method for Weather component.

await Task.Delay(10000);

When I increase the delay to 10000ms .. the page will still showing Loading... and still active not freezing.

THE ISSUE

We came to the point that makes me confused, Instead of increase the task delay I tried to get 30000 weather records by increase the number of weather records:

Enumerable.Range(1, 30000)

In this case the page is freezing while it getting the records. even with streaming rendering attribute at the top of the Weather component

@attribute [StreamRendering]

Please what's the wrong or the misunderstanding that I'm facing?

UPDATE

As a Henk suggested to use Task.Run() to complete the heavy work on the another thread, I'm trying the following but unfortunately still git the same result .. The UI is freezing:(

Task<WeatherForecast[]> task = Task.Run(() =>     {        return Enumerable.Range(1, 50000).Select(index => new WeatherForecast        {            Date = startDate.AddDays(index),            TemperatureC = Random.Shared.Next(-20, 55),            Summary = summaries[Random.Shared.Next(summaries.Length)]        }).ToArray();     });   forecasts = await task;

Thanks in advance