ES-1366 - Implement the loading spinner just after slot check, before…

… the web socket is connected (#277) * fix: add loading indicator for web socket initiation Signed-off-by: bunsy-0900 <[email protected]> * fix: revert changes Signed-off-by: bunsy-0900 <[email protected]> --------- Signed-off-by: bunsy-0900 <[email protected]>
mosip · Jul 16, 2024 · f14c551 · f14c551
1 parent 07c0640
commit f14c551
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/signup-ui/src/App.css b/signup-ui/src/App.css
@@ -150,6 +150,10 @@ body {
   transition: 0.4s;
 }
 
+.video-message-loading {
+  border: var(--video-message-bg-color);
+}
+
 .no-video-border {
   width: 100vw;
   height: calc(100vh - 207px);

diff --git a/signup-ui/src/pages/EkycVerificationPage/VerificationScreen/VerificationScreen.tsx b/signup-ui/src/pages/EkycVerificationPage/VerificationScreen/VerificationScreen.tsx
@@ -18,6 +18,7 @@ import {
   KycProviderDetail,
   KycProviderDetailProp,
 } from "~typings/types";
+import LoadingIndicator from "~/common/LoadingIndicator";
 
 import {
   EkycVerificationStore,
@@ -47,6 +48,7 @@ export const VerificationScreen = ({
   const [colorVerification, setColorVerification] = useState<boolean>(false);
   const [bgColor, setBgColor] = useState<string | null>(null);
   const [imageFrames, setImageFrames] = useState<IdvFrames[]>([]);
+
   // let imageFrames: IdvFrames[] = [];
   const [identityVerification, setIdentityVerification] =
     useState<IdentityVerificationState | null>({
@@ -276,7 +278,7 @@ export const VerificationScreen = ({
     window.location.replace(
       `${consentUrl}${encodedIdToken}`
     );
-  }
+  };
 
   const endWithSuccess = (successMsgCode: string) => {
     resetEverything();
@@ -481,8 +483,18 @@ export const VerificationScreen = ({
     <EkycStatusAlert config={alertConfig} />
   ) : (
     <div className="sm:pb-[4em]">
-      {!errorBannerMessage && message && (
-        <div className="video-message sm:w-[90vw]">{message}</div>
+      {!connected ? (
+        <div className="video-message sm:w-[90vw]">
+          <LoadingIndicator
+            message="please_wait"
+            msgParam="Loading. Please wait....."
+            iconClass="video-message-loading"
+            divClass=""
+          />
+        </div>
+      ) : (
+        !errorBannerMessage &&
+        message && <div className="video-message sm:w-[90vw]">{message}</div>
       )}
       <div
         className={