I'm working with the .NET 8.0 Blazor projects and my components briefly flash before appearing. I used the new Blazor Web App template.
Some form of a flash happens regardless of what @rendermode (InteractiveAuto, InteractiveWebAssembly, or InteractiveServer) I'm using and whether or not the [StreamRendering] attribute is present. The location of the component between the two Blazor projects also has no effect. Additionally, the component takes twice as long to load, from the 2 second await Task.Delay(2000); simulated delay to 4 seconds.
If I remove @rendermode completely, the flashing does cease. I do, however, need to use @rendermode InteractiveAuto because I modified the Weather component to have the interactive Quickgrid.
What is the cause and solution for this issue?
In a Tim Corey's video, he encounters a similar situation and mentions at 34:47 that development mode "turns off a lot of things". Could it be something to do with that? At 37:06 he demonstrates the equivalent of @rendermode InteractiveWebAssembly and confuses even himself by the behavior.
Weather.razor
@page "/weather"@using Microsoft.AspNetCore.Components.QuickGrid@attribute [StreamRendering]@rendermode InteractiveAuto<PageTitle>Weather</PageTitle><h1>Weather</h1><h1 class="text-muted">Render @(OperatingSystem.IsBrowser() ? "Wasm" : "Server")</h1><p>This component demonstrates showing data.</p>@if (forecasts == null){<p><em>Loading...</em></p>}else{<QuickGrid Class="table" Items="forecasts" Pagination="paginationState"><PropertyColumn Property="@(forecast => forecast.Date)" Sortable="true" InitialSortDirection="SortDirection.Ascending" /><PropertyColumn Property="@(forecast => forecast.TemperatureC)" Sortable="true" /><PropertyColumn Property="@(forecast => forecast.TemperatureF)" Sortable="true" /><PropertyColumn Property="@(forecast => forecast.Summary)" Sortable="true" /></QuickGrid><Paginator State="paginationState" />}@code { private IQueryable<WeatherForecast>? forecasts; PaginationState paginationState = new PaginationState { ItemsPerPage = 5 }; protected override async Task OnInitializedAsync() { // Simulate asynchronous loading to demonstrate streaming rendering await Task.Delay(2000); var startDate = DateOnly.FromDateTime(DateTime.Now); var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" }; forecasts = Enumerable.Range(1, 15).Select(index => new WeatherForecast { Date = startDate.AddDays(index), TemperatureC = Random.Shared.Next(-20, 55), Summary = summaries[Random.Shared.Next(summaries.Length)] }).AsQueryable(); } private class WeatherForecast { public DateOnly Date { get; set; } public int TemperatureC { get; set; } public string? Summary { get; set; } public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); }}