sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add preloader and disable service worker to prevent blank screen issues

Browse Source 
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
This commit is contained in:
sebastjanartic
2025-09-02 09:07:36 +00:00
parent 77a0871220
commit 725fb58385
3 changed files with 102 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/index.html
+64 -2
View File
@@ -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);
});