fix: seo problem and white flash screen

hamed-shirbandi · hamed-shirbandi · commit ef7b9dc98d97 · 2025-09-01T23:27:40.000+02:00
diff --git a/src/2-Clients/WebApp/Pages/Website/Shared/WebsiteLayout.razor b/src/2-Clients/WebApp/Pages/Website/Shared/WebsiteLayout.razor
@@ -9,52 +9,31 @@
     <link href="css/cb.website.spa.@(LocalizationSettings.GetCurrentLanguageDirection().ToLower()).min.css" rel="stylesheet" />
 </HeadContent>
 
-<SplashScreen BrandName="@ApplicationSettings.Localized.Name" BackgroundCssClass="simple-layout-dark-bg" ProgressBarCssClass="simple-layout-title-color" OnStarted="HandleSplashStarted" />
-
-@if (SplashScreenStarted)
-{
-    <div class="website-wrapper">
-        <BlazoredToasts Position="ToastPosition.BottomCenter"
-                        Timeout="5"
-                        IconType="IconType.Material"
-                        ErrorIcon=""
-                        InfoIcon=""
-                        SuccessIcon=""
-                        WarningIcon=""
-                        ShowProgressBar="true" />
-
-        <NavMenu />
-
-        <main>
-            @Body
-        </main>
-
-        <Footer />
-
-        @if (SettingAccessorService.Settings.AIChatBot.ShowChatBotWidgetOnWebsite)
-        {
-            <div class="chat-widget">
-                <ChatBotWidget Theme="ChatBotWidgetTheme.Dark" />
-            </div>
-        }
-    </div>
-
-}
-
-@code {
-    /// <summary>
-    /// Controls whether the splash screen has finished and the main content should be displayed.
-    /// This demonstrates how to implement a loading state for better user experience.
-    /// </summary>
-    bool SplashScreenStarted = false;
-
-    /// <summary>
-    /// Event handler called when the splash screen animation completes.
-    /// Sets the flag to show the main website content and hide the splash screen.
-    /// This demonstrates how to handle component lifecycle events in Blazor.
-    /// </summary>
-    private void HandleSplashStarted()
+<SplashScreen BrandName="@ApplicationSettings.Localized.Name" BackgroundCssClass="simple-layout-dark-bg" ProgressBarCssClass="simple-layout-title-color" />
+
+<div id="main-layout-wrapper" class="website-wrapper">
+    <BlazoredToasts Position="ToastPosition.BottomCenter"
+                    Timeout="5"
+                    IconType="IconType.Material"
+                    ErrorIcon=""
+                    InfoIcon=""
+                    SuccessIcon=""
+                    WarningIcon=""
+                    ShowProgressBar="true" />
+
+    <NavMenu />
+
+    <main>
+        @Body
+    </main>
+
+    <Footer />
+
+    @if (SettingAccessorService.Settings.AIChatBot.ShowChatBotWidgetOnWebsite)
     {
-        SplashScreenStarted = true;
+        <div class="chat-widget">
+            <ChatBotWidget Theme="ChatBotWidgetTheme.Dark" />
+        </div>
     }
-}
+
+</div>
diff --git a/src/2-Clients/WebApp/Pages/_Host.cshtml b/src/2-Clients/WebApp/Pages/_Host.cshtml
@@ -20,12 +20,10 @@
     <base href="~/" />
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 </head>
-<body style="font-family: @LocalizationSettings.GetCurrentLanguageFont() !important">
+<body style="background-color:#362e6f; font-family: @LocalizationSettings.GetCurrentLanguageFont() !important;">
 
     <component type="typeof(App)" render-mode="ServerPrerendered" />
 
-    <component type="typeof(ConnectionState)" render-mode="ServerPrerendered" />
-
     <script src="js/cb.webapp.spa.min.js"></script>
     <script src="_framework/blazor.server.js"></script>
 </body>
diff --git a/src/2-Clients/WebApp/wwwroot/website/js/app.js b/src/2-Clients/WebApp/wwwroot/website/js/app.js
@@ -166,3 +166,18 @@ document.addEventListener('DOMContentLoaded', function() {
     };
 });
 
+// to remove the white flash screen on page load by hiding the main-layout-wrapper tag and showing it after 1 second
+// during this time the splash screen will be visible
+window.addEventListener("DOMContentLoaded", () => {
+
+    const websiteWrapper = document.getElementById('main-layout-wrapper');
+    if (websiteWrapper) {
+        // Hide immediately
+        websiteWrapper.style.display = "none";
+
+        // Remove style after 1 second
+        setTimeout(() => {
+            websiteWrapper.removeAttribute('style');
+        }, 1000);
+    }
+});
