Merge pull request #1408 from kleros/fix(web)/evidence-skeleton-overflowing-and-info-card-loading-ui

Fix(web)/evidence skeleton overflowing and info card loading UI

Author: alcercu

web/src/components/StyledSkeleton.tsx

@@ -32,9 +32,13 @@ const StyledSkeletonDisputeListItem = styled(Skeleton)`
   height: 62px;
 `;
 
-const StyledSkeletonEvidenceCard = styled(Skeleton)`
-  height: 146px;
-  width: 76vw;
+const StyledSkeletonEvidenceContainer = styled.div`
+  width: 100%;
+  span {
+    width: 100%;
+    height: 146px;
+    display: flex;
+  }
 `;
 
 export const SkeletonDisputeCard = () => (
@@ -45,4 +49,8 @@ export const SkeletonDisputeCard = () => (
 
 export const SkeletonDisputeListItem = () => <StyledSkeletonDisputeListItem />;
 
-export const SkeletonEvidenceCard = () => <StyledSkeletonEvidenceCard />;
+export const SkeletonEvidenceCard = () => (
+  <StyledSkeletonEvidenceContainer>
+    <Skeleton />
+  </StyledSkeletonEvidenceContainer>
+);

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

@@ -18,6 +18,7 @@ import { getPeriodEndTimestamp } from "components/DisputeCard";
 import InfoCard from "components/InfoCard";
 import Classic from "./Classic";
 import VotingHistory from "./VotingHistory";
+import Skeleton from "react-loading-skeleton";
 
 const Container = styled.div`
   padding: ${responsiveSize(16, 32)};
@@ -40,7 +41,11 @@ const Voting: React.FC<IVoting> = ({ arbitrable, currentPeriodIndex }) => {
   const { id } = useParams();
   const { data: disputeData } = useDisputeDetailsQuery(id);
   const { data: appealCost } = useAppealCost(id);
-  const { data: drawData } = useDrawQuery(address?.toLowerCase(), id, disputeData?.dispute?.currentRound.id);
+  const { data: drawData, isLoading: isDrawDataLoading } = useDrawQuery(
+    address?.toLowerCase(),
+    id,
+    disputeData?.dispute?.currentRound.id
+  );
   const roundId = disputeData?.dispute?.currentRoundIndex;
   const voteId = drawData?.draws?.[0]?.voteIDNum;
   const { data: voted } = useDisputeKitClassicIsVoteActive({
@@ -68,12 +73,17 @@ const Voting: React.FC<IVoting> = ({ arbitrable, currentPeriodIndex }) => {
           <br />
         </>
       )}
-      {!userWasDrawn ? (
+
+      {userWasDrawn ? null : (
         <>
-          <InfoCard msg="You were not drawn in current round." />
+          {isDrawDataLoading ? (
+            <Skeleton width={300} height={20} />
+          ) : (
+            <InfoCard msg="You were not drawn in current round." />
+          )}
           <br />
         </>
-      ) : null}
+      )}
 
       {isPopupOpen && (
         <Popup