Fix dapps webview loading

CHANGELOG.md

@@ -32,6 +32,7 @@ This document logs notable, developer-facing updates to the NEAR Mobile Wallet.
 
 ### 🐛 Bug Fixes
 
+-   Fix dapps webview loading [fix/dapps-webview-loading](https://github.com/Peersyst/near-mobile-wallet/pull/548)
 -   Fix account being duplicated when creating new account [fix/create-account-duplicated](https://github.com/Peersyst/near-mobile-wallet/pull/546)
 -   Fix withdraw showing success when failing [fix/android-opening-default-browser](https://github.com/Peersyst/near-mobile-wallet/pull/545)
 -   Fix Android opening default browser [fix/android-opening-default-browser](https://github.com/Peersyst/near-mobile-wallet/pull/544)

src/module/common/component/feedback/LoadingLogo/LoadingLogo.styles.ts

@@ -0,0 +1,17 @@
+import { CircularProgress } from "@peersyst/react-native-components";
+import styled from "@peersyst/react-native-styled";
+import { NearLoadingIcon } from "icons";
+import { LoadingLogoIconProps, LoadingLogoRootProps } from "./LoadingLogo.types";
+import { alpha } from "@peersyst/react-utils";
+
+export const LoadingLogoIconRoot = styled(CircularProgress)<LoadingLogoRootProps>(({ size, color }) => ({
+    size,
+    thickness: 3,
+    color,
+    backgroundColor: alpha(color, 0.2),
+}));
+
+export const LoadingLogoIcon = styled(NearLoadingIcon)<LoadingLogoIconProps>(({ size, color }) => ({
+    color,
+    fontSize: size * 0.4,
+}));

src/module/common/component/feedback/LoadingLogo/LoadingLogo.tsx

@@ -0,0 +1,17 @@
+import { useColor } from "@peersyst/react-native-components";
+import { LoadingLogoIcon, LoadingLogoIconRoot } from "./LoadingLogo.styles";
+import { LoadingLogoProps } from "./LoadingLogo.types";
+import useWalletColor from "module/wallet/hook/useWalletColor";
+
+export function LoadingLogo({ style = {}, color: colorProp }: LoadingLogoProps): JSX.Element {
+    const walletColor = useWalletColor();
+    const parsedThemeColor = useColor(colorProp);
+    const { size = 120, color: styleColor, ...restStyle } = style;
+    const color = styleColor ?? parsedThemeColor ?? walletColor;
+
+    return (
+        <LoadingLogoIconRoot size={size} color={color} style={restStyle}>
+            <LoadingLogoIcon size={size} color={color} />
+        </LoadingLogoIconRoot>
+    );
+}

src/module/common/component/feedback/LoadingLogo/LoadingLogo.types.ts

@@ -0,0 +1,13 @@
+import { CircularProgressStyle, ThemeColor } from "@peersyst/react-native-components";
+
+export type LoadingLogoProps = {
+    color?: ThemeColor;
+    style?: CircularProgressStyle;
+};
+
+export type LoadingLogoRootProps = {
+    color: string;
+    size: number;
+};
+
+export type LoadingLogoIconProps = LoadingLogoRootProps;

src/module/common/component/feedback/LoadingModal/LoadingModal.styles.ts

@@ -1,8 +1,8 @@
 import styled from "@peersyst/react-native-styled";
-import { CircularProgress, Col } from "@peersyst/react-native-components";
+import { Col } from "@peersyst/react-native-components";
 import GradientPage from "module/common/component/layout/GradientPage/GradientPage";
 import { View } from "react-native";
-import { CircleCheckIcon, NearLoadingIcon } from "icons";
+import { CircleCheckIcon } from "icons";
 import Typography from "module/common/component/display/Typography/Typography";
 
 export const DarkLoadingModalOverlay = styled(View)(({ theme }) => ({
@@ -32,15 +32,3 @@ export const SuccessIcon = styled(CircleCheckIcon)(({ theme }) => ({
 export const LoadingModalMessage = styled(Typography)(({ theme }) => ({
     color: theme.palette.white,
 }));
-
-export const LoadingModalContentIcon = styled(CircularProgress)(({ theme }) => ({
-    size: 120,
-    thickness: 3,
-    color: theme.palette.white,
-    backgroundColor: theme.palette.overlay["20%"],
-}));
-
-export const LoadingModalIcon = styled(NearLoadingIcon)(({ theme }) => ({
-    color: theme.palette.white,
-    fontSize: 48,
-}));

src/module/common/component/feedback/LoadingModal/LoadingModal.tsx

@@ -1,18 +1,11 @@
 import { LoadingModalProps } from "./LoadingModal.types";
-import {
-    DarkLoadingModalOverlay,
-    LoadingModalRoot,
-    SuccessIcon,
-    LoadingModalContent,
-    LoadingModalMessage,
-    LoadingModalContentIcon,
-    LoadingModalIcon,
-} from "./LoadingModal.styles";
+import { DarkLoadingModalOverlay, LoadingModalRoot, SuccessIcon, LoadingModalContent, LoadingModalMessage } from "./LoadingModal.styles";
 import { useEffect, useState } from "react";
 import { notificationAsync, NotificationFeedbackType } from "expo-haptics";
 import useTranslate from "module/common/hook/useTranslate";
 import { Backdrop, Col } from "@peersyst/react-native-components";
 import Button from "module/common/component/input/Button/Button";
+import { LoadingLogo } from "../LoadingLogo/LoadingLogo";
 
 const LoadingModal = ({
     loading,
@@ -75,9 +68,7 @@ const LoadingModal = ({
                         </>
                     ) : (
                         <Col alignItems="center" gap={30} flex={1} justifyContent="center">
-                            <LoadingModalContentIcon>
-                                <LoadingModalIcon />
-                            </LoadingModalContentIcon>
+                            <LoadingLogo color="white" />
                             <Col gap={12} alignItems="center">
                                 <LoadingModalMessage variant="body1Strong" color="text">
                                     {processingMessage || translate("processing")}

src/module/dapp/screen/BrowserScreen/BrowserScreen.styles.tsx

@@ -1,7 +1,23 @@
 import { Col } from "@peersyst/react-native-components";
 import styled from "@peersyst/react-native-styled";
+import DAppWebView from "module/signer/containers/DAppWebView/DAppWebView";
 
 export const BrowserScreenRoot = styled(Col)(({ theme }) => ({
     flex: 1,
     backgroundColor: theme.palette.background,
 }));
+
+export const BrowserScreenWebView = styled(DAppWebView)(({ theme }) => ({
+    backgroundColor: theme.palette.background,
+}));
+
+export const BrowserScreenLoadingContainer = styled(Col)(({ theme }) => ({
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.palette.background,
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+}));

src/module/dapp/screen/BrowserScreen/BrowserScreen.tsx

@@ -1,31 +1,33 @@
-import { BrowserScreenRoot } from "./BrowserScreen.styles";
+import { BrowserScreenLoadingContainer, BrowserScreenRoot, BrowserScreenWebView } from "./BrowserScreen.styles";
 import { useBrowserScreen } from "./hooks/useBrowserScreen";
 import BrowserScreenHeader from "./BrowserScreenHeader/BrowserScreenHeader";
-import DAppWebView from "module/signer/containers/DAppWebView/DAppWebView";
 import { useEffect, useState } from "react";
+import { LoadingLogo } from "module/common/component/feedback/LoadingLogo/LoadingLogo";
+import { Col } from "@peersyst/react-native-components";
 
 const BrowserScreen = (): JSX.Element => {
     const { headerProps, webviewProps } = useBrowserScreen();
-
     // Workaround to ensure the screen infers the correct height without the header
     const [isLoaded, setIsLoaded] = useState(false);
+    const [isWebViewLoaded, setIsWebViewLoaded] = useState(false);
 
     useEffect(() => {
         setTimeout(() => {
             setIsLoaded(true);
-        }, 250);
+        }, 500);
     }, []);
 
     return (
         <BrowserScreenRoot>
-            {isLoaded ? (
-                <>
-                    <BrowserScreenHeader {...headerProps} />
-                    <DAppWebView {...webviewProps} />
-                </>
-            ) : (
-                <></>
-            )}
+            <BrowserScreenHeader {...headerProps} />
+            <Col flex={1}>
+                {isLoaded && <BrowserScreenWebView onLoadEnd={() => setIsWebViewLoaded(true)} {...webviewProps} />}
+                {(!isLoaded || !isWebViewLoaded) && (
+                    <BrowserScreenLoadingContainer>
+                        <LoadingLogo />
+                    </BrowserScreenLoadingContainer>
+                )}
+            </Col>
         </BrowserScreenRoot>
     );
 };