Coalesce component renders during Blazor WebAssembly startup #12753

[yasmoradi]

Summary

Adds an opt-in render-coalescing mechanism to AppComponentBase that collapses a burst of StateHasChanged calls during the app startup window into a single trailing render. It is active only on Blazor WebAssembly (where startup rendering is the bottleneck) and disabled by default.

Changes

• New AppComponentBase.Rendering.cs: overrides ShouldRender to debounce renders during the startup window. Suppressed renders (re)arm a single trailing render so the final startup state is guaranteed to paint. Tunable via CoalesceRendersDuration (default 3s, measured from app start) and CoalesceRendersWindow (default 300ms quiet period). Only runs when AppPlatform.IsBrowser; everything else renders normally.
• AppComponentBase.cs: adds a DisposeRenderCoalescing() partial invoked from DisposeAsync so the coalescing timer is always released; the whole feature stays isolated in its own file and compiles away when absent.
• Opt in (CoalesceRenders => true) for AppShell, Header, NavBar, HomePage, and AppAiChatPanel.

Related Issue

This closes #12753

Summary by CodeRabbit

• Performance Improvements
  • Improved startup responsiveness by combining rapid, repeated UI updates into fewer renders.
  • Enabled smoother initial rendering across the application shell, navigation, header, home page, and AI chat panel.
  • Added safe cleanup of rendering resources when components are disposed.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: d2a902ac-40d0-497a-856d-d4d53782f1e7

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Walkthrough

Changes

Startup render coalescing

Layer / File(s)	Summary
Render coalescing control src/Templates/Boilerplate/.../Components/AppComponentBase.Rendering.cs	Adds configurable startup timing and debounces opt-in WebAssembly renders, allowing one trailing render through InvokeAsync.
Render timer disposal src/Templates/Boilerplate/.../Components/AppComponentBase.cs, src/Templates/Boilerplate/.../Components/AppComponentBase.Rendering.cs	Disposes the coalescing timer and prevents further coalesced renders during component disposal.
Component opt-ins src/Templates/Boilerplate/.../Components/Layout/*, src/Templates/Boilerplate/.../Components/Pages/Home/HomePage.razor.cs	Enables render coalescing for the shell, header, navigation bar, AI chat panel, and home page.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Component
  participant AppComponentBase
  participant ITimer
  participant Renderer
  Component->>AppComponentBase: Trigger StateHasChanged
  AppComponentBase->>AppComponentBase: Suppress intermediate render
  AppComponentBase->>ITimer: Schedule trailing render
  ITimer->>Renderer: InvokeAsync(StateHasChanged)
  Renderer->>AppComponentBase: Execute trailing render

Loading

Poem

A bunny saw renders hop in a stream,
So bundled their beats like a startup dream.
One timer went “tick,”
The last frame came quick,
Then cleanup tucked it away neat and serene.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: startup render coalescing for Blazor WebAssembly components.
Linked Issues check	✅ Passed	The changes add startup render coalescing and enable it for AppShell, Header, NavBar, HomePage, and AppAiChatPanel as requested.
Out of Scope Changes check	✅ Passed	All edits are directly related to the startup render-coalescing feature and its target components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/AppComponentBase.Rendering.cs`:
- Line 26: Initialize the passCoalescedRender field in
AppComponentBase.Rendering to false instead of true, preserving the existing
timer-based coalescing behavior after Blazor’s unconditional initial render.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 97423195-5e6b-4249-9e6a-804a7577881f

📥 Commits

Reviewing files that changed from the base of the PR and between 4bc0aea and f780f84.

📒 Files selected for processing (7)

• src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/AppComponentBase.Rendering.cs
• src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/AppComponentBase.cs
• src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/AppAiChatPanel.razor.cs
• src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/AppShell.razor.cs
• src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Header/Header.razor.cs
• src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/NavBar.razor.cs
• src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Home/HomePage.razor.cs