From 9456601d895ea9b4a94d68c90b03df77b064ab63 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Mon, 13 Jan 2025 11:11:19 +0100
Subject: [PATCH] chore: show skeleton when data is loading

---
 .../Popup/MiniGuides/PageContentsTemplate.tsx |  1 +
 .../CaseDetails/Appeal/AppealHistory.tsx      | 35 +++++++++----------
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx b/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx
index d8b4e9741..893f0f109 100644
--- a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx
+++ b/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx
@@ -24,6 +24,7 @@ export const LeftContentContainer = styled.div`
 
 export const StyledImage = styled.div`
   width: ${responsiveSize(260, 460)};
+
   ${landscapeStyle(
     () => css`
       width: 389px;
diff --git a/web/src/pages/Cases/CaseDetails/Appeal/AppealHistory.tsx b/web/src/pages/Cases/CaseDetails/Appeal/AppealHistory.tsx
index ce029a5d6..d6b993009 100644
--- a/web/src/pages/Cases/CaseDetails/Appeal/AppealHistory.tsx
+++ b/web/src/pages/Cases/CaseDetails/Appeal/AppealHistory.tsx
@@ -1,14 +1,15 @@
 import React from "react";
 import styled from "styled-components";
 
+import Skeleton from "react-loading-skeleton";
+
 import { useOptionsContext, useFundingContext } from "hooks/useClassicAppealContext";
 
 import HowItWorks from "components/HowItWorks";
 import Appeal from "components/Popup/MiniGuides/Appeal";
 
 import OptionCard from "./OptionCard";
-
-import { AppealHeader, StyledTitle } from ".";
+import { AppealHeader, StyledTitle } from "./index";
 
 const OptionsContainer = styled.div`
   display: grid;
@@ -26,7 +27,7 @@ const AppealHistory: React.FC<IAppealHistory> = ({ isAppealMiniGuideOpen, toggle
   const options = useOptionsContext();
   const { winningChoice, paidFees, fundedChoices } = useFundingContext();
 
-  return (
+  return options && options.length > 2 ? (
     <div>
       <AppealHeader>
         <StyledTitle>Appeal Results - Last Round</StyledTitle>
@@ -37,24 +38,20 @@ const AppealHistory: React.FC<IAppealHistory> = ({ isAppealMiniGuideOpen, toggle
         />
       </AppealHeader>
       <OptionsContainer>
-        {options ? (
-          options.map((option, index) => {
-            return (
-              <OptionCard
-                key={option + index}
-                text={option}
-                winner={index.toString() === winningChoice}
-                funding={BigInt(paidFees?.[index] ?? "0")}
-                required={fundedChoices?.includes(index.toString()) ? BigInt(paidFees?.[index] ?? "0") : undefined}
-                canBeSelected={false}
-              />
-            );
-          })
-        ) : (
-          <h2>Not in appeal period</h2>
-        )}
+        {options.map((option, index) => (
+          <OptionCard
+            key={option + index}
+            text={option}
+            winner={index.toString() === winningChoice}
+            funding={BigInt(paidFees?.[index] ?? "0")}
+            required={fundedChoices?.includes(index.toString()) ? BigInt(paidFees?.[index] ?? "0") : undefined}
+            canBeSelected={false}
+          />
+        ))}
       </OptionsContainer>
     </div>
+  ) : (
+    <Skeleton />
   );
 };
 export default AppealHistory;