From 45e4cc1e343865c607329a47c12b085c00658821 Mon Sep 17 00:00:00 2001
From: Tilak Puli <tilakpuli15@gmail.com>
Date: Wed, 8 Mar 2023 17:25:21 +0530
Subject: [PATCH] feat(#625):[Tilak|Adityan] show saving overlay only after
 1sec

---
 machines/openIdBle/request.ts                 |  6 ++++-
 machines/openIdBle/request.typegen.ts         |  6 +++--
 screens/Request/ReceiveVcScreen.tsx           |  6 ++++-
 shared/hooks/useOverlayVisibleAfterTimeout.ts | 23 +++++++++++++++++++
 4 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 shared/hooks/useOverlayVisibleAfterTimeout.ts

diff --git a/machines/openIdBle/request.ts b/machines/openIdBle/request.ts
index d3243954ce..0e8b3ada1b 100644
--- a/machines/openIdBle/request.ts
+++ b/machines/openIdBle/request.ts
@@ -424,7 +424,11 @@ export const requestMachine =
                 },
               },
             },
-            navigatingToHome: {},
+            navigatingToHome: {
+              invoke: {
+                src: 'disconnect',
+              },
+            },
             savingFailed: {
               initial: 'idle',
               entry: ['setReceiveLogTypeDiscarded', 'logReceived'],
diff --git a/machines/openIdBle/request.typegen.ts b/machines/openIdBle/request.typegen.ts
index 8570a05001..575bab80ff 100644
--- a/machines/openIdBle/request.typegen.ts
+++ b/machines/openIdBle/request.typegen.ts
@@ -24,7 +24,9 @@ export interface Typegen0 {
   'invokeSrcNameMap': {
     advertiseDevice: 'done.invoke.request.waitingForConnection:invocation[0]';
     checkBluetoothService: 'done.invoke.request.checkingBluetoothService.checking:invocation[0]';
-    disconnect: 'done.invoke.request.clearingConnection:invocation[0]';
+    disconnect:
+      | 'done.invoke.request.clearingConnection:invocation[0]'
+      | 'done.invoke.request.reviewing.navigatingToHome:invocation[0]';
     exchangeDeviceInfo: 'done.invoke.request.exchangingDeviceInfo:invocation[0]';
     monitorConnection: 'done.invoke.request:invocation[0]';
     receiveVc: 'done.invoke.request.waitingForVc:invocation[0]';
@@ -105,7 +107,7 @@ export interface Typegen0 {
       | 'DISMISS'
       | 'xstate.after(DESTROY_TIMEOUT)#request.clearingConnection';
     checkBluetoothService: 'SCREEN_FOCUS' | 'SWITCH_PROTOCOL';
-    disconnect: '' | 'DISMISS';
+    disconnect: '' | 'DISMISS' | 'GO_TO_RECEIVED_VC_TAB';
     exchangeDeviceInfo: 'RECEIVE_DEVICE_INFO';
     monitorConnection: 'xstate.init';
     receiveVc: 'EXCHANGE_DONE';
diff --git a/screens/Request/ReceiveVcScreen.tsx b/screens/Request/ReceiveVcScreen.tsx
index 66f37959ac..3a0fe26591 100644
--- a/screens/Request/ReceiveVcScreen.tsx
+++ b/screens/Request/ReceiveVcScreen.tsx
@@ -9,10 +9,14 @@ import { useReceiveVcScreen } from './ReceiveVcScreenController';
 import { VerifyIdentityOverlay } from '../VerifyIdentityOverlay';
 import { MessageOverlay } from '../../components/MessageOverlay';
 import { isBLEEnabled } from '../../lib/smartshare';
+import { useOverlayVisibleAfterTimeout } from '../../shared/hooks/useOverlayVisibleAfterTimeout';
 
 export const ReceiveVcScreen: React.FC = () => {
   const { t } = useTranslation('ReceiveVcScreen');
   const controller = useReceiveVcScreen();
+  const savingOverlayVisible = useOverlayVisibleAfterTimeout(
+    controller.isAccepting
+  );
 
   return (
     <React.Fragment>
@@ -104,7 +108,7 @@ export const ReceiveVcScreen: React.FC = () => {
       </MessageOverlay>
 
       <MessageOverlay
-        isVisible={controller.isAccepting}
+        isVisible={savingOverlayVisible}
         message={t('saving', {
           vcLabel: controller.vcLabel.plural,
         })}
diff --git a/shared/hooks/useOverlayVisibleAfterTimeout.ts b/shared/hooks/useOverlayVisibleAfterTimeout.ts
new file mode 100644
index 0000000000..27c3e15aae
--- /dev/null
+++ b/shared/hooks/useOverlayVisibleAfterTimeout.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+export const useOverlayVisibleAfterTimeout = (
+  visibleStart = false,
+  ms = 1000
+) => {
+  const [visible, setVisible] = useState(false);
+  const [savingTimeout, setSavingTimeout] = useState(null);
+
+  useEffect(() => {
+    if (visibleStart) {
+      const timeout = setTimeout(() => {
+        setVisible(true);
+      }, ms);
+      setSavingTimeout(timeout);
+    } else {
+      clearTimeout(savingTimeout);
+      setVisible(false);
+    }
+  }, [visibleStart]);
+
+  return visible;
+};