fix: optimize bunker loading and add progress feedback

src/components/OfflineIndicator.tsx

@@ -6,6 +6,7 @@ import { WifiOff, ShieldCheck } from 'lucide-react';
 export default function OfflineIndicator() {
     const [isOffline, setIsOffline] = useState(false);
     const [isBunkerReady, setIsBunkerReady] = useState(false);
+    const [progress, setProgress] = useState(0);
 
     useEffect(() => {
         setIsOffline(!navigator.onLine);
@@ -17,6 +18,9 @@ export default function OfflineIndicator() {
         const handleOffline = () => setIsOffline(true);
 
         const handleMessage = (event: MessageEvent) => {
+            if (event.data?.type === 'PRECACHE_PROGRESS') {
+                setProgress(event.data.progress);
+            }
             if (event.data?.type === 'PRECACHE_COMPLETE' || event.data?.type === 'BUNKER_STATUS') {
                 console.log('🛡️ PWA: Bunker is ready for offline use!');
                 setIsBunkerReady(true);
@@ -30,10 +34,27 @@ export default function OfflineIndicator() {
         if ('serviceWorker' in navigator) {
             navigator.serviceWorker.addEventListener('message', handleMessage);
 
-            // Proactively check status if SW is already active
-            if (navigator.serviceWorker.controller) {
-                navigator.serviceWorker.controller.postMessage({ type: 'CHECK_BUNKER_STATUS' });
-            }
+            // Proactive check
+            navigator.serviceWorker.ready.then((registration) => {
+                if (registration.active) {
+                    registration.active.postMessage({ type: 'CHECK_BUNKER_STATUS' });
+                }
+            });
+
+            // Fallback: If after 20s we still think we are loading but SW is active, assume ready
+            const timer = setTimeout(() => {
+                const isSwActive = !!navigator.serviceWorker.controller;
+                if (!isBunkerReady && isSwActive) {
+                    setIsBunkerReady(true);
+                    localStorage.setItem('whisky_bunker_ready', 'true');
+                }
+            }, 20000);
+            return () => {
+                clearTimeout(timer);
+                window.removeEventListener('online', handleOnline);
+                window.removeEventListener('offline', handleOffline);
+                navigator.serviceWorker.removeEventListener('message', handleMessage);
+            };
         }
 
         return () => {
@@ -43,7 +64,7 @@ export default function OfflineIndicator() {
                 navigator.serviceWorker.removeEventListener('message', handleMessage);
             }
         };
-    }, []);
+    }, [isBunkerReady]);
 
     if (isOffline) {
         return (
@@ -76,7 +97,7 @@ export default function OfflineIndicator() {
             <div className="bg-zinc-900/80 backdrop-blur-md border border-amber-500/30 px-3 py-1.5 rounded-full flex items-center gap-2 shadow-lg shadow-amber-500/10">
                 <div className="w-1.5 h-1.5 bg-amber-500 rounded-full animate-pulse" />
                 <span className="text-[9px] font-black uppercase tracking-widest text-zinc-300">
-                    Bunker wird geladen...
+                    Bunker wird geladen... {progress > 0 ? `${progress}%` : ''}
                 </span>
             </div>
         </div>