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);