doc(Layout): improve load theme logic #6598
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Reviewer's GuideThis PR enhances the layout’s theme initialization by moving theme detection and application to a client-side JS module loaded during BaseLayout initialization, unifying the theme utility functions, and conditionally rendering the layout only after theme setup completes. Sequence diagram for improved theme initialization in BaseLayoutsequenceDiagram
participant BaseLayout
participant JSRuntime
participant ThemeModule
participant Browser
BaseLayout->>JSRuntime: Load JS module (BaseLayout.razor.js)
JSRuntime->>ThemeModule: Call initTheme()
ThemeModule->>Browser: getTheme() (from localStorage or attribute)
ThemeModule->>Browser: setTheme(currentTheme, false)
Note over BaseLayout: _init set to true, layout rendered
Flow diagram for conditional layout rendering after theme initializationflowchart TD
A[Component Initialization] --> B{_init == false?}
B -- Yes --> C[Do not render layout]
B -- No --> D[Render Header and Body]
D --> E[Layout visible with correct theme]
File-Level Changes
Assessment against linked issues
Possibly linked issues
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
There was a problem hiding this comment.
Hey @ArgoZhang - I've reviewed your changes - here's some feedback:
- Consider moving the JS interop theme initialization into OnAfterRenderAsync (with a first-render guard) to ensure the DOM is ready and avoid pre-render race conditions.
- Gating the entire layout behind the _init flag may produce a blank page if the module load fails or is slow—consider adding a simple loading skeleton or fallback to improve perceived performance.
- Wrap the module loading and initTheme invocation in a try/catch to gracefully handle JS interop failures and avoid the layout getting stuck uninitialized.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Consider moving the JS interop theme initialization into OnAfterRenderAsync (with a first-render guard) to ensure the DOM is ready and avoid pre-render race conditions.
- Gating the entire layout behind the _init flag may produce a blank page if the module load fails or is slow—consider adding a simple loading skeleton or fallback to improve perceived performance.
- Wrap the module loading and initTheme invocation in a try/catch to gracefully handle JS interop failures and avoid the layout getting stuck uninitialized.
## Individual Comments
### Comment 1
<location> `src/BootstrapBlazor.Server/Components/Layout/BaseLayout.razor:4` </location>
<code_context>
- <main>
- @Body
- </main>
+ @if (_init)
+ {
+ <Header></Header>
+ <main>
+ @Body
+ </main>
</code_context>
<issue_to_address>
Delaying layout rendering until _init is true may impact perceived performance.
If initialization is asynchronous, users may experience a blank screen. Display a loading indicator or fallback UI during this period.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
+4
to
+5
| @if (_init) | ||
| { |
There was a problem hiding this comment.
suggestion (performance): Delaying layout rendering until _init is true may impact perceived performance.
If initialization is asynchronous, users may experience a blank screen. Display a loading indicator or fallback UI during this period.
This was referenced Aug 15, 2025
This was referenced Aug 22, 2025
This was referenced Sep 3, 2025
This was referenced Sep 9, 2025
This was referenced Sep 16, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Link issues
fixes #6597
Summary By Copilot
Regression?
Risk
Verification
Packaging changes reviewed?
☑️ Self Check before Merge
Summary by Sourcery
Improve theme load logic by asynchronously initializing theme through a JS module before rendering the base layout and unifying theme retrieval across modules.
Bug Fixes:
Enhancements: