@thecb/components 8.4.12-beta.2 → 8.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "8.4.12-beta.2",
+  "version": "8.4.12",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -13,6 +13,7 @@ import { displayCurrency } from "../../../util/general";
 import { themeComponent } from "../../../util/themeUtils";
 import CollapsibleSection from "../collapsible-section";
 
+import LoadingLine from "../../atoms/loading-line";
 import LabeledAmount from "../../atoms/labeled-amount";
 import LineItem from "../../atoms/line-item";
 import Title from "../../atoms/title";
@@ -120,22 +121,41 @@ const PaymentDetailsContent = ({
 );
 
 const LoadingDetails = () => (
-  <Box
-    padding="0"
-    background={GRECIAN_GREY}
-    borderRadius="4px"
-    minHeight="196px"
-  >
-    <Cover minHeight="196px" singleChild fillCenter>
-      <Center intrinsic>
-        <Box
-          padding="0"
-          extraStyles={`flex-grow: 1; display: flex; justify-content: center; align-items: center;`}
-        >
-          <Spinner size="100" centerSpinner />
-        </Box>
-      </Center>
-    </Cover>
+  <Box padding="0" minHeight="196px">
+    <Box
+      padding="0"
+      extraStyles={`position: absolute;
+        height: 200px;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;`}
+    >
+      <Spinner size="100" centerSpinner />
+    </Box>
+    <Stack childGap="16px">
+      <Cluster nowrap justify="space-between" align="start">
+        <LoadingLine exactWidth="110" height="27px" />
+        <LoadingLine exactWidth="60" height="27px" />
+      </Cluster>
+      <SolidDivider />
+      <Box padding="0.5rem 0">
+        <Cluster justify="space-between" align="start">
+          <LoadingLine exactWidth="80" height="27px" />
+          <LoadingLine exactWidth="60" height="27px" />
+        </Cluster>
+        <Box padding="4px 0" />
+        <Cluster justify="space-between" align="start">
+          <LoadingLine exactWidth="100" height="27px" />
+          <LoadingLine exactWidth="50" height="27px" />
+        </Cluster>
+      </Box>
+      <SolidDivider />
+      <Stack justify="space-between" direction="row">
+        <LoadingLine exactWidth="55" height="30px" />
+        <LoadingLine exactWidth="70" height="30px" />
+      </Stack>
+    </Stack>
   </Box>
 );