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 && (