explorer: add load button for largest accounts card (#14437)

explorer/src/components/TopAccountsCard.tsx

@@ -19,19 +19,15 @@ export function TopAccountsCard() {
   const [showDropdown, setDropdown] = React.useState(false);
   const filter = useQueryFilter();
 
-  // Fetch on load
-  React.useEffect(() => {
-    if (richList === Status.Idle && typeof supply === "object") fetchRichList();
-  }, [supply]); // eslint-disable-line react-hooks/exhaustive-deps
-
   if (typeof supply !== "object") return null;
 
   if (richList === Status.Disconnected) {
     return <ErrorCard text="Not connected to the cluster" />;
   }
 
-  if (richList === Status.Idle || richList === Status.Connecting)
+  if (richList === Status.Connecting) {
     return <LoadingCard />;
+  }
 
   if (typeof richList === "string") {
     return <ErrorCard text={richList} retry={fetchRichList} />;
@@ -39,6 +35,8 @@ export function TopAccountsCard() {
 
   let supplyCount: number;
   let accounts, header;
+
+  if (richList !== Status.Idle) {
     switch (filter) {
       case "nonCirculating": {
         accounts = richList.nonCirculating;
@@ -60,6 +58,7 @@ export function TopAccountsCard() {
         break;
       }
     }
+  }
 
   return (
     <>
@@ -84,6 +83,18 @@ export function TopAccountsCard() {
           </div>
         </div>
 
+        {richList === Status.Idle && (
+          <div className="card-body">
+            <span
+              className="btn btn-white ml-3 d-none d-md-inline"
+              onClick={fetchRichList}
+            >
+              Load Largest Accounts
+            </span>
+          </div>
+        )}
+
+        {accounts && (
           <div className="table-responsive mb-0">
             <table className="table table-sm table-nowrap card-table">
               <thead>
@@ -91,7 +102,9 @@ export function TopAccountsCard() {
                   <th className="text-muted">Rank</th>
                   <th className="text-muted">Address</th>
                   <th className="text-muted text-right">Balance (SOL)</th>
-                <th className="text-muted text-right">% of {header} Supply</th>
+                  <th className="text-muted text-right">
+                    % of {header} Supply
+                  </th>
                 </tr>
               </thead>
               <tbody className="list">
@@ -101,6 +114,7 @@ export function TopAccountsCard() {
               </tbody>
             </table>
           </div>
+        )}
       </div>
     </>
   );