fix(web): correct skeleton width for disputecard and disputelistitems

Author: kemuru

web/src/components/CasesDisplay/CasesGrid.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import styled from "styled-components";
 import { useWindowSize } from "react-use";
 import { useParams } from "react-router-dom";
-import Skeleton from "react-loading-skeleton";
+import { SkeletonDisputeCard, SkeletonDisputeListItem } from "../StyledSkeleton";
 import { StandardPagination } from "@kleros/ui-components-library";
 import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
 import { useIsList } from "context/IsListProvider";
@@ -27,11 +27,6 @@ const ListContainer = styled.div`
   gap: 8px;
 `;
 
-const StyledSkeleton = styled(Skeleton)`
-  height: 260px;
-  width: 310px;
-`;
-
 // 24px as margin-top since we already have 8px from the flex gap
 const StyledPagination = styled(StandardPagination)`
   margin-top: 24px;
@@ -61,15 +56,15 @@ const CasesGrid: React.FC<ICasesGrid> = ({ disputes, casesPerPage, totalPages, c
         <ListContainer>
           <CasesListHeader />
           {isUndefined(disputes)
-            ? [...Array(casesPerPage)].map((_, i) => <StyledSkeleton key={i} />)
+            ? [...Array(casesPerPage)].map((_, i) => <SkeletonDisputeListItem key={i} />)
             : disputes.map((dispute) => {
                 return <DisputeCard key={dispute.id} {...dispute} />;
               })}
         </ListContainer>
       ) : (
         <GridContainer>
           {isUndefined(disputes)
-            ? [...Array(casesPerPage)].map((_, i) => <StyledSkeleton key={i} />)
+            ? [...Array(casesPerPage)].map((_, i) => <SkeletonDisputeCard key={i} />)
             : disputes.map((dispute) => {
                 return <DisputeCard key={dispute.id} {...dispute} overrideIsList />;
               })}

web/src/components/LatestCases.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { Dispute_Filter } from "../graphql/graphql";
 import { DisputeDetailsFragment, useCasesQuery } from "queries/useCasesQuery";
 import DisputeCard from "components/DisputeCard";
-import { StyledSkeleton } from "components/StyledSkeleton";
+import { SkeletonDisputeCard } from "components/StyledSkeleton";
 import { isUndefined } from "utils/index";
 
 const Container = styled.div`
@@ -30,7 +30,7 @@ const LatestCases: React.FC<{ filters?: Dispute_Filter }> = ({ filters }) => {
       <Title>Latest Cases</Title>
       <DisputeContainer>
         {isUndefined(disputes)
-          ? Array.from({ length: 3 }).map((_, index) => <StyledSkeleton key={index} width={312} height={260} />)
+          ? Array.from({ length: 3 }).map((_, index) => <SkeletonDisputeCard key={index} />)
           : disputes.map((dispute) => <DisputeCard key={dispute.id} {...dispute} overrideIsList />)}
       </DisputeContainer>
     </Container>

web/src/components/StyledSkeleton.tsx

@@ -1,6 +1,39 @@
-import styled from "styled-components";
+import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
 import Skeleton from "react-loading-skeleton";
 
 export const StyledSkeleton = styled(Skeleton)`
   z-index: 0;
 `;
+
+const SkeletonDisputeCardContainer = styled.div`
+  width: 100%;
+  ${landscapeStyle(
+    () =>
+      css`
+        /* Explanation of this formula:
+        - The 48px accounts for the total width of gaps: 2 gaps * 24px each.
+        - The 0.333 is used to equally distribute width among 3 cards per row.
+        - The 294px ensures the card has a minimum width.
+      */
+        width: max(calc((100% - 48px) * 0.333), 294px);
+      `
+  )}
+`;
+
+const StyledSkeletonDisputeCard = styled(Skeleton)`
+  height: 260px;
+`;
+
+const StyledSkeletonDisputeListItem = styled(Skeleton)`
+  height: 62px;
+`;
+
+export const SkeletonDisputeCard = () => (
+  <SkeletonDisputeCardContainer>
+    <StyledSkeletonDisputeCard />
+  </SkeletonDisputeCardContainer>
+);
+
+export const SkeletonDisputeListItem = () => <StyledSkeletonDisputeListItem />;