ios: fix app flickers on start

shonsirsha · shonsirsha · commit 4d188c7b271d · 2025-08-25T13:40:58.000+02:00
fixing ix it by adding a check for when react app is ready, which
runs recursively in WebView.swift. Also added launch screen
and transition to make app start feels smoother
diff --git a/frontends/ios/BitBoxApp/BitBoxApp.xcodeproj/project.pbxproj b/frontends/ios/BitBoxApp/BitBoxApp.xcodeproj/project.pbxproj
@@ -9,6 +9,8 @@
 /* Begin PBXBuildFile section */
 		8E1846EB2E0AFF6000802D8B /* NetworkMonitor.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8E1846EA2E0AFF5B00802D8B /* NetworkMonitor.swift */; };
 		8E1846EC2E0AFF6000802D8B /* NetworkMonitor.swift in Sources */ = {isa = PBXBuildFile; fileRef = 8E1846EA2E0AFF5B00802D8B /* NetworkMonitor.swift */; };
+		B536195B2E4B2D1B00B3E10D /* Launch Screen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = B536195A2E4B2D1B00B3E10D /* Launch Screen.storyboard */; };
+		B536195C2E4B2D1B00B3E10D /* Launch Screen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = B536195A2E4B2D1B00B3E10D /* Launch Screen.storyboard */; };
 		D700B5F62C884C34000496D4 /* Mobileserver.xcframework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = D76518BB2B1F8F7400DC03A9 /* Mobileserver.xcframework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
 		D700B5FD2CA2FFAF000496D4 /* WebView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D76516322B1F3D1A00DC03A9 /* WebView.swift */; };
 		D700B5FE2CA2FFAF000496D4 /* BitBoxAppApp.swift in Sources */ = {isa = PBXBuildFile; fileRef = D76516082B1F3B1300DC03A9 /* BitBoxAppApp.swift */; };
@@ -74,6 +76,7 @@
 
 /* Begin PBXFileReference section */
 		8E1846EA2E0AFF5B00802D8B /* NetworkMonitor.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NetworkMonitor.swift; sourceTree = "<group>"; };
+		B536195A2E4B2D1B00B3E10D /* Launch Screen.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = "Launch Screen.storyboard"; sourceTree = "<group>"; };
 		D700B5F82C888CB9000496D4 /* Config.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = Config.xcconfig; sourceTree = "<group>"; };
 		D700B5F92C986A3C000496D4 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist; path = Info.plist; sourceTree = "<group>"; };
 		D700B60A2CA2FFAF000496D4 /* BitBoxApp Testnet.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "BitBoxApp Testnet.app"; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -127,9 +130,18 @@
 /* End PBXFrameworksBuildPhase section */
 
 /* Begin PBXGroup section */
+		B536195D2E4B2D9E00B3E10D /* Assets */ = {
+			isa = PBXGroup;
+			children = (
+			);
+			path = Assets;
+			sourceTree = "<group>";
+		};
 		D76515FC2B1F3B1300DC03A9 = {
 			isa = PBXGroup;
 			children = (
+				B536195D2E4B2D9E00B3E10D /* Assets */,
+				B536195A2E4B2D1B00B3E10D /* Launch Screen.storyboard */,
 				D700B5F82C888CB9000496D4 /* Config.xcconfig */,
 				D76518BB2B1F8F7400DC03A9 /* Mobileserver.xcframework */,
 				D76516072B1F3B1300DC03A9 /* BitBoxApp */,
@@ -327,6 +339,7 @@
 			files = (
 				D700B6022CA2FFAF000496D4 /* assets in Resources */,
 				D700B6032CA2FFAF000496D4 /* Preview Assets.xcassets in Resources */,
+				B536195C2E4B2D1B00B3E10D /* Launch Screen.storyboard in Resources */,
 				D700B6042CA2FFAF000496D4 /* Assets.xcassets in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -337,6 +350,7 @@
 			files = (
 				D76518B62B1F45B300DC03A9 /* assets in Resources */,
 				D76516102B1F3B1500DC03A9 /* Preview Assets.xcassets in Resources */,
+				B536195B2E4B2D1B00B3E10D /* Launch Screen.storyboard in Resources */,
 				D765160D2B1F3B1500DC03A9 /* Assets.xcassets in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -468,9 +482,10 @@
 				INFOPLIST_KEY_CFBundleDisplayName = "BitBoxApp Testnet";
 				INFOPLIST_KEY_UIApplicationSceneManifest_Generation = YES;
 				INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents = YES;
-				INFOPLIST_KEY_UILaunchScreen_Generation = YES;
+				INFOPLIST_KEY_UILaunchScreen_Generation = NO;
+				INFOPLIST_KEY_UILaunchStoryboardName = "Launch Screen";
 				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPad = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight";
-				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = "UIInterfaceOrientationPortrait";
+				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = UIInterfaceOrientationPortrait;
 				IPHONEOS_DEPLOYMENT_TARGET = 16.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
@@ -500,9 +515,10 @@
 				INFOPLIST_KEY_CFBundleDisplayName = "BitBoxApp Testnet";
 				INFOPLIST_KEY_UIApplicationSceneManifest_Generation = YES;
 				INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents = YES;
-				INFOPLIST_KEY_UILaunchScreen_Generation = YES;
+				INFOPLIST_KEY_UILaunchScreen_Generation = NO;
+				INFOPLIST_KEY_UILaunchStoryboardName = "Launch Screen";
 				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPad = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight";
-				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = "UIInterfaceOrientationPortrait";
+				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = UIInterfaceOrientationPortrait;
 				IPHONEOS_DEPLOYMENT_TARGET = 16.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
@@ -648,9 +664,10 @@
 				INFOPLIST_KEY_CFBundleDisplayName = BitBoxApp;
 				INFOPLIST_KEY_UIApplicationSceneManifest_Generation = YES;
 				INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents = YES;
-				INFOPLIST_KEY_UILaunchScreen_Generation = YES;
+				INFOPLIST_KEY_UILaunchScreen_Generation = NO;
+				INFOPLIST_KEY_UILaunchStoryboardName = "Launch Screen";
 				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPad = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight";
-				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = "UIInterfaceOrientationPortrait";
+				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = UIInterfaceOrientationPortrait;
 				IPHONEOS_DEPLOYMENT_TARGET = 16.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
@@ -679,9 +696,10 @@
 				INFOPLIST_KEY_CFBundleDisplayName = BitBoxApp;
 				INFOPLIST_KEY_UIApplicationSceneManifest_Generation = YES;
 				INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents = YES;
-				INFOPLIST_KEY_UILaunchScreen_Generation = YES;
+				INFOPLIST_KEY_UILaunchScreen_Generation = NO;
+				INFOPLIST_KEY_UILaunchStoryboardName = "Launch Screen";
 				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPad = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight";
-				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = "UIInterfaceOrientationPortrait";
+				INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = UIInterfaceOrientationPortrait;
 				IPHONEOS_DEPLOYMENT_TARGET = 16.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
diff --git a/frontends/ios/BitBoxApp/BitBoxApp/Assets.xcassets/dbb_logo_light.imageset/Contents.json b/frontends/ios/BitBoxApp/BitBoxApp/Assets.xcassets/dbb_logo_light.imageset/Contents.json
@@ -0,0 +1,27 @@
+{
+    "images": [
+        {
+            "filename": "dbb_logo_dark.svg",
+            "idiom": "universal",
+            "scale": "1x"
+        },
+        {
+            "appearances": [
+                {
+                    "appearance": "luminosity",
+                    "value": "dark"
+                }
+            ],
+            "filename": "dbb_logo_light.svg",
+            "idiom": "universal",
+            "scale": "1x"
+        }
+    ],
+    "info": {
+        "author": "xcode",
+        "version": 1
+    },
+    "properties": {
+        "preserves-vector-representation": true
+    }
+}
diff --git a/frontends/ios/BitBoxApp/BitBoxApp/Assets.xcassets/dbb_logo_light.imageset/dbb_logo_dark.svg b/frontends/ios/BitBoxApp/BitBoxApp/Assets.xcassets/dbb_logo_light.imageset/dbb_logo_dark.svg
@@ -0,0 +1,3 @@
+<svg width="68" height="81" viewBox="0 0 68 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 61.2501V42.421L15.1709 35.88V6.57273L30.2152 0V48.0729L0 61.25V61.2501ZM68 61.4089L37.7531 48.2317V0.158835L52.829 6.7633V36.0389L68 42.6116V61.409V61.4089ZM34.0475 54.6774L64.2627 67.8228L34.0158 81L3.8956 67.8863L34.0475 54.6774Z" fill="#191919"/>
+</svg>
diff --git a/frontends/ios/BitBoxApp/BitBoxApp/Assets.xcassets/dbb_logo_light.imageset/dbb_logo_light.svg b/frontends/ios/BitBoxApp/BitBoxApp/Assets.xcassets/dbb_logo_light.imageset/dbb_logo_light.svg
@@ -0,0 +1,3 @@
+<svg width="68" height="81" viewBox="0 0 68 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 61.2501V42.421L15.1709 35.88V6.57273L30.2152 0V48.0729L0 61.25V61.2501ZM68 61.4089L37.7531 48.2317V0.158835L52.829 6.7633V36.0389L68 42.6116V61.409V61.4089ZM34.0475 54.6774L64.2627 67.8228L34.0158 81L3.8956 67.8863L34.0475 54.6774Z" fill="white"/>
+</svg>
diff --git a/frontends/ios/BitBoxApp/BitBoxApp/WebView.swift b/frontends/ios/BitBoxApp/BitBoxApp/WebView.swift
@@ -35,11 +35,20 @@ import Mobileserver
 let scheme = "qrc"
 
 class JavascriptBridge: NSObject, WKScriptMessageHandler {
+    weak var webView: WKWebView?
+    
     func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
         if message.name == "goCall", let body = message.body as? [String: AnyObject] {
             let queryID = body["queryID"] as! Int
             let query = body["query"] as! String
             MobileserverBackendCall(queryID, query)
+        } else if message.name == "appReady" {
+            // React app is ready, show the webview
+            DispatchQueue.main.async {
+                UIView.animate(withDuration: 0.3) {
+                    self.webView?.alpha = 1.0
+                }
+            }
         }
     }
 }
@@ -107,6 +116,7 @@ struct WebView: UIViewRepresentable {
         let contentController = WKUserContentController()
         let bridge = JavascriptBridge()
         contentController.add(bridge, name: "goCall")
+        contentController.add(bridge, name: "appReady")
         let config = WKWebViewConfiguration()
         config.userContentController = contentController
 
@@ -128,6 +138,11 @@ struct WebView: UIViewRepresentable {
         let webView = WKWebView(frame: .zero, configuration: config)
         webView.navigationDelegate = context.coordinator
         webView.uiDelegate = context.coordinator
+        // hide the WebView initially to prevent white flash (flicker) on initial load
+        webView.alpha = 0.0
+        
+        // set webView reference in bridge for appReady handling
+        bridge.webView = webView
         
         // Disables automatic content inset adjustment to prevent safe area issues
         // https://developer.apple.com/documentation/uikit/uiscrollview/contentinsetadjustmentbehavior-swift.property
@@ -156,6 +171,11 @@ struct WebView: UIViewRepresentable {
     }
     
     class Coordinator: NSObject, WKNavigationDelegate, WKUIDelegate {
+        func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
+            // React app will notify Swift when ready via appReady message handler
+            // This prevents the white flicker on app open
+        }
+        
         // Intercept all URLs
         func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
             guard let url = navigationAction.request.url else {
diff --git a/frontends/ios/BitBoxApp/Launch Screen.storyboard b/frontends/ios/BitBoxApp/Launch Screen.storyboard
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="23504" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <device id="retina6_12" orientation="portrait" appearance="light"/>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="23506"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="dbb_logo_light" translatesAutoresizingMaskIntoConstraints="NO" id="BitBox-Logo">
+                                <rect key="frame" x="162.5" y="386" width="68" height="81"/>
+                                <constraints>
+                                    <constraint firstAttribute="width" constant="68" id="logo-width"/>
+                                    <constraint firstAttribute="height" constant="81" id="logo-height"/>
+                                </constraints>
+                            </imageView>
+                        </subviews>
+                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                        <constraints>
+                            <constraint firstItem="BitBox-Logo" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="logo-centerX"/>
+                            <constraint firstItem="BitBox-Logo" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="logo-centerY"/>
+                        </constraints>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="53" y="375"/>
+        </scene>
+    </scenes>
+    <resources>
+        <image name="dbb_logo_light" width="68" height="81"/>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+    </resources>
+</document>
diff --git a/frontends/web/src/app.tsx b/frontends/web/src/app.tsx
@@ -23,6 +23,7 @@ import { useDefault } from './hooks/default';
 import { usePrevious } from './hooks/previous';
 import { useIgnoreDrop } from './hooks/drop';
 import { usePlatformClass } from './hooks/platform';
+import { useAppReady } from './hooks/appReady';
 import { AppRouter } from './routes/router';
 import { Wizard as BitBox02Wizard } from './routes/device/bitbox02/wizard';
 import { getAccounts } from './api/account';
@@ -174,6 +175,8 @@ export const App = () => {
   const isBitboxBootloader = devices[deviceIDs[0]] === 'bitbox02-bootloader';
   const showBottomNavigation = (deviceIDs.length > 0 || activeAccounts.length > 0) && !isBitboxBootloader;
 
+  useAppReady(accounts, devices);
+
   return (
     <ConnectedApp>
       <Providers>
diff --git a/frontends/web/src/globals.d.ts b/frontends/web/src/globals.d.ts
@@ -24,6 +24,7 @@ export declare global {
         }
         onMobileCallResponse?: (queryID: number, response: unknown) => void;
         onMobilePushNotification?: (msg: TPayload) => void;
+        reactAppReady?: boolean;
         runningOnIOS?: boolean;
         // Called by Android when the back button is pressed.
         onBackButtonPressed?: () => boolean;
@@ -32,6 +33,9 @@ export declare global {
             goCall: {
               postMessage: (msg: { queryID: number; query: string; }) => void;
             }
+            appReady: {
+              postMessage: (msg?: any) => void;
+            }
           }
         }
     }
diff --git a/frontends/web/src/hooks/appReady.ts b/frontends/web/src/hooks/appReady.ts
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2024 Shift Crypto AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useEffect } from 'react';
+
+/**
+ * Hook to signal to native iOS WebView that React app is ready to be shown.
+ * This prevents the white flicker on app launch by keeping the WebView hidden
+ * until the React app has finished loading its initial data.
+ */
+export const useAppReady = (accounts: any, devices: any) => {
+  useEffect(() => {
+    if (accounts !== undefined && devices !== undefined) {
+      window.reactAppReady = true;
+      if (window.runningOnIOS && window.webkit?.messageHandlers.appReady) {
+        window.webkit.messageHandlers.appReady.postMessage({});
+      }
+    }
+  }, [accounts, devices]);
+};

Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,7 @@ export declare global {`
`24`	`24`	`}`
`25`	`25`	`onMobileCallResponse?: (queryID: number, response: unknown) => void;`
`26`	`26`	`onMobilePushNotification?: (msg: TPayload) => void;`
	`27`	`+ reactAppReady?: boolean;`
`27`	`28`	`runningOnIOS?: boolean;`
`28`	`29`	`// Called by Android when the back button is pressed.`
`29`	`30`	`onBackButtonPressed?: () => boolean;`
`@@ -32,6 +33,9 @@ export declare global {`
`32`	`33`	`goCall: {`
`33`	`34`	`postMessage: (msg: { queryID: number; query: string; }) => void;`
`34`	`35`	`}`
	`36`	`+ appReady: {`
	`37`	`+ postMessage: (msg?: any) => void;`
	`38`	`+ }`
`35`	`39`	`}`
`36`	`40`	`}`
`37`	`41`	`}`