fix

Author: elv1s42

index.html

@@ -20,6 +20,25 @@
   <meta name="twitter:image" content="https://cssville.xyz" />
   <meta name="twitter:card" content="summary_large_image">
   <meta name="keywords" content="CSS utility-first framework" />
+  <style>
+    /* Hide the root element until everything is loaded and metadata is set */
+    #root {
+      visibility: hidden;
+    }
+    /* Add a loading indicator that will be shown until the page is ready */
+    .loading-indicator {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: #f5f5f5;
+      z-index: 9999;
+    }
+  </style>
   <link rel="stylesheet" type="text/css" href="/web.bundle.css">
   <link rel="stylesheet" href="/github-dark-dimmed.min.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -49,8 +68,12 @@
     });
     myCookieBanner.init(); 
   </script>
+  <!-- Loading indicator that will be shown until the page is ready -->
+  <div id="loading-indicator" class="loading-indicator">
+    <div>Loading...</div>
+  </div>
   <div class="dis-flex min-hei-100vh fle-dir-column wid-full" id="root"></div>
   <script src="/web.bundle.js"></script>
 </body>
 
-</html>
+</html>

index.tsx

@@ -63,24 +63,47 @@ function initializeMetadata() {
 const router = createBrowserRouter(Routes);
 
 function docReady(fn: () => void) {
-  // see if DOM is already available
-  if (document.readyState === "complete" || document.readyState === "interactive") {
-    // Initialize metadata before rendering React app
-    initializeMetadata();
-    // call on next available tick
-    setTimeout(fn, 1);
+  // Initialize metadata as early as possible
+  initializeMetadata();
+
+  // Only render when document is fully loaded (all resources including images, stylesheets, etc.)
+  if (document.readyState === "complete") {
+    // Document is already fully loaded, call function immediately
+    fn();
   } else {
-    document.addEventListener("DOMContentLoaded", () => {
-      initializeMetadata();
+    // Wait for window.onload which ensures all resources are loaded
+    window.addEventListener("load", () => {
       fn();
     });
   }
 }
 
+// Function to show the page content and hide the loading indicator
+function showPageContent() {
+  // Show the root element
+  const rootElement = document.getElementById('root');
+  if (rootElement) {
+    rootElement.style.visibility = 'visible';
+  }
+
+  // Hide the loading indicator
+  const loadingIndicator = document.getElementById('loading-indicator');
+  if (loadingIndicator) {
+    loadingIndicator.style.display = 'none';
+  }
+}
+
 docReady(function () {
+  // Initialize React app
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
     <RouterProvider router={router} />
   );
+
+  // Initialize syntax highlighting
   hljs.highlightAll();
+
+  // Show the page content after a small delay to ensure React has rendered
+  // and all metadata has been applied
+  setTimeout(showPageContent, 50);
 });