feat(web): add skeletons to improve UX, modularize code

kemuru · jaybuidl · commit 7d5c8ecd85a7 · 2023-08-25T12:17:53.000+08:00
diff --git a/web/src/components/DisputeCard/index.tsx b/web/src/components/DisputeCard/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { useNavigate } from "react-router-dom";
 import { formatEther } from "viem";
-import Skeleton from "react-loading-skeleton";
+import { StyledSkeleton } from "components/StyledSkeleton";
 import { Card } from "@kleros/ui-components-library";
 import { Periods } from "consts/periods";
 import { CasesPageQuery } from "queries/useCasesQuery";
@@ -17,10 +17,6 @@ const StyledCard = styled(Card)`
   min-width: 312px;
   width: auto;
   height: 260px;
-
-  .react-loading-skeleton {
-    z-index: 0;
-  }
 `;
 
 const Container = styled.div`
@@ -58,7 +54,7 @@ const DisputeCard: React.FC<CasesPageQuery["disputes"][number]> = ({
       : getPeriodEndTimestamp(lastPeriodChange, currentPeriodIndex, court.timesPerPeriod);
   const { data: disputeTemplate } = useDisputeTemplate(id, arbitrated.id as `0x${string}`);
   const title = isUndefined(disputeTemplate) ? (
-    <Skeleton />
+    <StyledSkeleton />
   ) : (
     disputeTemplate?.title ?? "The dispute's template is not correct please vote refuse to arbitrate"
   );
diff --git a/web/src/components/StatDisplay.tsx b/web/src/components/StatDisplay.tsx
@@ -36,8 +36,8 @@ const createPair = (iconColor: string, backgroundColor: string) => ({
 
 export interface IStatDisplay {
   title: string;
-  text: string;
-  subtext: string;
+  text: string | React.ReactNode;
+  subtext: string | React.ReactNode;
   icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
   color: "red" | "orange" | "green" | "blue" | "purple";
 }
diff --git a/web/src/components/StyledSkeleton.tsx b/web/src/components/StyledSkeleton.tsx
@@ -0,0 +1,6 @@
+import styled from "styled-components";
+import Skeleton from "react-loading-skeleton";
+
+export const StyledSkeleton = styled(Skeleton)`
+  z-index: 0;
+`;
diff --git a/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx b/web/src/pages/Cases/CaseDetails/Appeal/Classic/Options/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { useLoserSideCountdownContext } from "hooks/useClassicAppealContext";
+import { StyledSkeleton } from "components/StyledSkeleton";
 import StageOne from "./StageOne";
 import StageTwo from "./StageTwo";
 import { isUndefined } from "utils/index";
@@ -14,7 +15,7 @@ const Options: React.FC = () => {
   return !isUndefined(loserSideCountdown) ? (
     <Container>{loserSideCountdown > 0 ? <StageOne /> : <StageTwo />}</Container>
   ) : (
-    <h1>Loading...</h1>
+    <StyledSkeleton />
   );
 };
 
diff --git a/web/src/pages/Cases/CaseDetails/Overview.tsx b/web/src/pages/Cases/CaseDetails/Overview.tsx
@@ -3,7 +3,6 @@ import styled from "styled-components";
 import { useParams } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
 import { formatEther } from "viem";
-import Skeleton from "react-loading-skeleton";
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 import { useDisputeTemplate } from "queries/useDisputeTemplate";
 import { useCourtPolicy } from "queries/useCourtPolicy";
@@ -12,6 +11,7 @@ import { isUndefined } from "utils/index";
 import { Periods } from "consts/periods";
 import { IPFS_GATEWAY } from "consts/index";
 import PolicyIcon from "svgs/icons/policy.svg";
+import { StyledSkeleton } from "components/StyledSkeleton";
 import DisputeInfo from "components/DisputeCard/DisputeInfo";
 import Verdict from "components/Verdict/index";
 
@@ -95,7 +95,7 @@ const Overview: React.FC<IOverview> = ({ arbitrable, courtID, currentPeriodIndex
       <Container>
         <h1>
           {isUndefined(disputeTemplate) ? (
-            <Skeleton />
+            <StyledSkeleton />
           ) : (
             disputeTemplate?.title ?? "The dispute's template is not correct please vote refuse to arbitrate"
           )}
diff --git a/web/src/pages/Cases/CaseDetails/Timeline.tsx b/web/src/pages/Cases/CaseDetails/Timeline.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 import { Periods } from "consts/periods";
 import { DisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 import { Box, Steps } from "@kleros/ui-components-library";
+import { StyledSkeleton } from "components/StyledSkeleton";
 import { useCountdown } from "hooks/useCountdown";
 import { secondsToDayHourMinute } from "utils/date";
 
@@ -46,7 +47,7 @@ const useTimeline = (dispute: DisputeDetailsQuery["dispute"], currentItemIndex:
     dispute?.court.timesPerPeriod
   );
   const countdown = useCountdown(deadlineCurrentPeriod);
-  const getSubitems = (index: number): string[] => {
+  const getSubitems = (index: number): string[] | React.ReactNode[] => {
     if (typeof countdown !== "undefined" && dispute) {
       if (index === currentItemIndex && countdown === 0) {
         return ["Time's up!"];
@@ -60,7 +61,7 @@ const useTimeline = (dispute: DisputeDetailsQuery["dispute"], currentItemIndex:
         return [secondsToDayHourMinute(dispute?.court.timesPerPeriod[index])];
       }
     }
-    return ["Loading..."];
+    return [<StyledSkeleton key={index} width={60} />];
   };
   return titles.map((title, i) => ({
     title,
diff --git a/web/src/pages/Courts/CourtDetails/Description.tsx b/web/src/pages/Courts/CourtDetails/Description.tsx
@@ -3,6 +3,7 @@ import styled from "styled-components";
 import ReactMarkdown from "react-markdown";
 import { Routes, Route, Navigate, useParams, useNavigate, useLocation } from "react-router-dom";
 import { Tabs } from "@kleros/ui-components-library";
+import { StyledSkeleton } from "components/StyledSkeleton";
 import { useCourtPolicy } from "queries/useCourtPolicy";
 
 const Container = styled.div`
@@ -101,7 +102,7 @@ const formatMarkdown = (markdown?: string) =>
   markdown ? (
     <ReactMarkdown>{typeof markdown === "string" ? markdown.replace(/\n/g, "  \n") : markdown}</ReactMarkdown>
   ) : (
-    <p>Loading...</p>
+    <StyledSkeleton />
   );
 
 export default Description;
diff --git a/web/src/pages/Courts/CourtDetails/Stats.tsx b/web/src/pages/Courts/CourtDetails/Stats.tsx
@@ -5,7 +5,9 @@ import { useCourtDetails, CourtDetailsQuery } from "queries/useCourtDetails";
 import { useCoinPrice } from "hooks/useCoinPrice";
 import { KLEROS_CONTRACT_ADDRESS, WETH_CONTRACT_ADDRESS } from "consts/index";
 import { formatETH, formatPNK, formatUnitsWei, formatUSD, isUndefined } from "utils/index";
+import { calculateSubtextRender } from "utils/calculateSubtextRender";
 import StatDisplay, { IStatDisplay } from "components/StatDisplay";
+import { StyledSkeleton } from "components/StyledSkeleton";
 import BalanceIcon from "svgs/icons/law-balance.svg";
 import MinStake from "svgs/icons/min-stake.svg";
 import VoteStake from "svgs/icons/vote-stake.svg";
@@ -25,7 +27,7 @@ interface IStat {
   title: string;
   coinId?: number;
   getText: (data: CourtDetailsQuery["court"]) => string;
-  getSubtext: (data: CourtDetailsQuery["court"], coinPrice?: number) => string;
+  getSubtext?: (data: CourtDetailsQuery["court"], coinPrice?: number) => string;
   color: IStatDisplay["color"];
   icon: React.FC<React.SVGAttributes<SVGElement>>;
 }
@@ -50,7 +52,6 @@ const stats: IStat[] = [
   {
     title: "Active Jurors",
     getText: (data) => data?.numberStakedJurors,
-    getSubtext: () => "",
     color: "purple",
     icon: PNKRedistributedIcon,
   },
@@ -65,14 +66,12 @@ const stats: IStat[] = [
   {
     title: "Cases",
     getText: (data) => data?.numberDisputes,
-    getSubtext: () => "",
     color: "orange",
     icon: BalanceIcon,
   },
   {
     title: "In Progress",
     getText: (data) => data?.numberDisputes,
-    getSubtext: () => "",
     color: "orange",
     icon: BalanceIcon,
   },
@@ -108,12 +107,13 @@ const Stats = () => {
     <StyledCard>
       {stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => {
         const coinPrice = !isUndefined(pricesData) ? pricesData[coinIdToAddress[coinId!]]?.price : undefined;
+
         return (
           <StatDisplay
             key={i}
             {...{ title, color, icon }}
-            text={data ? getText(data.court) : "Fetching..."}
-            subtext={data ? getSubtext(data.court, coinPrice) : "Fetching..."}
+            text={data ? getText(data.court) : <StyledSkeleton />}
+            subtext={calculateSubtextRender(data ? data.court : undefined, getSubtext, coinPrice)}
           />
         );
       })}
diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx
@@ -10,6 +10,7 @@ import { DEFAULT_CHAIN } from "consts/chains";
 import { PNK_FAUCET_CONTRACT_ADDRESS } from "consts/index";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { isUndefined } from "utils/index";
+import { StyledSkeleton } from "components/StyledSkeleton";
 import Stats from "./Stats";
 import Description from "./Description";
 import StakePanel from "./StakePanel";
@@ -35,6 +36,10 @@ const StyledBreadcrumb = styled(Breadcrumb)`
   margin: 0px 0 12px 0;
 `;
 
+const StyledBreadcrumbSkeleton = styled.div`
+  margin-top: 16px;
+`;
+
 const CourtDetails: React.FC = () => {
   const { id } = useParams();
   const [isSending, setIsSending] = useState(false);
@@ -44,7 +49,7 @@ const CourtDetails: React.FC = () => {
   const { address } = useAccount();
   const { data: claimed } = usePnkFaucetWithdrewAlready({
     enabled: !isUndefined(address),
-    args: [address],
+    args: [address ?? "0x00"],
     watch: true,
   });
 
@@ -80,9 +85,15 @@ const CourtDetails: React.FC = () => {
   return (
     <Container>
       <StyledCard>
-        <h1>{policy ? policy.name : "Loading..."}</h1>
+        <h1>{policy ? policy.name : <StyledSkeleton width={200} />}</h1>
         <ButtonContainer>
-          {items && <StyledBreadcrumb items={items} />}
+          {items ? (
+            <StyledBreadcrumb items={items} />
+          ) : (
+            <StyledBreadcrumbSkeleton>
+              <StyledSkeleton width={100} />
+            </StyledBreadcrumbSkeleton>
+          )}
           {chain?.id === DEFAULT_CHAIN && !claimed && (
             <Button
               variant="primary"
diff --git a/web/src/pages/Courts/TopSearch.tsx b/web/src/pages/Courts/TopSearch.tsx
@@ -1,23 +1,17 @@
 import React, { useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { DropdownCascader } from "@kleros/ui-components-library";
+import { StyledSkeleton } from "components/StyledSkeleton";
 import { useCourtTree, CourtTreeQuery } from "queries/useCourtTree";
 
 const TopSearch: React.FC = () => {
   const { data } = useCourtTree();
   const navigate = useNavigate();
-  const items = useMemo(
-    () => typeof data !== "undefined" && [rootToItems(data.court)],
-    [data]
-  );
+  const items = useMemo(() => typeof data !== "undefined" && [rootToItems(data.court)], [data]);
   return items ? (
-    <DropdownCascader
-      items={items}
-      onSelect={(path: string) => navigate(path)}
-      placeholder="Select Court"
-    />
+    <DropdownCascader items={items} onSelect={(path: string) => navigate(path)} placeholder="Select Court" />
   ) : (
-    <></>
+    <StyledSkeleton width={240} height={42} />
   );
 };
 
@@ -30,10 +24,7 @@ interface IItem {
 const rootToItems = (court: CourtTreeQuery["court"]): IItem => ({
   label: court!.name ? court!.name : "Unnamed Court",
   value: `/courts/${court!.id}`,
-  children:
-    court!.children.length > 0
-      ? court!.children.map((child) => rootToItems(child))
-      : undefined,
+  children: court!.children.length > 0 ? court!.children.map((child) => rootToItems(child)) : undefined,
 });
 
 export default TopSearch;
diff --git a/web/src/pages/Dashboard/Courts/index.tsx b/web/src/pages/Dashboard/Courts/index.tsx
@@ -21,17 +21,16 @@ const Courts: React.FC = () => {
 
   return (
     <>
-      {!isUndefined(data) && (
-        <Container>
-          <h1> My Courts </h1>
-          <hr />
-          <CourtsContainer>
-            {data.user?.tokens?.map(({ court: { id, name } }) => {
+      <Container>
+        <h1> My Courts </h1>
+        <hr />
+        <CourtsContainer>
+          {!isUndefined(data) &&
+            data.user?.tokens?.map(({ court: { id, name } }) => {
               return <CourtCard key={id} id={id} name={name ?? ""} />;
             })}
-          </CourtsContainer>
-        </Container>
-      )}
+        </CourtsContainer>
+      </Container>
     </>
   );
 };
diff --git a/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx b/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx
@@ -63,26 +63,23 @@ const Coherency: React.FC = () => {
 
   return (
     <>
-      {!isUndefined(data) && (
-        <Container>
-          <WithHelpTooltip place="bottom" {...{ tooltipMsg }}>
-            <label> Juror Rewards </label>
-          </WithHelpTooltip>
-
-          {rewards.map(({ token, coinId, getValue, getAmount }) => {
-            const coinPrice = !isUndefined(pricesData) ? pricesData[coinIdToAddress[coinId]]?.price : undefined;
-            const totalReward = calculateTotalReward(coinId, data);
-            return (
-              <TokenRewards
-                key={coinId}
-                {...{ token }}
-                amount={data ? getAmount(totalReward) : "Fetching..."}
-                value={data ? getValue(totalReward, coinPrice) : "Fetching..."}
-              />
-            );
-          })}
-        </Container>
-      )}
+      <Container>
+        <WithHelpTooltip place="bottom" {...{ tooltipMsg }}>
+          <label> Juror Rewards </label>
+        </WithHelpTooltip>
+        {rewards.map(({ token, coinId, getValue, getAmount }) => {
+          const coinPrice = !isUndefined(pricesData) ? pricesData[coinIdToAddress[coinId]]?.price : undefined;
+          const totalReward = data && calculateTotalReward(coinId, data);
+          return (
+            <TokenRewards
+              key={coinId}
+              {...{ token }}
+              amount={!isUndefined(totalReward) ? getAmount(totalReward) : undefined}
+              value={!isUndefined(totalReward) ? getValue(totalReward, coinPrice) : undefined}
+            />
+          );
+        })}
+      </Container>
     </>
   );
 };
diff --git a/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx b/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import GradientTokenIcons from "components/GradientTokenIcons";
+import { StyledSkeleton } from "components/StyledSkeleton";
 
 const RewardContainer = styled.div`
   display: flex;
@@ -15,18 +16,18 @@ const StyledH1 = styled.h1`
 
 interface ITokenRewards {
   token: "ETH" | "PNK";
-  amount: string;
-  value: string;
+  amount: string | undefined;
+  value: string | undefined;
 }
 
 const TokenRewards: React.FC<ITokenRewards> = ({ token, amount, value }) => {
   return (
     <RewardContainer>
       {token && <GradientTokenIcons icon={token} />}
-      <StyledH1>
-        {amount} {token}
-      </StyledH1>
-      <label>$ {value}</label>
+      <StyledH1>{amount ? amount : <StyledSkeleton width={76} />}</StyledH1>
+      <StyledH1>{token}</StyledH1>
+      <label>$ </label>
+      <label>{value ? value : <StyledSkeleton width={32} />}</label>
     </RewardContainer>
   );
 };
diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Dashboard/index.tsx
@@ -38,14 +38,12 @@ const Dashboard: React.FC = () => {
         <>
           <JurorInfo />
           <Courts />
-          {data && (
-            <StyledCasesDisplay
-              title="My Cases"
-              disputes={data.disputes}
-              numberDisputes={data.counter?.cases}
-              {...{ currentPage, setCurrentPage, casesPerPage }}
-            />
-          )}
+          <StyledCasesDisplay
+            title="My Cases"
+            disputes={data ? data.disputes : []}
+            numberDisputes={data ? data.counter?.cases : 0}
+            {...{ currentPage, setCurrentPage, casesPerPage }}
+          />
         </>
       ) : (
         <ConnectWalletContainer>
diff --git a/web/src/pages/DisputeTemplateView.tsx b/web/src/pages/DisputeTemplateView.tsx
diff --git a/web/src/pages/Home/CourtOverview/Chart.tsx b/web/src/pages/Home/CourtOverview/Chart.tsx
diff --git a/web/src/pages/Home/CourtOverview/Stats.tsx b/web/src/pages/Home/CourtOverview/Stats.tsx
diff --git a/web/src/pages/Home/LatestCases.tsx b/web/src/pages/Home/LatestCases.tsx
diff --git a/web/src/utils/calculateSubtextRender.tsx b/web/src/utils/calculateSubtextRender.tsx
