feat(app): updating loading spinner, adding to 'skip' flow (#2648)

* feat(app): updating loading spinner, adding to 'skip' flow * feat(app): resized loading spinner
gitcoinco · Jul 2, 2024 · 761ab01 · 761ab01
1 parent 9c0ed7d
commit 761ab01
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 31 deletions.
diff --git a/app/__test-fixtures__/contextTestHelpers.tsx b/app/__test-fixtures__/contextTestHelpers.tsx
@@ -214,7 +214,7 @@ const datastoreConnectionContext = {
   connect: jest.fn(),
   disconnect: jest.fn(),
   dbAccessToken: "token",
-  dbAccessTokenStatus: "idle" as DbAuthTokenStatus,
+  dbAccessTokenStatus: "connected" as DbAuthTokenStatus,
   did: jest.fn() as any,
   checkSessionIsValid: jest.fn().mockImplementation(() => true),
 };

diff --git a/app/components/LoadingScreen.tsx b/app/components/LoadingScreen.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 
-const LoadingScreen = () => {
+const LoadingScreen = ({ className }: { className?: string }) => {
   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 className="flex h-full flex-col place-content-center">
+      <img className={`h-80 ${className}`} src={"/assets/loadingSpinner.svg"} alt="Loading Spinner" />
     </div>
   );
 };

diff --git a/app/pages/Dashboard.tsx b/app/pages/Dashboard.tsx
@@ -45,6 +45,7 @@ import hash from "object-hash";
 // --- GTM Module
 import TagManager from "react-gtm-module";
 import { useDatastoreConnectionContext } from "../context/datastoreConnectionContext";
+import LoadingScreen from "../components/LoadingScreen";
 
 const success = "../../assets/check-icon2.svg";
 const fail = "../assets/verification-failed-bright.svg";
@@ -307,31 +308,35 @@ export default function Dashboard() {
       <HeaderContentFooterGrid>
         <Header />
         <BodyWrapper className="mt-4 md:mt-6">
-          <PageWidthGrid>
-            <Subheader className={` ${useCustomDashboardPanel ? "col-span-full" : "col-span-7"}`} />
-            {useCustomDashboardPanel ? (
-              <DynamicCustomDashboardPanel className="col-start-1 col-end-[-1] xl:col-start-8 row-span-2 mt-6" />
-            ) : (
-              <DashboardIllustration className="col-span-5 row-span-5 hidden xl:block" />
-            )}
-            <DashboardScorePanel className="col-span-full xl:col-span-7" />
-
-            <span className="col-start-1 col-end-12 font-heading text-4xl">Add Stamps</span>
-            <CardList
-              className="col-span-full"
-              isLoading={
-                isLoadingPassport == IsLoadingPassportState.Loading ||
-                isLoadingPassport == IsLoadingPassportState.CreatingPassport ||
-                isLoadingPassport == IsLoadingPassportState.FailedToConnect
-              }
-            />
-            <span className="col-start-1 col-end-4 font-heading text-3xl">Add Collected Stamps</span>
-            <span className="col-end-[-1] self-center whitespace-nowrap text-right font-alt text-3xl text-foreground-2">
-              {numVerifiedPlatforms}/{numPlatforms}
-            </span>
-            <DashboardValidStampsPanel className="col-span-full" />
-            <ExpiredStampsPanel className="col-span-full" />
-          </PageWidthGrid>
+          {dbAccessTokenStatus === "connected" ? (
+            <PageWidthGrid>
+              <Subheader className={` ${useCustomDashboardPanel ? "col-span-full" : "col-span-7"}`} />
+              {useCustomDashboardPanel ? (
+                <DynamicCustomDashboardPanel className="col-start-1 col-end-[-1] xl:col-start-8 row-span-2 mt-6" />
+              ) : (
+                <DashboardIllustration className="col-span-5 row-span-5 hidden xl:block" />
+              )}
+              <DashboardScorePanel className="col-span-full xl:col-span-7" />
+
+              <span className="col-start-1 col-end-12 font-heading text-4xl">Add Stamps</span>
+              <CardList
+                className="col-span-full"
+                isLoading={
+                  isLoadingPassport == IsLoadingPassportState.Loading ||
+                  isLoadingPassport == IsLoadingPassportState.CreatingPassport ||
+                  isLoadingPassport == IsLoadingPassportState.FailedToConnect
+                }
+              />
+              <span className="col-start-1 col-end-4 font-heading text-3xl">Add Collected Stamps</span>
+              <span className="col-end-[-1] self-center whitespace-nowrap text-right font-alt text-3xl text-foreground-2">
+                {numVerifiedPlatforms}/{numPlatforms}
+              </span>
+              <DashboardValidStampsPanel className="col-span-full" />
+              <ExpiredStampsPanel className="col-span-full" />
+            </PageWidthGrid>
+          ) : (
+            <LoadingScreen />
+          )}
         </BodyWrapper>
         {/* This footer contains dark colored text and dark images */}
         <WelcomeFooter displayPrivacyPolicy={false} fixed={false} />

diff --git a/app/pages/Welcome.tsx b/app/pages/Welcome.tsx
@@ -53,7 +53,7 @@ export default function Welcome() {
               hasPassports={(passport && passport.stamps.length > 0) || false}
             />
           ) : (
-            <LoadingScreen />
+            <LoadingScreen className="mb-20" />
           )}
         </BodyWrapper>
         <WelcomeFooter displayPrivacyPolicy={true} fixed={true} />

diff --git a/app/public/assets/loadingSpinner.svg b/app/public/assets/loadingSpinner.svg