starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

[PR #2294] [MERGED] Prevent FOUC in RadzenTheme #3177

New Issue
Open
opened 2026-01-29 18:22:16 +00:00 by claunia · 0 comments
claunia commented 2026-01-29 18:22:16 +00:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/radzenhq/radzen-blazor/pull/2294
Author: @akorchev
Created: 9/23/2025
Status: ✅ Merged
Merged: 9/23/2025
Merged by: @akorchev

Base: master ← Head: prevent-fouc

📝 Commits (3)

  • 1210de9 ThemeService.SetTheme uses JavaScript to change the theme CSS files to prevent FOUC during Blazor initial hydration.
  • 059a824 Update the getting started instructions.
  • 13cc518 Initialize the theme in ThemeService from RadzenTheme.

📊 Changes

8 files changed (+80 additions, -32 deletions)

View changed files

📝 Radzen.Blazor/RadzenTheme.razor (+2 -2)
📝 Radzen.Blazor/RadzenTheme.razor.cs (+3 -22)
📝 Radzen.Blazor/ThemeService.cs (+54 -2)
📝 Radzen.Blazor/wwwroot/Radzen.Blazor.js (+11 -0)
📝 RadzenBlazorDemos.Host/App.razor (+1 -1)
📝 RadzenBlazorDemos.Server/App.razor (+1 -1)
📝 RadzenBlazorDemos/Pages/GetStarted.razor (+1 -4)
📝 RadzenBlazorDemos/Pages/ThemeServicePage.razor (+7 -0)

📄 Description

Prevents reloading of the theme CSS file by RadzenTheme.

Currently we suggest RadzenTheme to be used with an interactive render mode so the theme can change at runtime via ThemeService.SetTheme. Unfortunately hydrating RadzenTheme leads to removing the <link> tag that includes the theme and adding it again. In some cases this causes a visible flicker and downloading the CSS file a second time.

This PR makes changes the way ThemeService.SetTheme works - it now changes the theme via JavaScript (Radzen.setTheme). To eliminate the flicker RadzenTheme should no longer be used with a @rendermode attribute set.

OLD:

<RadzenTheme Theme="material" @rendermode="@InteractiveWebAssembly" />

NEW

<RadzenTheme Theme="material" />

Existing apps that use RadzenTheme with @rendermode should not be affected (but still remain prone to flicker even after this change). To avoid the flicker remove the @rendermode attribute from RadzenTheme in your App.razor file.

We have updated the getting started instructions and will update the application templates in Radzen Blazor Studio accordingly.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/radzenhq/radzen-blazor/pull/2294 **Author:** [@akorchev](https://github.com/akorchev) **Created:** 9/23/2025 **Status:** ✅ Merged **Merged:** 9/23/2025 **Merged by:** [@akorchev](https://github.com/akorchev) **Base:** `master` ← **Head:** `prevent-fouc` --- ### 📝 Commits (3) - [`1210de9`](https://github.com/radzenhq/radzen-blazor/commit/1210de93aebcf22e09b6e340544d81ce0a55b6bb) ThemeService.SetTheme uses JavaScript to change the theme CSS files to prevent FOUC during Blazor initial hydration. - [`059a824`](https://github.com/radzenhq/radzen-blazor/commit/059a824ccba4f80e65095ed7c23341041a8c1b30) Update the getting started instructions. - [`13cc518`](https://github.com/radzenhq/radzen-blazor/commit/13cc518abd85b93f9f2a2a9dd5af7a8b669da1f1) Initialize the theme in ThemeService from RadzenTheme. ### 📊 Changes **8 files changed** (+80 additions, -32 deletions) <details> <summary>View changed files</summary> 📝 `Radzen.Blazor/RadzenTheme.razor` (+2 -2) 📝 `Radzen.Blazor/RadzenTheme.razor.cs` (+3 -22) 📝 `Radzen.Blazor/ThemeService.cs` (+54 -2) 📝 `Radzen.Blazor/wwwroot/Radzen.Blazor.js` (+11 -0) 📝 `RadzenBlazorDemos.Host/App.razor` (+1 -1) 📝 `RadzenBlazorDemos.Server/App.razor` (+1 -1) 📝 `RadzenBlazorDemos/Pages/GetStarted.razor` (+1 -4) 📝 `RadzenBlazorDemos/Pages/ThemeServicePage.razor` (+7 -0) </details> ### 📄 Description Prevents reloading of the theme CSS file by RadzenTheme. Currently we suggest RadzenTheme to be used with an interactive render mode so the theme can change at runtime via ThemeService.SetTheme. Unfortunately hydrating RadzenTheme leads to removing the `<link>` tag that includes the theme and adding it again. In some cases this causes a visible flicker and downloading the CSS file a second time. This PR makes changes the way ThemeService.SetTheme works - it now changes the theme via JavaScript (`Radzen.setTheme`). To eliminate the flicker RadzenTheme should **no longer** be used with a `@rendermode` attribute set. OLD: ``` <RadzenTheme Theme="material" @rendermode="@InteractiveWebAssembly" /> ``` NEW ``` <RadzenTheme Theme="material" /> ``` Existing apps that use RadzenTheme with `@rendermode` should not be affected (but still remain prone to flicker even after this change). To avoid the flicker remove the `@rendermode` attribute from RadzenTheme in your App.razor file. We have updated the getting started instructions and will update the application templates in Radzen Blazor Studio accordingly. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
claunia added the pull-request label 2026-01-29 18:22:16 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#3177
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?