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 = () => ( + + + +); diff --git a/web/src/pages/Cases/CaseDetails/Voting/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/index.tsx index 1a9f1b6c2..ce7a12dd3 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,12 +73,17 @@ const Voting: React.FC = ({ arbitrable, currentPeriodIndex }) => {
)} - {!userWasDrawn ? ( + + {userWasDrawn ? null : ( <> - + {isDrawDataLoading ? ( + + ) : ( + + )}
- ) : null} + )} {isPopupOpen && (