Fix bug causing eager fetching of rich list

explorer/src/components/SupplyCard.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useSupply, useFetchSupply } from "providers/supply";
+import { useSupply, useFetchSupply, Status } from "providers/supply";
 import LoadingCard from "./common/LoadingCard";
 import ErrorCard from "./common/ErrorCard";
 import { lamportsToSolString } from "utils";
@@ -9,11 +9,18 @@ export default function SupplyCard() {
   const supply = useSupply();
   const fetchSupply = useFetchSupply();
 
-  if (typeof supply === "boolean") {
+  // Fetch supply on load
-    if (supply) return <LoadingCard />;
+  React.useEffect(() => {
+    fetchSupply();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (supply === Status.Disconnected) {
     return <ErrorCard text="Not connected to the cluster" />;
   }
 
+  if (supply === Status.Idle || supply === Status.Connecting)
+    return <LoadingCard />;
+
   if (typeof supply === "string") {
     return <ErrorCard text={supply} retry={fetchSupply} />;
   }

explorer/src/components/TopAccountsCard.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { AccountBalancePair } from "@solana/web3.js";
 import Copyable from "./Copyable";
-import { useRichList, useFetchRichList } from "providers/richList";
+import { useRichList, useFetchRichList, Status } from "providers/richList";
 import LoadingCard from "./common/LoadingCard";
 import ErrorCard from "./common/ErrorCard";
 import { lamportsToSolString } from "utils";
@@ -11,11 +11,18 @@ export default function TopAccountsCard() {
   const richList = useRichList();
   const fetchRichList = useFetchRichList();
 
-  if (typeof richList === "boolean") {
+  // Fetch on load
-    if (richList) return <LoadingCard />;
+  React.useEffect(() => {
+    fetchRichList();
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (richList === Status.Disconnected) {
     return <ErrorCard text="Not connected to the cluster" />;
   }
 
+  if (richList === Status.Idle || richList === Status.Connecting)
+    return <LoadingCard />;
+
   if (typeof richList === "string") {
     return <ErrorCard text={richList} retry={fetchRichList} />;
   }

explorer/src/providers/richList.tsx

@@ -3,13 +3,19 @@ import React from "react";
 import { AccountBalancePair, Connection } from "@solana/web3.js";
 import { useCluster, ClusterStatus } from "./cluster";
 
+export enum Status {
+  Idle,
+  Disconnected,
+  Connecting
+}
+
 type RichList = {
   accounts: AccountBalancePair[];
   totalSupply: number;
   circulatingSupply: number;
 };
 
-type State = RichList | boolean | string;
+type State = RichList | Status | string;
 
 type Dispatch = React.Dispatch<React.SetStateAction<State>>;
 const StateContext = React.createContext<State | undefined>(undefined);
@@ -17,13 +23,16 @@ const DispatchContext = React.createContext<Dispatch | undefined>(undefined);
 
 type Props = { children: React.ReactNode };
 export function RichListProvider({ children }: Props) {
-  const [state, setState] = React.useState<State>(false);
+  const [state, setState] = React.useState<State>(Status.Idle);
-  const { status, url } = useCluster();
+  const { status: clusterStatus, url } = useCluster();
 
   React.useEffect(() => {
-    if (status === ClusterStatus.Connecting) setState(false);
+    if (state !== Status.Idle) {
-    if (status === ClusterStatus.Connected) fetch(setState, url);
+      if (clusterStatus === ClusterStatus.Connecting)
-  }, [status, url]);
+        setState(Status.Disconnected);
+      if (clusterStatus === ClusterStatus.Connected) fetch(setState, url);
+    }
+  }, [clusterStatus, url]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <StateContext.Provider value={state}>
@@ -35,7 +44,8 @@ export function RichListProvider({ children }: Props) {
 }
 
 async function fetch(dispatch: Dispatch, url: string) {
-  dispatch(true);
+  dispatch(Status.Connecting);
+
   try {
     const connection = new Connection(url, "max");
     const supply = (await connection.getSupply()).value;
@@ -43,9 +53,9 @@ async function fetch(dispatch: Dispatch, url: string) {
       await connection.getLargestAccounts({ filter: "circulating" })
     ).value;
 
-    // Update state if selected cluster hasn't changed
+    // Update state if still connecting
     dispatch(state => {
-      if (!state) return state;
+      if (state !== Status.Connecting) return state;
       return {
         accounts,
         totalSupply: supply.total,

explorer/src/providers/supply.tsx

@@ -3,7 +3,13 @@ import React from "react";
 import { Supply, Connection } from "@solana/web3.js";
 import { useCluster, ClusterStatus } from "./cluster";
 
-type State = Supply | boolean | string;
+export enum Status {
+  Idle,
+  Disconnected,
+  Connecting
+}
+
+type State = Supply | Status | string;
 
 type Dispatch = React.Dispatch<React.SetStateAction<State>>;
 const StateContext = React.createContext<State | undefined>(undefined);
@@ -11,13 +17,16 @@ const DispatchContext = React.createContext<Dispatch | undefined>(undefined);
 
 type Props = { children: React.ReactNode };
 export function SupplyProvider({ children }: Props) {
-  const [state, setState] = React.useState<State>(false);
+  const [state, setState] = React.useState<State>(Status.Idle);
-  const { status, url } = useCluster();
+  const { status: clusterStatus, url } = useCluster();
 
   React.useEffect(() => {
-    if (status === ClusterStatus.Connecting) setState(false);
+    if (state !== Status.Idle) {
-    if (status === ClusterStatus.Connected) fetch(setState, url);
+      if (clusterStatus === ClusterStatus.Connecting)
-  }, [status, url]);
+        setState(Status.Disconnected);
+      if (clusterStatus === ClusterStatus.Connected) fetch(setState, url);
+    }
+  }, [clusterStatus, url]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <StateContext.Provider value={state}>
@@ -29,14 +38,15 @@ export function SupplyProvider({ children }: Props) {
 }
 
 async function fetch(dispatch: Dispatch, url: string) {
-  dispatch(true);
+  dispatch(Status.Connecting);
+
   try {
     const connection = new Connection(url, "max");
     const supply = (await connection.getSupply()).value;
 
-    // Update state if selected cluster hasn't changed
+    // Update state if still connecting
     dispatch(state => {
-      if (!state) return state;
+      if (state !== Status.Connecting) return state;
       return supply;
     });
   } catch (err) {