From c3f50f869a4f8e2d19c221351557e594a6c5d683 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Tue, 2 Sep 2025 10:31:39 +0000
Subject: [PATCH] Improve application loading robustness and error handling on
 Chrome

Add a timeout to detect and handle Chrome loading issues, implement preloading attributes, and improve error reporting for failed React app mounts.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/DyHCx4q
---
 client/index.html   |  32 ++++++++++--
 client/src/main.tsx | 116 ++++++++++++++++++++++++++++----------------
 2 files changed, 102 insertions(+), 46 deletions(-)

diff --git a/client/index.html b/client/index.html
index 0afd9b9..b986c0a 100644
--- a/client/index.html
+++ b/client/index.html
@@ -101,13 +101,34 @@
         }
       </style>
     </div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/main.tsx" defer></script>
+    <link rel="preload" href="/src/main.tsx" as="script" crossorigin>
+    <link rel="dns-prefetch" href="//fonts.googleapis.com">
+    <link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
     <!-- Replit script removed - caused scrolling issues -->
     
     <!-- Debug script for deployment issues -->
     <script>
       console.log('🚀 go4.video loading...');
       
+      // Set timeout to detect hanging in Chrome
+      let appLoadTimeout = setTimeout(function() {
+        console.warn('⚠️ App taking too long to load in Chrome, forcing refresh...');
+        const preloader = document.getElementById('app-preloader');
+        if (preloader) {
+          preloader.innerHTML = '<div style="text-align: center; color: white;"><h2>Loading timeout</h2><p>Refreshing automatically...</p></div>';
+        }
+        setTimeout(function() {
+          location.reload();
+        }, 2000);
+      }, 8000); // 8 second timeout for Chrome
+      
+      // Global callback for when app loads successfully
+      window.appLoaded = function() {
+        clearTimeout(appLoadTimeout);
+        console.log('⏱️ App load timeout cleared');
+      };
+      
       // Clear any cached service workers
       if ('serviceWorker' in navigator) {
         navigator.serviceWorker.getRegistrations().then(function(registrations) {
@@ -122,16 +143,17 @@
         console.log('✅ Window loaded');
         setTimeout(function() {
           const root = document.getElementById('root');
-          if (root && root.innerHTML.trim() === '') {
-            console.error('❌ React app failed to mount - root div is empty');
-            root.innerHTML = '<div style="color: red; padding: 20px; font-family: Arial; text-align: center; background: #000; height: 100vh; display: flex; align-items: center; justify-content: center;"><div><h1>Error: React app failed to load</h1><p>Refreshing page automatically...</p></div></div>';
+          const preloader = document.getElementById('app-preloader');
+          if (preloader && preloader.style.opacity !== '0') {
+            console.error('❌ React app failed to mount - preloader still visible');
+            preloader.innerHTML = '<div style="text-align: center; color: white;"><h2>Loading failed</h2><p>Refreshing automatically...</p></div>';
             
             // Auto-refresh after 3 seconds
             setTimeout(function() {
               location.reload();
             }, 3000);
           }
-        }, 2000);
+        }, 5000);
       });
       
       window.addEventListener('error', function(e) {
diff --git a/client/src/main.tsx b/client/src/main.tsx
index ff2b065..d5e5d0f 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -2,8 +2,20 @@ import { createRoot } from "react-dom/client";
 import App from "./App";
 import "./index.css";
 
+// Type declaration for global callback
+declare global {
+  interface Window {
+    appLoaded?: () => void;
+  }
+}
+
 console.log('🎬 main.tsx starting...');
 
+// Force immediate execution - no waiting for DOM
+document.addEventListener('DOMContentLoaded', function() {
+  console.log('📄 DOM Content Loaded');
+});
+
 // Disable Service Worker for now - can cause caching issues
 // if ('serviceWorker' in navigator) {
 //   window.addEventListener('load', () => {
@@ -17,48 +29,70 @@ console.log('🎬 main.tsx starting...');
 //   });
 // }
 
-try {
-  const rootElement = document.getElementById("root");
-  console.log('🎯 Root element found:', rootElement);
-  
-  if (!rootElement) {
-    throw new Error('Root element not found');
-  }
-  
-  console.log('🚀 Creating React root...');
-  const root = createRoot(rootElement);
-  
-  console.log('🎭 Rendering App component...');
-  root.render(<App />);
-  
-  console.log('✅ React app mounted successfully');
-  
-  // Remove preloader once React app has mounted
-  setTimeout(() => {
-    const preloader = document.getElementById('app-preloader');
-    if (preloader) {
-      preloader.style.opacity = '0';
-      preloader.style.transition = 'opacity 0.5s ease-out';
-      setTimeout(() => {
-        preloader.remove();
-        console.log('🎨 Preloader removed');
-      }, 500);
+// Force immediate execution function
+function initApp() {
+  try {
+    const rootElement = document.getElementById("root");
+    console.log('🎯 Root element found:', rootElement);
+    
+    if (!rootElement) {
+      throw new Error('Root element not found');
     }
-  }, 100);
-} catch (error) {
-  console.error('❌ Failed to mount React app:', error);
-  
-  // Fallback error display
-  const rootElement = document.getElementById("root");
-  if (rootElement) {
-    rootElement.innerHTML = `
-      <div style="color: red; padding: 20px; font-family: Arial; text-align: center; background: #000; height: 100vh; display: flex; align-items: center; justify-content: center;">
-        <div>
-          <h1>Critical Error: React app failed to start</h1>
-          <p>Error: ${error instanceof Error ? error.message : 'Unknown error'}</p>
-          <p>Check browser console for details</p>
+    
+    console.log('🚀 Creating React root...');
+    const root = createRoot(rootElement);
+    
+    console.log('🎭 Rendering App component...');
+    root.render(<App />);
+    
+    console.log('✅ React app mounted successfully');
+    
+    // Call global callback to clear timeout
+    if (window.appLoaded) {
+      window.appLoaded();
+    }
+    
+    // Remove preloader once React app has mounted  
+    setTimeout(() => {
+      const preloader = document.getElementById('app-preloader');
+      if (preloader) {
+        preloader.style.opacity = '0';
+        preloader.style.transition = 'opacity 0.5s ease-out';
+        setTimeout(() => {
+          preloader.remove();
+          console.log('🎨 Preloader removed');
+        }, 500);
+      }
+    }, 100);
+  } catch (error) {
+    console.error('❌ Failed to mount React app:', error);
+    
+    // Fallback error display
+    const rootElement = document.getElementById("root");
+    if (rootElement) {
+      rootElement.innerHTML = `
+        <div style="color: red; padding: 20px; font-family: Arial; text-align: center; background: #000; height: 100vh; display: flex; align-items: center; justify-content: center;">
+          <div>
+            <h1>Critical Error: React app failed to start</h1>
+            <p>Error: ${error instanceof Error ? error.message : 'Unknown error'}</p>
+            <p>Refreshing automatically in 3 seconds...</p>
+          </div>
         </div>
-      </div>
-    `;
+      `;
+      
+      // Auto-refresh on error
+      setTimeout(() => {
+        location.reload();
+      }, 3000);
+    }
   }
 }
+
+// Try to initialize immediately
+if (document.readyState === 'loading') {
+  // DOM still loading
+  document.addEventListener('DOMContentLoaded', initApp);
+} else {
+  // DOM already loaded
+  initApp();
+}