Merge branch 'dev' into feat(web)/jurors-page

Author: kemuru

web/src/hooks/queries/useCasesQuery.ts

@@ -17,6 +17,7 @@ export type { CasesPageQuery, DisputeDetailsFragment };
 export const disputeFragment = graphql(`
   fragment DisputeDetails on Dispute {
     id
+    disputeID
     arbitrated {
       id
     }
@@ -34,15 +35,15 @@ export const disputeFragment = graphql(`
 
 const casesQueryWhere = graphql(`
   query CasesPageWhere($skip: Int, $where: Dispute_filter, $orderDirection: OrderDirection, $first: Int) {
-    disputes(first: $first, skip: $skip, orderBy: lastPeriodChange, orderDirection: $orderDirection, where: $where) {
+    disputes(first: $first, skip: $skip, orderBy: disputeID, orderDirection: $orderDirection, where: $where) {
       ...DisputeDetails
     }
   }
 `);
 
 const casesQuery = graphql(`
   query CasesPage($skip: Int, $orderDirection: OrderDirection, $first: Int) {
-    disputes(first: $first, skip: $skip, orderBy: lastPeriodChange, orderDirection: $orderDirection) {
+    disputes(first: $first, skip: $skip, orderBy: disputeID, orderDirection: $orderDirection) {
       ...DisputeDetails
     }
   }
@@ -51,7 +52,7 @@ const casesQuery = graphql(`
 const myCasesQuery = graphql(`
   query MyCases($id: ID!, $skip: Int, $orderDirection: OrderDirection) {
     user(id: $id) {
-      disputes(first: 3, skip: $skip, orderBy: lastPeriodChange, orderDirection: $orderDirection) {
+      disputes(first: 3, skip: $skip, orderBy: disputeID, orderDirection: $orderDirection) {
         ...DisputeDetails
       }
     }
@@ -61,7 +62,7 @@ const myCasesQuery = graphql(`
 const myCasesQueryWhere = graphql(`
   query myCasesPageWhere($id: ID!, $skip: Int, $where: Dispute_filter, $orderDirection: OrderDirection) {
     user(id: $id) {
-      disputes(first: 3, skip: $skip, orderBy: lastPeriodChange, orderDirection: $orderDirection, where: $where) {
+      disputes(first: 3, skip: $skip, orderBy: disputeID, orderDirection: $orderDirection, where: $where) {
         ...DisputeDetails
       }
     }

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])}

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 > 0 ? (
+          <StageOne setAmount={setAmount} />
+        ) : (
+          <StageTwo setAmount={setAmount} />
+        )
+      ) : (
+        <StyledSkeleton />
+      )}
     </Container>
-  ) : (
-    <StyledSkeleton />
   );
 };