From 86e9c90c10832654da4c542919702040bd014e40 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 3 Nov 2023 16:50:11 +0530
Subject: [PATCH] refactor: window background color on mobile, hide webview
 until ready (#2618) [skip e2e]

---
 .../android/app/src/main/res/values/colors.xml       |  2 +-
 packages/mobile/html/Web.bundle/src/index.html       |  1 +
 packages/mobile/src/MobileWebAppContainer.tsx        | 12 +++++++++++-
 packages/web/src/javascripts/App.tsx                 |  7 +++++++
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/mobile/android/app/src/main/res/values/colors.xml b/packages/mobile/android/app/src/main/res/values/colors.xml
index 1967a36e0..e4e761677 100644
--- a/packages/mobile/android/app/src/main/res/values/colors.xml
+++ b/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>
\ No newline at end of file
diff --git a/packages/mobile/html/Web.bundle/src/index.html b/packages/mobile/html/Web.bundle/src/index.html
index b392bb809..7cf4b3153 100644
--- a/packages/mobile/html/Web.bundle/src/index.html
+++ b/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;
         }
diff --git a/packages/mobile/src/MobileWebAppContainer.tsx b/packages/mobile/src/MobileWebAppContainer.tsx
index 74d56255e..e931da90c 100644
--- a/packages/mobile/src/MobileWebAppContainer.tsx
+++ b/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
     />
   )
 }
diff --git a/packages/web/src/javascripts/App.tsx b/packages/web/src/javascripts/App.tsx
index ebaa71e2d..4641da2e5 100644
--- a/packages/web/src/javascripts/App.tsx
+++ b/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'