refactor: window background color on mobile, hide webview until ready (#2618) [skip e2e]

packages/mobile/android/app/src/main/res/values/colors.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="background">#2E2E2E</color>
+    <color name="background">#000000</color>
 </resources>

packages/mobile/html/Web.bundle/src/index.html

@@ -26,6 +26,7 @@
     </script>
     <script src="web-src/app.js"></script>
     <style>
+        html,
         body {
             background-color: black;
         }

packages/mobile/src/MobileWebAppContainer.tsx

@@ -242,6 +242,10 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
       setShowAndroidWebviewUpdatePrompt(true)
       return
     }
+    if (message === 'appLoaded') {
+      setDidLoadEnd(true)
+      return
+    }
     try {
       const functionData = JSON.parse(message)
       void onFunctionMessage(functionData.functionName, functionData.messageId, functionData.args)
@@ -308,6 +312,8 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
     })
   }, [device])
 
+  const [didLoadEnd, setDidLoadEnd] = useState(false)
+
   if (showAndroidWebviewUpdatePrompt) {
     return (
       <View
@@ -353,7 +359,10 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
     <WebView
       ref={webViewRef}
       source={{ uri: sourceUri }}
-      style={{ backgroundColor: 'black' }}
+      style={{
+        backgroundColor: '#000000',
+        opacity: didLoadEnd ? 1 : 0,
+      }}
       originWhitelist={['*']}
       onError={(err) => console.error('An error has occurred', err)}
       onHttpError={() => console.error('An HTTP error occurred')}
@@ -385,6 +394,7 @@ const MobileWebAppContents = ({ destroyAndReload }: { destroyAndReload: () => vo
           component: CustomAndroidWebView,
         } as WebViewNativeConfig,
       })}
+      webviewDebuggingEnabled
     />
   )
 }

packages/web/src/javascripts/App.tsx

@@ -16,6 +16,9 @@ declare global {
     webClient?: DesktopManagerInterface
     electronRemoteBridge?: unknown
     reactNativeDevice?: WebDevice
+    ReactNativeWebView?: {
+      postMessage: (message: string) => void
+    }
     platform?: Platform
     isClipper?: boolean
 
@@ -91,6 +94,10 @@ const startApplication: StartApplication = async function startApplication(
         onDestroy={onDestroy}
       />,
     )
+
+    if (window.ReactNativeWebView) {
+      window.ReactNativeWebView.postMessage('appLoaded')
+    }
   }
 
   const domReady = document.readyState === 'complete' || document.readyState === 'interactive'