Merge pull request #3440 from IntersectMBO/feat/3247-improve-metadata-validation-approach-for-faster-content-loading

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)
 
 - Add uncontrolled image input to improve performance of large base64 encoded image strings
 

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;
 };

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

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Box } from "@mui/material";
+import { Box, Skeleton } from "@mui/material";
 
 import { Button } from "@atoms";
 import {
@@ -8,7 +8,6 @@ import {
   GovernanceActionCardStatePill,
   GovernanceActionsDatesBox,
 } from "@molecules";
-
 import { useScreenDimension, useTranslation } from "@hooks";
 import {
   encodeCIP129Identifier,
@@ -23,33 +22,32 @@ type ActionTypeProps = Omit<
   | "yesVotes"
   | "noVotes"
   | "abstainVotes"
-  | "metadataHash"
-  | "url"
   | "id"
   | "details"
   | "rationale"
   | "motivation"
 > & {
   onClick?: () => void;
   inProgress?: boolean;
+  isValidating?: boolean;
+  metadataStatus?: MetadataValidationStatus;
 };
 
-export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
-  const {
-    abstract,
-    type,
-    inProgress = false,
-    expiryDate,
-    expiryEpochNo,
-    onClick,
-    createdDate,
-    createdEpochNo,
-    txHash,
-    index,
-    metadataStatus,
-    metadataValid,
-    title,
-  } = props;
+export const GovernanceActionCard: FC<ActionTypeProps> = ({
+  abstract,
+  type,
+  inProgress = false,
+  expiryDate,
+  expiryEpochNo,
+  onClick,
+  createdDate,
+  createdEpochNo,
+  txHash,
+  index,
+  title,
+  isValidating,
+  metadataStatus,
+}) => {
   const { isMobile, screenWidth } = useScreenDimension();
   const { t } = useTranslation();
 
@@ -71,10 +69,10 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
         justifyContent: "space-between",
         boxShadow: "0px 4px 15px 0px #DDE3F5",
         borderRadius: "20px",
-        backgroundColor: !metadataValid
+        backgroundColor: metadataStatus
           ? "rgba(251, 235, 235, 0.50)"
           : "rgba(255, 255, 255, 0.3)",
-        ...(!metadataValid && {
+        ...(!!metadataStatus && {
           border: "1px solid #F6D5D5",
         }),
         ...(inProgress && {
@@ -92,15 +90,17 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
         <GovernanceActionCardHeader
           title={title}
           isDataMissing={metadataStatus}
+          isValidating={isValidating}
         />
-        {!metadataStatus && (
+        {!!metadataStatus && (
           <GovernanceActionCardElement
             label={t("govActions.abstract")}
             text={abstract}
             textVariant="twoLines"
             dataTestId="governance-action-abstract"
             isSliderCard
             isMarkdown
+            isValidating={isValidating}
           />
         )}
         <GovernanceActionCardElement
@@ -109,20 +109,23 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
           textVariant="pill"
           dataTestId={`${getProposalTypeNoEmptySpaces(type)}-type`}
           isSliderCard
+          isValidating={isValidating}
         />
         <GovernanceActionsDatesBox
           createdDate={createdDate}
           expiryDate={expiryDate}
           expiryEpochNo={expiryEpochNo}
           createdEpochNo={createdEpochNo}
           isSliderCard
+          isValidating={isValidating}
         />
         <GovernanceActionCardElement
           label={t("govActions.cip129GovernanceActionId")}
           text={cip129GovernanceActionId}
           dataTestId={`${cip129GovernanceActionId}-id`}
           isCopyButton
           isSliderCard
+          isValidating={isValidating}
         />
         <GovernanceActionCardElement
           label={t("govActions.governanceActionId")}
@@ -131,6 +134,7 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
           isCopyButton
           isSliderCard
           isSemiTransparent
+          isValidating={isValidating}
         />
       </Box>
       <Box
@@ -142,21 +146,25 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
           bgcolor: "white",
         }}
       >
-        <Button
-          onClick={onClick}
-          variant={inProgress ? "outlined" : "contained"}
-          size="large"
-          sx={{
-            width: "100%",
-          }}
-          data-testid={`govaction-${govActionId}-view-detail`}
-        >
-          {t(
-            inProgress
-              ? "govActions.viewDetails"
-              : "govActions.viewDetailsAndVote",
-          )}
-        </Button>
+        {isValidating ? (
+          <Skeleton width="100%" height="40px" sx={{ borderRadius: "20px" }} />
+        ) : (
+          <Button
+            onClick={onClick}
+            variant={inProgress ? "outlined" : "contained"}
+            size="large"
+            sx={{
+              width: "100%",
+            }}
+            data-testid={`govaction-${govActionId}-view-detail`}
+          >
+            {t(
+              inProgress
+                ? "govActions.viewDetails"
+                : "govActions.viewDetailsAndVote",
+            )}
+          </Button>
+        )}
       </Box>
     </Box>
   );