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] Prevent FOUC in RadzenTheme #3181

New Issue
Closed
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

Original Pull Request: https://github.com/radzenhq/radzen-blazor/pull/2294

State: closed
Merged: Yes

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.

**Original Pull Request:** https://github.com/radzenhq/radzen-blazor/pull/2294 **State:** closed **Merged:** Yes --- 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.
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#3181
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?