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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
client/index.html
View File

@ -54,20 +54,82 @@
</head> </head>
<body> <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> <script type="module" src="/src/main.tsx"></script>
<!-- Replit script removed - caused scrolling issues --> <!-- Replit script removed - caused scrolling issues -->
<!-- Debug script for deployment issues --> <!-- Debug script for deployment issues -->
<script> <script>
console.log('🚀 go4.video loading...'); 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() { window.addEventListener('load', function() {
console.log('✅ Window loaded'); console.log('✅ Window loaded');
setTimeout(function() { setTimeout(function() {
const root = document.getElementById('root'); const root = document.getElementById('root');
if (root && root.innerHTML.trim() === '') { if (root && root.innerHTML.trim() === '') {
console.error('❌ React app failed to mount - root div is empty'); 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); }, 2000);
}); });

37
client/src/main.tsx
View File

@ -4,18 +4,18 @@ import "./index.css";
console.log('🎬 main.tsx starting...'); console.log('🎬 main.tsx starting...');
// Registracija Service Worker-ja za PWA funkcionalnost // Disable Service Worker for now - can cause caching issues
if ('serviceWorker' in navigator) { // if ('serviceWorker' in navigator) {
window.addEventListener('load', () => { // window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js') // navigator.serviceWorker.register('/sw.js')
.then((registration) => { // .then((registration) => {
console.log('SW registered: ', registration); // console.log('SW registered: ', registration);
}) // })
.catch((registrationError) => { // .catch((registrationError) => {
console.log('SW registration failed: ', registrationError); // console.log('SW registration failed: ', registrationError);
}); // });
}); // });
} // }
try { try {
const rootElement = document.getElementById("root"); const rootElement = document.getElementById("root");
@ -32,6 +32,19 @@ try {
root.render(<App />); root.render(<App />);
console.log('✅ React app mounted successfully'); 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) { } catch (error) {
console.error('❌ Failed to mount React app:', error); console.error('❌ Failed to mount React app:', error);

13
server/index.ts
View File

@ -10,6 +10,19 @@ const app = express();
app.use(express.json()); app.use(express.json());
app.use(express.urlencoded({ extended: false })); 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) => { app.use((req, res, next) => {
const start = Date.now(); const start = Date.now();
const path = req.path; const path = req.path;