Update loading state of IdentityTotalCard

pshenmic · Dec 12, 2024 · c6d0185 · c6d0185
1 parent 2688fac
commit c6d0185
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 2 deletions.
diff --git a/packages/frontend/src/app/identity/[identifier]/Identity.js b/packages/frontend/src/app/identity/[identifier]/Identity.js
@@ -281,7 +281,11 @@ function Identity ({ identifier }) {
           </div>
 
           <div className={'IdentityTotalCard__Column'}>
-            <IdentityDigestCard identity={identity} rate={rate} className={'IdentityTotalCard__Digest'}/>
+            <IdentityDigestCard
+              className={'IdentityTotalCard__Digest'}
+              identity={identity}
+              rate={rate}
+            />
           </div>
         </div>
         <PublicKeys

diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.js
@@ -15,7 +15,7 @@ function IdentityDigestCard ({ identity, rate, className }) {
   if (!identity.data?.fundingAddress) identity.data.fundingAddress = '=yS9GnnRdzX9W9G9kxihdgB5VovKWbPGjS1'
 
   return (
-    <div className={`IdentityDigestCard ${className || ''}`}>
+    <div className={`IdentityDigestCard ${className || ''} ${identity.loading ? 'IdentityDigestCard--Loading' : ''}`}>
       <div className={'IdentityDigestCard__Transfers'}>
         <div className={'IdentityDigestCard__Transfer IdentityDigestCard__Transfer--TupUp'}>
           <div className={'IdentityDigestCard__TransferTitle'}>Total Top-up’s:</div>

diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityDigestCard.scss
@@ -8,11 +8,25 @@
   border-radius: $border-radius-def;
   container-type: inline-size;
 
+  &--Loading {
+    .InfoLine__Value {
+      height: 24px;
+    }
+  }
+
   &, &__Transfers, &__LinesContainer {
     display: flex;
     gap: 14px;
   }
 
+  &--Loading & {
+    &__Transfers {
+      .LoadingLine {
+        height: 24px;
+      }
+    }
+  }
+
   &__LinesContainer {
     flex-direction: column;
   }
@@ -73,6 +87,12 @@
 
   @media screen and (min-width: $breakpoint-md) and (max-width: $breakpoint-lg),
   screen and (max-width: $breakpoint-sm) {
+    &--Loading {
+      .InfoLine__Value {
+        width: 100% !important;
+      }
+    }
+
     &__Transfers {
       flex-direction: column;
     }
@@ -94,6 +114,12 @@
   }
 
   @container (max-width: 24em) {
+    &--Loading {
+      .InfoLine__Value {
+        width: 100% !important;
+      }
+    }
+
     &__InfoLine {
       flex-direction: column;
       align-items: flex-start;

diff --git a/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss b/packages/frontend/src/app/identity/[identifier]/IdentityTotalCard.scss
@@ -23,9 +23,21 @@
   }
 
   &--Loading & {
+    &__InfoLine {
+      .InfoLine__Value {
+        height: 24px;
+      }
+    }
+
     &__Avatar {
       @include mixins.LoadingContainer;
     }
+
+    &__Header {
+      .InfoLine__Value {
+        width: 100% !important;
+      }
+    }
   }
 
   &__Header {
@@ -131,6 +143,13 @@
     }
   }
 
+  @media screen and (min-width: $breakpoint-md) and (max-width: $breakpoint-lg),
+  screen and (max-width: $breakpoint-md) {
+    &__InfoLine {
+      gap: 4px;
+    }
+  }
+
   @media screen and (max-width: $breakpoint-md) {
     $gap: 12px;
 
@@ -167,6 +186,12 @@
     &__InfoLine {
       flex-wrap: wrap;
     }
+
+    &--Loading {
+      .InfoLine__Value {
+        width: 100% !important;
+      }
+    }
   }
 
   @media screen and (max-width: $breakpoint-sm) {