feat(mosip#625):[Tilak|Adityan] show saving overlay only after 1sec

tw-mosip · Mar 8, 2023 · 45e4cc1 · 45e4cc1
1 parent 79e6627
commit 45e4cc1
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+};