fix: add spinner to blank page in Scanner

cardano-foundation · May 7, 2024 · a3a5fb6 · a3a5fb6
1 parent a9ed264
commit a3a5fb6
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 16 deletions.
diff --git a/src/ui/components/Scanner/Scanner.scss b/src/ui/components/Scanner/Scanner.scss
@@ -27,6 +27,19 @@ ion-grid.qr-code-scanner {
     }
   }
 
+  .scanner-spinner-container {
+    z-index: 1000;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    background: rgba(3, 3, 33, 0.2);
+  }
+
   .page-footer .secondary-button {
     opacity: 0.5;
     backdrop-filter: blur(0.33rem);

diff --git a/src/ui/components/Scanner/Scanner.tsx b/src/ui/components/Scanner/Scanner.tsx
@@ -1,5 +1,12 @@
 import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
-import { IonCol, IonGrid, IonIcon, IonRow, isPlatform } from "@ionic/react";
+import {
+  IonCol,
+  IonGrid,
+  IonIcon,
+  IonRow,
+  IonSpinner,
+  isPlatform,
+} from "@ionic/react";
 import {
   BarcodeScanner,
   SupportedFormat,
@@ -39,6 +46,7 @@ const Scanner = forwardRef(
     const [pasteModalIsOpen, setPasteModalIsOpen] = useState(false);
     const [groupId, setGroupId] = useState("");
     const [pastedValue, setPastedValue] = useState("");
+    const [scanning, setScanning] = useState(false);
 
     const checkPermission = async () => {
       const status = await BarcodeScanner.checkPermission({ force: true });
@@ -55,6 +63,7 @@ const Scanner = forwardRef(
     };
 
     const startScan = async () => {
+      setScanning(true);
       await BarcodeScanner.hideBackground();
       document?.querySelector("body")?.classList.add("scanner-active");
       document
@@ -67,6 +76,7 @@ const Scanner = forwardRef(
     };
 
     const stopScan = async () => {
+      setScanning(false);
       await BarcodeScanner.stopScan();
       await BarcodeScanner.showBackground();
       document?.querySelector("body")?.classList.remove("scanner-active");
@@ -200,21 +210,32 @@ const Scanner = forwardRef(
           className="qr-code-scanner"
           data-testid="qr-code-scanner"
         >
-          <IonRow>
-            <IonCol size="12">
-              <span className="qr-code-scanner-text">
-                {i18n.t("scan.tab.title")}
-              </span>
-            </IonCol>
-          </IonRow>
-          <IonRow>
-            <IonIcon
-              icon={scanOutline}
-              color="light"
-              className="qr-code-scanner-icon"
-            />
-          </IonRow>
-          <RenderPageFooter />
+          {scanning ? (
+            <>
+              <IonRow>
+                <IonCol size="12">
+                  <span className="qr-code-scanner-text">
+                    {i18n.t("scan.tab.title")}
+                  </span>
+                </IonCol>
+              </IonRow>
+              <IonRow>
+                <IonIcon
+                  icon={scanOutline}
+                  color="light"
+                  className="qr-code-scanner-icon"
+                />
+              </IonRow>
+              <RenderPageFooter />
+            </>
+          ) : (
+            <div
+              className="scanner-spinner-container"
+              data-testid="scanner-spinner-container"
+            >
+              <IonSpinner name="circular" />
+            </div>
+          )}
         </IonGrid>
         <CreateIdentifier
           modalIsOpen={createIdentifierModalIsOpen}