diff --git a/ts/features/itwallet/identification/screens/spid/ItwSpidIdpLoginScreen.tsx b/ts/features/itwallet/identification/screens/spid/ItwSpidIdpLoginScreen.tsx index fb42bea6520..bb443e021fe 100644 --- a/ts/features/itwallet/identification/screens/spid/ItwSpidIdpLoginScreen.tsx +++ b/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 = ( - -); - // 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) => ( { allowsInlineMediaPlayback mediaPlaybackRequiresUserAction userAgent={defaultUserAgent} + onLoadEnd={onLoadEnd} /> ) )(spidAuthUrl), @@ -122,15 +125,19 @@ const ItwSpidIdpLoginScreen = () => { spidAuthUrl, handleNavigationStateChange, handleShouldStartLoading, - onError + onError, + onLoadEnd ] ); - if (isMachineLoading) { - return LoadingSpinner; - } - - return {content}; + return ( + + {content} + + ); }; export default memo(ItwSpidIdpLoginScreen);