feat(web): add skeleton to evidencecard and empty evidence message

Author: kemuru

web/src/components/StyledSkeleton.tsx

@@ -31,10 +31,17 @@ const StyledSkeletonDisputeListItem = styled(Skeleton)`
   height: 62px;
 `;
 
+const StyledSkeletonEvidenceCard = styled(Skeleton)`
+  height: 146px;
+  width: 76vw;
+`;
+
 export const SkeletonDisputeCard = () => (
   <SkeletonDisputeCardContainer>
     <StyledSkeletonDisputeCard />
   </SkeletonDisputeCardContainer>
 );
 
 export const SkeletonDisputeListItem = () => <StyledSkeletonDisputeListItem />;
+
+export const SkeletonEvidenceCard = () => <StyledSkeletonEvidenceCard />;

web/src/pages/Cases/CaseDetails/Evidence/index.tsx

@@ -6,6 +6,7 @@ import { Button, Searchbar } from "@kleros/ui-components-library";
 import { useEvidenceGroup } from "queries/useEvidenceGroup";
 import { useEvidences } from "queries/useEvidences";
 import SubmitEvidenceModal from "./SubmitEvidenceModal";
+import { SkeletonEvidenceCard } from "components/StyledSkeleton";
 import EvidenceCard from "components/EvidenceCard";
 import { EnsureChain } from "components/EnsureChain";
 import { isUndefined } from "utils/index";
@@ -24,6 +25,12 @@ const StyledButton = styled(Button)`
   align-self: flex-end;
 `;
 
+const StyledLabel = styled.label`
+  display: flex;
+  margin-top: 16px;
+  font-size: 16px;
+`;
+
 const Evidence: React.FC<{ arbitrable?: `0x${string}` }> = ({ arbitrable }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { id } = useParams();
@@ -33,25 +40,27 @@ const Evidence: React.FC<{ arbitrable?: `0x${string}` }> = ({ arbitrable }) => {
 
   return (
     <Container>
-      <>
-        {!isUndefined(evidenceGroup) && (
-          <SubmitEvidenceModal isOpen={isModalOpen} close={() => setIsModalOpen(false)} {...{ evidenceGroup }} />
-        )}
-        <Searchbar />
-        <EnsureChain>
-          <StyledButton
-            small
-            text="Submit Evidence"
-            disabled={typeof address === "undefined" || isModalOpen}
-            isLoading={isModalOpen}
-            onClick={() => setIsModalOpen(true)}
-          />
-        </EnsureChain>
-        {data &&
-          data.evidences.map(({ key, evidence, sender }, i) => (
-            <EvidenceCard key={key} index={i + 1} sender={sender?.id} {...{ evidence }} />
-          ))}
-      </>
+      {!isUndefined(evidenceGroup) && (
+        <SubmitEvidenceModal isOpen={isModalOpen} close={() => setIsModalOpen(false)} {...{ evidenceGroup }} />
+      )}
+      <Searchbar />
+      <EnsureChain>
+        <StyledButton
+          small
+          text="Submit Evidence"
+          disabled={typeof address === "undefined" || isModalOpen}
+          isLoading={isModalOpen}
+          onClick={() => setIsModalOpen(true)}
+        />
+      </EnsureChain>
+      {data ? (
+        data.evidences.map(({ key, evidence, sender }, i) => (
+          <EvidenceCard key={key} index={i + 1} sender={sender?.id} {...{ evidence }} />
+        ))
+      ) : (
+        <SkeletonEvidenceCard />
+      )}
+      {data && data.evidences.length === 0 ? <StyledLabel>There is no evidence submitted yet</StyledLabel> : null}
     </Container>
   );
 };

web/src/pages/Dashboard/Courts/index.tsx

@@ -30,9 +30,7 @@ const CourtCardsContainer = styled.div`
 `;
 
 const StyledLabel = styled.label`
-  display: flex;
   font-size: 16px;
-  color: ${({ theme }) => theme.secondaryText};
 `;
 
 const Courts: React.FC = () => {