Feature/loading screen

packages/core/src/elements/iframe.ts

@@ -1,6 +1,8 @@
 import { iframeStyles } from "../styles/styles";
 
-import { ORBA_ONE_MESSAGE_CHANNEL, ORBA_ONE_SUCCESS, ORBA_ONE_CANCEL } from "./constants";
+import { removeLoadingScreen } from "../helpers/utils";
+
+import {ORBA_ONE_MESSAGE_CHANNEL,ORBA_ONE_SUCCESS,ORBA_ONE_CANCEL} from "./constants";
 
 type State = "loading" | "success" | "error" | "idle";
 
@@ -57,7 +59,9 @@ export function iframeManager(
         // The html tag has to have a overflowY value of visible instead of auto to
         // prevent unnecessary margins to the scrollbar
         document.documentElement.style.overflowY = "visible";
+        removeLoadingScreen();
         document.body.removeChild(iframe);
+
     }
 
     function addIFrame() {

packages/core/src/helpers/elements.ts

@@ -0,0 +1 @@
+export const loadingDiv = document.createElement('div');

packages/core/src/helpers/utils.ts

@@ -1,4 +1,6 @@
 import { OrbaOneConfig } from "./types";
+import { iframeLoader } from "../styles/templates";
+import { loadingDiv } from "../helpers/elements";
 
 export function isDomElement(obj: any): obj is HTMLElement | Element {
     //! check if obj is not null explicitly because null is a type of object
@@ -57,3 +59,11 @@ export function getSessionUrl(verificationUrl: string, apiKey: string, applicant
     return `${verificationUrl}?publicKey=${apiKey}&applicantId=${applicantId}&steps=${steps.join("&steps=")}`;
 }
 
+export function showLoadingScreen() {
+    loadingDiv.innerHTML = iframeLoader;
+    document.body.appendChild(loadingDiv);
+}
+
+export function removeLoadingScreen() {
+    document.body.removeChild(loadingDiv);
+}

packages/core/src/index.ts

@@ -2,15 +2,16 @@ import { createButton } from "./elements/button";
 import { createIframe } from "./elements/iframe";
 import { verificationUrl } from "./helpers/defaultConfig";
 import { OrbaOneConfig } from "./helpers/types";
-
 import { getSessionUrl, isValidConfig } from "./helpers/utils";
+import { showLoadingScreen } from "./helpers/utils";
 
 function initializeVerification(config: OrbaOneConfig, button: ReturnType<typeof createButton>): void {
     const { apiKey, applicantId, onSuccess, onCancelled, onError, steps } = config;
 
     //Set Loading state
     button.setState("loading");
-
+    showLoadingScreen();
+
     const url = getSessionUrl(verificationUrl, apiKey, applicantId, steps);
     const iframe = createIframe(url, applicantId, onSuccess, onCancelled, onError, (state) => {
         button.setState(state);

packages/core/src/styles/templates.ts

@@ -119,3 +119,20 @@ export const loader = `
   </rect>
 </svg>
 `;
+
+export const iframeLoader = `
+<div 
+    style="
+        position:absolute; 
+        top:0;
+        bottom:0; 
+        left:0; 
+        right:0; 
+        display:flex; 
+        align-items:center; 
+        justify-content:center;
+        background-color: rgba(255, 255, 255, 0.8); 
+">
+${loader}
+</div>
+`;