chore(IT Wallet): [SIW-1878] Loader before SPID Login Webview

ts/features/itwallet/identification/screens/spid/ItwSpidIdpLoginScreen.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useMemo } from "react";
+import React, { memo, useCallback, useMemo, useState } from "react";
 import { Linking, StyleSheet, View } from "react-native";
 import { WebView, WebViewNavigation } from "react-native-webview";
 import * as O from "fp-ts/lib/Option";
@@ -8,7 +8,6 @@ import {
   selectIsLoading
 } from "../../../machine/eid/selectors";
 import { ItwEidIssuanceMachineContext } from "../../../machine/provider";
-import LoadingScreenContent from "../../../../../components/screens/LoadingScreenContent";
 import I18n from "../../../../../i18n";
 import { originSchemasWhiteList } from "../../../../../screens/authentication/originSchemasWhiteList";
 import { itWalletIssuanceRedirectUri } from "../../../../../config";
@@ -17,15 +16,12 @@ import {
   HeaderSecondLevelHookProps,
   useHeaderSecondLevel
 } from "../../../../../hooks/useHeaderSecondLevel";
+import LoadingSpinnerOverlay from "../../../../../components/LoadingSpinnerOverlay";
 
 const styles = StyleSheet.create({
   webViewWrapper: { flex: 1 }
 });
 
-const LoadingSpinner = (
-  <LoadingScreenContent contentTitle={I18n.t("global.genericWaiting")} />
-);
-
 // To ensure the server recognizes the client as a valid mobile device, we use a custom user agent header.
 const defaultUserAgent =
   "Mozilla/5.0 (iPhone; CPU iPhone OS 14_0_1 like Mac OS X; Linux; Android 10) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1";
@@ -41,6 +37,11 @@ const ItwSpidIdpLoginScreen = () => {
   const spidAuthUrl =
     ItwEidIssuanceMachineContext.useSelector(selectAuthUrlOption);
   const machineRef = ItwEidIssuanceMachineContext.useActorRef();
+  const [isWebViewLoading, setWebViewLoading] = useState(true);
+
+  const onLoadEnd = useCallback(() => {
+    setWebViewLoading(false);
+  }, []);
 
   const onError = useCallback(() => {
     machineRef.send({ type: "error", scope: "spid-login" });
@@ -98,9 +99,10 @@ const ItwSpidIdpLoginScreen = () => {
   const content = useMemo(
     () =>
       O.fold(
-        () => LoadingSpinner,
+        () => null,
         (url: string) => (
           <WebView
+            key={"spid_webview"}
             cacheEnabled={false}
             androidCameraAccessDisabled
             androidMicrophoneAccessDisabled
@@ -115,22 +117,27 @@ const ItwSpidIdpLoginScreen = () => {
             allowsInlineMediaPlayback
             mediaPlaybackRequiresUserAction
             userAgent={defaultUserAgent}
+            onLoadEnd={onLoadEnd}
           />
         )
       )(spidAuthUrl),
     [
       spidAuthUrl,
       handleNavigationStateChange,
       handleShouldStartLoading,
-      onError
+      onError,
+      onLoadEnd
     ]
   );
 
-  if (isMachineLoading) {
-    return LoadingSpinner;
-  }
-
-  return <View style={styles.webViewWrapper}>{content}</View>;
+  return (
+    <LoadingSpinnerOverlay
+      isLoading={isWebViewLoading || isMachineLoading}
+      loadingOpacity={1.0}
+    >
+      <View style={styles.webViewWrapper}>{content}</View>
+    </LoadingSpinnerOverlay>
+  );
 };
 
 export default memo(ItwSpidIdpLoginScreen);