From 3e1747747e7e7f95953a68d9499a4a3af8746d53 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Fri, 12 Jan 2024 15:24:40 +0530 Subject: [PATCH 1/3] fix(web): add-skeleton-when-drawn-data-loading --- web/src/pages/Cases/CaseDetails/Voting/index.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/web/src/pages/Cases/CaseDetails/Voting/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/index.tsx index 1a9f1b6c2..a754b72d0 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/index.tsx +++ b/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 = ({ 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,7 +73,12 @@ const Voting: React.FC = ({ arbitrable, currentPeriodIndex }) => {
)} - {!userWasDrawn ? ( + {isDrawDataLoading ? ( + <> + +
+ + ) : !userWasDrawn ? ( <>
From 32e7ab448101f6a4a76c2cea0af82870913c4d9e Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Fri, 12 Jan 2024 16:05:48 +0530 Subject: [PATCH 2/3] fix(web): evidence-skeleton-overflowing --- web/src/components/StyledSkeleton.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/web/src/components/StyledSkeleton.tsx b/web/src/components/StyledSkeleton.tsx index a38cb6906..e8a4448b2 100644 --- a/web/src/components/StyledSkeleton.tsx +++ b/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 = () => ; -export const SkeletonEvidenceCard = () => ; +export const SkeletonEvidenceCard = () => ( + + + +); From a48449f11ddb3c1b7f36e4b11d7f99b2b68c742b Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Fri, 12 Jan 2024 16:40:24 +0530 Subject: [PATCH 3/3] refactor(web): remove-nested-operator --- web/src/pages/Cases/CaseDetails/Voting/index.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/web/src/pages/Cases/CaseDetails/Voting/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/index.tsx index a754b72d0..ce7a12dd3 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/index.tsx @@ -73,17 +73,17 @@ const Voting: React.FC = ({ arbitrable, currentPeriodIndex }) => {
)} - {isDrawDataLoading ? ( - <> - -
- - ) : !userWasDrawn ? ( + + {userWasDrawn ? null : ( <> - + {isDrawDataLoading ? ( + + ) : ( + + )}
- ) : null} + )} {isPopupOpen && (