From 828bb173f73e9b291e5bba4b74ee83e2852f8726 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Tue, 21 Jan 2025 19:32:03 +0100
Subject: [PATCH 1/2] feat: better appeal loading mechanism

---
 web/src/hooks/useClassicAppealContext.tsx      | 11 +++++++++--
 .../Appeal/Classic/Options/index.tsx           | 18 ++++++++++++------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/web/src/hooks/useClassicAppealContext.tsx b/web/src/hooks/useClassicAppealContext.tsx
index 687fc184c..a0f123a71 100644
--- a/web/src/hooks/useClassicAppealContext.tsx
+++ b/web/src/hooks/useClassicAppealContext.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState, createContext, useContext } from "react";
+import React, { useMemo, createContext, useContext, useState } from "react";
 
 import { useParams } from "react-router-dom";
 
@@ -7,6 +7,7 @@ import { Periods } from "consts/periods";
 import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
 import { useCountdown } from "hooks/useCountdown";
 import { getLocalRounds } from "utils/getLocalRounds";
+import { isUndefined } from "utils/index";
 
 import { useAppealCost } from "queries/useAppealCost";
 import { useClassicAppealQuery, ClassicAppealQuery } from "queries/useClassicAppealQuery";
@@ -15,6 +16,7 @@ import { useDisputeKitClassicMultipliers } from "queries/useDisputeKitClassicMul
 interface ICountdownContext {
   loserSideCountdown?: number;
   winnerSideCountdown?: number;
+  isLoading?: boolean;
 }
 const CountdownContext = createContext<ICountdownContext>({});
 
@@ -73,6 +75,8 @@ export const ClassicAppealProvider: React.FC<{
     dispute?.court.timesPerPeriod[Periods.appeal]
   );
 
+  const isLoading = useMemo(() => isUndefined(dispute) || isUndefined(multipliers), [dispute, multipliers]);
+
   const { loserRequiredFunding, winnerRequiredFunding } = useMemo(
     () => ({
       loserRequiredFunding: getRequiredFunding(appealCost, multipliers?.loser_stake_multiplier),
@@ -85,7 +89,10 @@ export const ClassicAppealProvider: React.FC<{
 
   return (
     <CountdownContext.Provider
-      value={useMemo(() => ({ loserSideCountdown, winnerSideCountdown }), [loserSideCountdown, winnerSideCountdown])}
+      value={useMemo(
+        () => ({ loserSideCountdown, winnerSideCountdown, isLoading }),
+        [loserSideCountdown, winnerSideCountdown, isLoading]
+      )}
     >
       <SelectedOptionContext.Provider
         value={useMemo(() => ({ selectedOption, setSelectedOption }), [selectedOption, setSelectedOption])}
diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx
index ceb47eb2a..24c4108d5 100644
--- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx
+++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import styled from "styled-components";
 
 import { useCountdownContext } from "hooks/useClassicAppealContext";
-import { isUndefined } from "utils/index";
 
 import { StyledSkeleton } from "components/StyledSkeleton";
 
@@ -18,13 +17,20 @@ interface IOptions {
 }
 
 const Options: React.FC<IOptions> = ({ setAmount }) => {
-  const { loserSideCountdown } = useCountdownContext();
-  return !isUndefined(loserSideCountdown) ? (
+  const { loserSideCountdown, isLoading } = useCountdownContext();
+
+  return (
     <Container>
-      {loserSideCountdown > 0 ? <StageOne setAmount={setAmount} /> : <StageTwo setAmount={setAmount} />}
+      {!isLoading ? (
+        loserSideCountdown && loserSideCountdown > 0 ? (
+          <StageOne setAmount={setAmount} />
+        ) : (
+          <StageTwo setAmount={setAmount} />
+        )
+      ) : (
+        <StyledSkeleton />
+      )}
     </Container>
-  ) : (
-    <StyledSkeleton />
   );
 };
 

From e18e65a9f6f58ae7fd968d2401f65df028196375 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Tue, 21 Jan 2025 20:31:10 +0100
Subject: [PATCH 2/2] fix: condition fix

---
 .../pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx
index 24c4108d5..f5416ed1a 100644
--- a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx
+++ b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx
@@ -22,7 +22,7 @@ const Options: React.FC<IOptions> = ({ setAmount }) => {
   return (
     <Container>
       {!isLoading ? (
-        loserSideCountdown && loserSideCountdown > 0 ? (
+        loserSideCountdown > 0 ? (
           <StageOne setAmount={setAmount} />
         ) : (
           <StageTwo setAmount={setAmount} />