From 4b61b14d369e8e07e46672544cfb91cf083f59cb Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Thu, 18 Jun 2026 21:27:34 +0700
Subject: [PATCH] fix: splash screen + ErrorBoundary dark bg for Capacitor APK
 white screen

- Add SplashScreen.hide() call in main.tsx so splash dismisses when JS loads
- Set launchShowDuration: 0 + launchAutoHide: true in capacitor.config.ts
- Fix ErrorBoundary to use bg-black text-white instead of bg-background
  (bg-background = white before dark class is applied = white screen on error)
- These three combined should eliminate the white screen in the APK

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 capacitor.config.ts              |  3 ++-
 index.html                       |  3 +--
 src/components/ErrorBoundary.tsx |  2 +-
 src/main.tsx                     | 10 +++++++++-
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/capacitor.config.ts b/capacitor.config.ts
index b854eca..f66b20a 100644
--- a/capacitor.config.ts
+++ b/capacitor.config.ts
@@ -19,7 +19,8 @@ const config: CapacitorConfig = {
   },
   plugins: {
     SplashScreen: {
-      launchShowDuration: 1500,
+      launchShowDuration: 0,
+      launchAutoHide: true,
       backgroundColor: '#000000',
       androidSplashResourceName: 'splash',
       androidScaleType: 'CENTER_CROP',
diff --git a/index.html b/index.html
index db70049..6c9d2d8 100644
--- a/index.html
+++ b/index.html
@@ -39,9 +39,8 @@
     <meta name="twitter:description" content="Discover skate spots, find coaches, join events on Nostr.">
     <meta name="twitter:image" content="https://skate-spots.org/images/icon-1024.png">
 
-    <!-- Leaflet CSS (loaded via CDN to avoid build issues) -->
+    <!-- Leaflet CSS -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
-    <!-- Leaflet MarkerCluster CSS -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" crossorigin="">
     <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css" crossorigin="">
   </head>
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index ffa1f37..c19d500 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -54,7 +54,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
       }
 
       return (
-        <div className="min-h-screen bg-background flex items-center justify-center p-4">
+        <div className="min-h-screen bg-black text-white flex items-center justify-center p-4">
           <div className="max-w-md w-full space-y-4">
             <div className="text-center">
               <h2 className="text-2xl font-bold text-foreground mb-2">
diff --git a/src/main.tsx b/src/main.tsx
index 0ff7000..887f34f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,6 +7,14 @@ import { ErrorBoundary } from '@/components/ErrorBoundary';
 import App from './App.tsx';
 import './index.css';
 
+// Hide Capacitor splash screen once JS is ready
+// Must be called manually when autoHide: false (or as a safety net)
+if (typeof window !== 'undefined') {
+  import('@capacitor/splash-screen').then(({ SplashScreen }) => {
+    SplashScreen.hide().catch(() => {/* not in Capacitor context */});
+  }).catch(() => {/* web build - no Capacitor */});
+}
+
 // Outfit font for body text
 import '@fontsource-variable/outfit';
 // Bebas Neue — bold condensed display font for headlines
@@ -16,7 +24,7 @@ import '@fontsource/barlow-condensed/400.css';
 import '@fontsource/barlow-condensed/600.css';
 import '@fontsource/barlow-condensed/700.css';
 
-// Leaflet CSS is loaded via CDN in index.html to avoid build issues
+// Leaflet CSS is loaded via CDN in index.html
 
 /**
  * AMBER CALLBACK PRE-CHECK