Prevent FOUC in RadzenTheme (#2294)

* ThemeService.SetTheme uses JavaScript to change the theme CSS files to prevent FOUC during Blazor initial hydration.

* Update the getting started instructions.

* Initialize the theme in ThemeService from RadzenTheme.

Author: akorchev

Radzen.Blazor/RadzenTheme.razor

@@ -4,8 +4,8 @@
 {
 <link rel="preload" href="@IconFontHref" as="font" type="font/woff2" crossorigin="anonymous" />
 }
-<link rel="stylesheet" href="@Href" />
+<link id="radzen-theme-link" rel="stylesheet" href="@Href" />
 @if (wcag)
 {
-<link rel="stylesheet" href="@WcagHref" />
+<link id="radzen-wcag-theme-link" rel="stylesheet" href="@WcagHref" />
 }

Radzen.Blazor/RadzenTheme.razor.cs

@@ -36,33 +36,14 @@ public partial class RadzenTheme : IDisposable
 
         private bool wcag;
 
-        private static readonly string? Version = typeof(RadzenTheme).Assembly.GetName().Version?.ToString();
+        private string Href => ThemeService.Href;
 
-        private string Href => $"{Path}/{theme}-base.css?v={Version}";
+        private string WcagHref => ThemeService.WcagHref;
 
-        private string WcagHref => $"{Path}/{theme}-wcag.css?v={Version}";
-
-        private string Path => Embedded ? $"_content/Radzen.Blazor/css" : "css";
-
-        private string IconFontPath => Embedded ? $"_content/Radzen.Blazor/fonts" : "fonts";
+        private string IconFontPath => ThemeService.Embedded ? $"_content/Radzen.Blazor/fonts" : "fonts";
 
         private string IconFontHref => $"{IconFontPath}/MaterialSymbolsOutlined.woff2";
 
-        private bool Embedded => theme switch
-        {
-            "material" => true,
-            "material-dark" => true,
-            "standard" => true,
-            "standard-dark" => true,
-            "humanistic" => true,
-            "humanistic-dark" => true,
-            "software" => true,
-            "software-dark" => true,
-            "default" => true,
-            "dark" => true,
-            _ => false
-        };
-
         private PersistingComponentStateSubscription? persistingSubscription;
 
         /// <inheritdoc />

Radzen.Blazor/ThemeService.cs

@@ -1,3 +1,6 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.JSInterop;
 using System;
 using System.Collections;
 using System.Collections.Generic;
@@ -366,12 +369,31 @@ public static class Themes
     /// <summary>
     /// Service for theme registration and management.
     /// </summary>
-    public class ThemeService
+    public class ThemeService(IJSRuntime jsRuntime, IServiceProvider serviceProvider)
     {
+
+        private string theme;
         /// <summary>
         /// Gets the current theme.
         /// </summary>
-        public string Theme { get; private set; }
+        public string Theme
+        {
+            get
+            {
+                if (theme == null)
+                {
+                    var persistentComponentState = serviceProvider.GetService<PersistentComponentState>();
+
+                    if (persistentComponentState?.TryTakeFromJson(nameof(Theme), out string persistedTheme) == true)
+                    {
+                        theme = persistedTheme;
+                    }
+                }
+                return theme;
+            }
+
+            private set => theme = value;
+        }
 
         /// <summary>
         /// Specify if the theme colors should meet WCAG contrast requirements.
@@ -430,8 +452,38 @@ public void SetTheme(ThemeOptions options)
             if (requiresChange && options.TriggerChange)
             {
                 ThemeChanged?.Invoke();
+
+                try
+                {
+                    jsRuntime.InvokeVoid("Radzen.setTheme", Href, WcagHref);
+                }
+                catch (Exception)
+                {
+                }
             }
         }
+        private static readonly string Version = typeof(ThemeService).Assembly.GetName().Version?.ToString();
+
+        internal string Href => $"{Path}/{Theme}-base.css?v={Version}";
+
+        internal string WcagHref => $"{Path}/{Theme}-wcag.css?v={Version}";
+
+        private string Path => Embedded ? $"_content/Radzen.Blazor/css" : "css";
+
+        internal bool Embedded => Theme switch
+        {
+            "material" => true,
+            "material-dark" => true,
+            "standard" => true,
+            "standard-dark" => true,
+            "humanistic" => true,
+            "humanistic-dark" => true,
+            "software" => true,
+            "software-dark" => true,
+            "default" => true,
+            "dark" => true,
+            _ => false
+        };
 
         /// <summary>
         /// Enables or disables WCAG contrast requirements.

Radzen.Blazor/wwwroot/Radzen.Blazor.js

@@ -2592,5 +2592,16 @@ window.Radzen = {
     unregisterScrollListener: function (element) {
       document.removeEventListener('scroll', element.scrollHandler, true);
       window.removeEventListener('resize', element.scrollHandler, true);
+    },
+    setTheme: function (href, wcagHref) {
+      const theme = document.getElementById('radzen-theme-link');
+      if (theme && theme.href != href) {
+        theme.href = href;
+      }
+
+      const wcagTheme = document.getElementById('radzen-wcag-theme-link');
+      if (wcagTheme && wcagTheme.href != wcagHref) {
+        wcagTheme.href = wcagHref;
+      }
     }
 };

RadzenBlazorDemos.Host/App.razor

@@ -21,7 +21,7 @@
     <base href="/" />
     <link href="css/site.css" rel="stylesheet" />
     <HeadOutlet @rendermode="InteractiveWebAssembly" />
-    <RadzenTheme Theme="material3" @rendermode="InteractiveWebAssembly" />
+    <RadzenTheme Theme="material3" />
     <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.min.css">
 </head>
 <body class="rz-scrollbars">

RadzenBlazorDemos.Server/App.razor

@@ -21,7 +21,7 @@
     <base href="/" />
     <link href="css/site.css" rel="stylesheet" />
     <HeadOutlet @rendermode="InteractiveServer" />
-    <RadzenTheme Theme="material3" @rendermode="InteractiveServer" />
+    <RadzenTheme Theme="material3" />
     <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.min.css">
 </head>
 <body class="rz-scrollbars">

RadzenBlazorDemos/Pages/GetStarted.razor

@@ -38,12 +38,9 @@ These instructions assume the new application layout which uses rendering modes
                 Open the <code>App.razor</code> file of your application. Add this code within the <code>&lt;head&gt;</code> element:
             </RadzenText>
 <pre class="rz-p-4">
-<code>&lt;RadzenTheme Theme="material" @@rendermode="InteractiveAuto" /&gt;
+<code>&lt;RadzenTheme Theme="material" /&gt;
 </code>
 </pre>
-            <RadzenAlert AlertStyle="AlertStyle.Info" Variant="Variant.Flat" Shade="Shade.Lighter" AllowClose="false">
-                Set the <code>@@rendermode</code> attribute to the render mode of your application e.g. <code>InteractiveServer</code>, <code>InteractiveWebAssembly</code> or <code>InteractiveAuto</code>.
-            </RadzenAlert>
             @IncludeJavaScript(("App.razor", CurrentVersion))
             @UseComponent(CurrentVersion)
             <RadzenText Anchor="@($"get-started/{CurrentVersion}#additional")" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-mt-12 rz-mb-4">6. Use Dialog, Notification, ContextMenu and Tooltip components</RadzenText>

RadzenBlazorDemos/Pages/ThemeServicePage.razor

@@ -32,6 +32,9 @@ The Radzen.Blazor library provides a built-in service that persists the current
 
     [Inject]
     private ThemeService ThemeService { get; set; }
+    
+    [Inject]
+    private IOptions<CookieThemeServiceOptions> Options { get; set; }
 
     protected override void OnInitialized()
     {
@@ -45,6 +48,10 @@ The Radzen.Blazor library provides a built-in service that persists the current
             {
                 ThemeService.SetTheme(theme, false);
             }
+            else
+            {
+                HttpContext.Response.Cookies.Append("MyApplicationTheme", "material" , new CookieOptions { Secure = Options.Value.IsSecure, Expires = DateTimeOffset.Now.Add(Options.Value.Duration) });    
+            }
         }
     }
 }