feat(app): added loading screen (passportxyz#1177)

* feat(app): added loading screen * fix(app): use context loading state to show loader --------- Co-authored-by: schultztimothy <[email protected]>
averno08 · Apr 24, 2023 · ee65229 · ee65229
1 parent b89ea7d
commit ee65229
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 16 deletions.
diff --git a/app/components/LoadingScreen.tsx b/app/components/LoadingScreen.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+const LoadingScreen = () => {
+  return (
+    <div className="flex h-1/2 flex-col place-content-center text-center text-3xl text-color-2">
+      Loading...
+      <img className="mt-2 h-12 animate-bounce" src={"/assets/passportLogoWhite.svg"} alt="Gitcoin Logo" />
+    </div>
+  );
+};
+
+export default LoadingScreen;
diff --git a/app/pages/Welcome.tsx b/app/pages/Welcome.tsx
@@ -22,13 +22,14 @@ import { PossibleEVMProvider } from "../signer/utils";
 import { useDisclosure } from "@chakra-ui/react";
 
 // --- Contexts
-import { CeramicContext } from "../context/ceramicContext";
+import { CeramicContext, IsLoadingPassportState } from "../context/ceramicContext";
 import { UserContext } from "../context/userContext";
 import { InitialWelcome } from "../components/InitialWelcome";
+import LoadingScreen from "../components/LoadingScreen";
 
 export default function Welcome() {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { passport, allPlatforms } = useContext(CeramicContext);
+  const { passport, allPlatforms, isLoadingPassport } = useContext(CeramicContext);
   const { wallet, address } = useContext(UserContext);
 
   const navigate = useNavigate();
@@ -191,21 +192,26 @@ export default function Welcome() {
         </div>
         <PageWidthGrid>
           <div className="col-span-4 flex flex-col items-center text-center md:col-start-2 lg:col-start-3 xl:col-span-6 xl:col-start-4">
-            {passport && passport.stamps.length > 0 ? (
-              <WelcomeBack
-                handleFetchPossibleEVMStamps={handleFetchPossibleEVMStamps}
-                onOpen={onOpen}
-                resetStampsAndProgressState={resetStampsAndProgressState}
-              />
+            {isLoadingPassport === IsLoadingPassportState.Idle ||
+            isLoadingPassport === IsLoadingPassportState.FailedToConnect ? (
+              passport && passport.stamps.length > 0 ? (
+                <WelcomeBack
+                  handleFetchPossibleEVMStamps={handleFetchPossibleEVMStamps}
+                  onOpen={onOpen}
+                  resetStampsAndProgressState={resetStampsAndProgressState}
+                />
+              ) : (
+                <InitialWelcome
+                  onBoardFinished={async () => {
+                    if (address) {
+                      await handleFetchPossibleEVMStamps(address, allPlatforms);
+                      onOpen();
+                    }
+                  }}
+                />
+              )
             ) : (
-              <InitialWelcome
-                onBoardFinished={async () => {
-                  if (address) {
-                    await handleFetchPossibleEVMStamps(address, allPlatforms);
-                    onOpen();
-                  }
-                }}
-              />
+              <LoadingScreen />
             )}
           </div>
         </PageWidthGrid>