diff --git a/explorer/src/components/AccountDetails.tsx b/explorer/src/components/AccountDetails.tsx
index ae81c95c11..59985fdfb4 100644
--- a/explorer/src/components/AccountDetails.tsx
+++ b/explorer/src/components/AccountDetails.tsx
@@ -20,6 +20,7 @@ import {
   useFetchAccountOwnedTokens,
   useAccountOwnedTokens,
 } from "providers/accounts/tokens";
+import { useCluster, ClusterStatus } from "providers/cluster";
 
 type Props = { address: string };
 export default function AccountDetails({ address }: Props) {
@@ -51,11 +52,13 @@ function AccountCards({ pubkey }: { pubkey: PublicKey }) {
   const address = pubkey.toBase58();
   const info = useAccountInfo(address);
   const refresh = useFetchAccountInfo();
+  const { status } = useCluster();
 
   // Fetch account on load
   React.useEffect(() => {
-    if (pubkey && !info) fetchAccount(pubkey);
-  }, [address]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (pubkey && !info && status === ClusterStatus.Connected)
+      fetchAccount(pubkey);
+  }, [address, status]); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (!info || info.status === FetchStatus.Fetching) {
     return <LoadingCard />;
diff --git a/explorer/src/components/TransactionDetails.tsx b/explorer/src/components/TransactionDetails.tsx
index cd84cce015..e4c71c6c21 100644
--- a/explorer/src/components/TransactionDetails.tsx
+++ b/explorer/src/components/TransactionDetails.tsx
@@ -6,7 +6,7 @@ import {
   FetchStatus,
 } from "../providers/transactions";
 import { useFetchTransactionDetails } from "providers/transactions/details";
-import { useCluster } from "providers/cluster";
+import { useCluster, ClusterStatus } from "providers/cluster";
 import {
   TransactionSignature,
   SystemProgram,
@@ -49,12 +49,13 @@ function StatusCard({ signature }: Props) {
   const status = useTransactionStatus(signature);
   const refresh = useFetchTransactionStatus();
   const details = useTransactionDetails(signature);
-  const { firstAvailableBlock } = useCluster();
+  const { firstAvailableBlock, status: clusterStatus } = useCluster();
 
   // Fetch transaction on load
   React.useEffect(() => {
-    if (!status) fetchStatus(signature);
-  }, [signature]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (!status && clusterStatus === ClusterStatus.Connected)
+      fetchStatus(signature);
+  }, [signature, clusterStatus]); // eslint-disable-line react-hooks/exhaustive-deps
 
   if (!status || status.fetchStatus === FetchStatus.Fetching) {
     return <LoadingCard />;
@@ -229,9 +230,9 @@ function AccountsCard({ signature }: Props) {
       if (change === 0) return "";
       const sols = lamportsToSolString(change);
       if (change > 0) {
-        return <span className="badge badge-soft-success">{"+" + sols}</span>;
+        return <span className="badge badge-soft-success">+{sols}</span>;
       } else {
-        return <span className="badge badge-soft-warning">{"-" + sols}</span>;
+        return <span className="badge badge-soft-warning">-{sols}</span>;
       }
     };