From 725fb5838555e8c8f2fac0b8bf18bc6975472ec6 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Tue, 2 Sep 2025 09:07:36 +0000
Subject: [PATCH] Add preloader and disable service worker to prevent blank
 screen issues

Introduces a visual preloader to the client's index.html and disables the service worker in main.tsx. Additionally, server-side middleware in index.ts is added to set no-cache headers for HTML pages, aiming to resolve the reported blank screen problem.

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   | 66 +++++++++++++++++++++++++++++++++++++++++++--
 client/src/main.tsx | 37 ++++++++++++++++---------
 server/index.ts     | 13 +++++++++
 3 files changed, 102 insertions(+), 14 deletions(-)
diff --git a/client/index.html b/client/index.html
index 6c168af..0afd9b9 100644
--- a/client/index.html
+++ b/client/index.html
@@ -54,20 +54,82 @@
     
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root">
+      <!-- Preloader to prevent white screen -->
+      <div id="app-preloader" style="
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 9999;
+        font-family: Arial, sans-serif;
+      ">
+        <div style="text-align: center; color: white;">
+          <div style="
+            width: 50px;
+            height: 50px;
+            background: linear-gradient(45deg, #6366f1, #8b5cf6);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 20px;
+            animation: pulse 2s infinite;
+          ">
+            <div style="
+              width: 0;
+              height: 0;
+              border-left: 16px solid white;
+              border-top: 12px solid transparent;
+              border-bottom: 12px solid transparent;
+              margin-left: 4px;
+            "></div>
+          </div>
+          <h2 style="margin: 0; font-size: 24px; font-weight: bold;">go4.video</h2>
+          <p style="margin: 10px 0 0; opacity: 0.8;">Loading...</p>
+        </div>
+      </div>
+      <style>
+        @keyframes pulse {
+          0%, 100% { transform: scale(1); }
+          50% { transform: scale(1.1); }
+        }
+      </style>
+    </div>
     <script type="module" src="/src/main.tsx"></script>
     <!-- Replit script removed - caused scrolling issues -->
     
     <!-- Debug script for deployment issues -->
     <script>
       console.log('🚀 go4.video loading...');
+      
+      // Clear any cached service workers
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.getRegistrations().then(function(registrations) {
+          for(let registration of registrations) {
+            registration.unregister();
+            console.log('🧹 Cleared service worker registration');
+          }
+        });
+      }
+      
       window.addEventListener('load', function() {
         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>Check browser console for details</p></div></div>';
+            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>';
+            
+            // Auto-refresh after 3 seconds
+            setTimeout(function() {
+              location.reload();
+            }, 3000);
           }
         }, 2000);
       });
diff --git a/client/src/main.tsx b/client/src/main.tsx
index f681e6f..ff2b065 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -4,18 +4,18 @@ import "./index.css";
 
 console.log('🎬 main.tsx starting...');
 
-// Registracija Service Worker-ja za PWA funkcionalnost
-if ('serviceWorker' in navigator) {
-  window.addEventListener('load', () => {
-    navigator.serviceWorker.register('/sw.js')
-      .then((registration) => {
-        console.log('SW registered: ', registration);
-      })
-      .catch((registrationError) => {
-        console.log('SW registration failed: ', registrationError);
-      });
-  });
-}
+// Disable Service Worker for now - can cause caching issues
+// if ('serviceWorker' in navigator) {
+//   window.addEventListener('load', () => {
+//     navigator.serviceWorker.register('/sw.js')
+//       .then((registration) => {
+//         console.log('SW registered: ', registration);
+//       })
+//       .catch((registrationError) => {
+//         console.log('SW registration failed: ', registrationError);
+//       });
+//   });
+// }
 
 try {
   const rootElement = document.getElementById("root");
@@ -32,6 +32,19 @@ try {
   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);
+    }
+  }, 100);
 } catch (error) {
   console.error('❌ Failed to mount React app:', error);
   
diff --git a/server/index.ts b/server/index.ts
index c94281a..9d7f7c7 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -10,6 +10,19 @@ const app = express();
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 
+// Prevent caching issues middleware
+app.use((req, res, next) => {
+  // Set no-cache headers for HTML pages to prevent blank screen issues
+  if (req.path === '/' || req.path.endsWith('.html') || !req.path.includes('.')) {
+    res.set({
+      'Cache-Control': 'no-cache, no-store, must-revalidate',
+      'Pragma': 'no-cache',
+      'Expires': '0'
+    });
+  }
+  next();
+});
+
 app.use((req, res, next) => {
   const start = Date.now();
   const path = req.path;
