feat(#3247, #3307): add skeleton on cards while validating

Author: MSzalowski

CHANGELOG.md

@@ -14,6 +14,8 @@ changes.
 
 - Add Proposal discussion context that manages username [Issue 3341](https://github.com/IntersectMBO/govtool/issues/3341)
 - Add epochParams and ada holder balance to Proposal Discussion Pillar [Issue 2243](https://github.com/IntersectMBO/govtool/issues/2243)
+- Add skeleton element to the drep and governance action cards on validation [Issue 3247](https://github.com/IntersectMBO/govtool/issues/3247)
+- Add mock for the authors field in governance metadata [Issue 3307](https://github.com/IntersectMBO/govtool/issues/3307)
 
 ### Fixed
 

govtool/frontend/src/components/molecules/DataMissingHeader.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Box, SxProps } from "@mui/material";
+import { Avatar, Box, Skeleton, SxProps } from "@mui/material";
 
 import { Typography } from "@atoms";
 import { MetadataValidationStatus } from "@models";
@@ -11,10 +11,11 @@ import { Share } from "./Share";
 import { useScreenDimension } from "@/hooks";
 
 type DataMissingHeaderProps = {
-  isDataMissing: MetadataValidationStatus | null;
+  isDataMissing?: MetadataValidationStatus;
   title?: string;
   titleStyle?: SxProps;
   isDRep?: boolean;
+  isValidating?: boolean;
   image?: string | null;
   shareLink?: string;
 };
@@ -23,6 +24,7 @@ export const DataMissingHeader = ({
   title,
   isDataMissing,
   titleStyle,
+  isValidating,
   isDRep,
   image,
   shareLink,
@@ -53,39 +55,49 @@ export const DataMissingHeader = ({
           display: "flex",
         }}
       >
-        {isDRep && (
-          <Avatar
-            alt="drep-image"
-            src={
-              (base64Image.isValidBase64Image
-                ? `${base64Image.base64Prefix}${image}`
-                : image) || ICONS.defaultDRepIcon
-            }
-            sx={{ width: 80, height: 80 }}
-            data-testid="drep-image"
+        {isDRep &&
+          (isValidating ? (
+            <Skeleton width={80} height={80} variant="circular" />
+          ) : (
+            <Avatar
+              alt="drep-image"
+              src={
+                (base64Image.isValidBase64Image
+                  ? `${base64Image.base64Prefix}${image}`
+                  : image) ?? ICONS.defaultDRepIcon
+              }
+              sx={{ width: 80, height: 80 }}
+              data-testid="drep-image"
+            />
+          ))}
+        {isValidating ? (
+          <Skeleton
+            width="120px"
+            height="32px"
+            sx={{ ...(isDRep && { ml: 4 }) }}
+            variant="rounded"
           />
+        ) : (
+          <Typography
+            sx={{
+              ...(isDRep && { ml: { md: 3 } }),
+              ...(isDRep && { mt: { xxs: 2, md: 0 } }),
+              textOverflow: "ellipsis",
+              fontWeight: 600,
+              ...(isDataMissing && { color: "errorRed" }),
+              ...titleStyle,
+            }}
+            variant="title2"
+            component="h1"
+          >
+            {(isDataMissing &&
+              getMetadataDataMissingStatusTranslation(isDataMissing)) ||
+              title}
+          </Typography>
         )}
-        <Typography
-          sx={{
-            ...(isDRep && { ml: { md: 3 } }),
-            ...(isDRep && { mt: { xxs: 2, md: 0 } }),
-            textOverflow: "ellipsis",
-            fontWeight: 600,
-            ...(isDataMissing && { color: "errorRed" }),
-            ...titleStyle,
-          }}
-          variant="title2"
-          component="h1"
-        >
-          {(isDataMissing &&
-            getMetadataDataMissingStatusTranslation(
-              isDataMissing as MetadataValidationStatus,
-            )) ||
-            title}
-        </Typography>
       </Box>
       {screenWidth >= 1020 && (
-        <Share link={shareLink || window.location.href} />
+        <Share link={shareLink ?? window.location.href} />
       )}
     </Box>
   );

govtool/frontend/src/components/molecules/DataMissingInfoBox.tsx

@@ -1,4 +1,4 @@
-import { Box, Link, SxProps } from "@mui/material";
+import { Box, Link, Skeleton, SxProps } from "@mui/material";
 
 import { Typography } from "@atoms";
 import { useTranslation } from "@hooks";
@@ -9,12 +9,14 @@ import { LINKS } from "@/consts/links";
 export const DataMissingInfoBox = ({
   isDataMissing,
   isInProgress,
+  isValidating,
   isSubmitted,
   isDrep = false,
   sx,
 }: {
-  isDataMissing: MetadataValidationStatus | null;
+  isDataMissing?: MetadataValidationStatus;
   isInProgress?: boolean;
+  isValidating?: boolean;
   isSubmitted?: boolean;
   isDrep?: boolean;
   sx?: SxProps;
@@ -63,36 +65,58 @@ export const DataMissingInfoBox = ({
         ...sx,
       }}
     >
-      <Typography
-        sx={{
-          fontSize: "18px",
-          fontWeight: 500,
-          color: "errorRed",
-          mb: 0.5,
-        }}
-      >
-        {gaMetadataErrorMessage}
-      </Typography>
-      <Typography
-        sx={{
-          fontWeight: 400,
-          color: "errorRed",
-          mb: 0.5,
-        }}
-      >
-        {gaMetadataErrorDescription}
-      </Typography>
-      <Link
-        onClick={() => openInNewTab(LINKS.DREP_ERROR_CONDITIONS)}
-        sx={{
-          fontFamily: "Poppins",
-          fontSize: "16px",
-          lineHeight: "24px",
-          cursor: "pointer",
-        }}
-      >
-        {t("learnMore")}
-      </Link>
+      {isValidating ? (
+        <Skeleton
+          sx={{ mb: 0.5 }}
+          width="128px"
+          height="48px"
+          variant="rounded"
+        />
+      ) : (
+        <Typography
+          sx={{
+            fontSize: "18px",
+            fontWeight: 500,
+            color: "errorRed",
+            mb: 0.5,
+          }}
+        >
+          {gaMetadataErrorMessage}
+        </Typography>
+      )}
+      {isValidating ? (
+        <Skeleton
+          sx={{ mb: 0.5 }}
+          width="100%"
+          height="96px"
+          variant="rounded"
+        />
+      ) : (
+        <Typography
+          sx={{
+            fontWeight: 400,
+            color: "errorRed",
+            mb: 0.5,
+          }}
+        >
+          {gaMetadataErrorDescription}
+        </Typography>
+      )}
+      {isValidating ? (
+        <Skeleton width="128px" height="24px" variant="text" />
+      ) : (
+        <Link
+          onClick={() => openInNewTab(LINKS.DREP_ERROR_CONDITIONS)}
+          sx={{
+            fontFamily: "Poppins",
+            fontSize: "16px",
+            lineHeight: "24px",
+            cursor: "pointer",
+          }}
+        >
+          {t("learnMore")}
+        </Link>
+      )}
     </Box>
   ) : null;
 };