peers loading added

docs/zetachain/sync/peers-seeds.mdx

@@ -7,13 +7,12 @@ description: Live Peers / Seeds
 
 > When you start a node, you often need to connect to the network. This requires you to connect to one or more peers to start downloading the blockchain and receiving new blocks and transactions. Seeding nodes or bootstrap nodes help in this initial connection process.
 
-#### List of active peers:
-
 :::info
 Copy and run the commands below to add your peers into `config.toml`.
 :::
 
 import LivePeers from '@site/src/components/LivePeers';
+
 <LivePeers rpc="https://zetachain-rpc.f5nodes.com/net_info" />
 
 ```bash

src/components/LivePeers/index.tsx

@@ -12,6 +12,7 @@ interface LivePeersProps {
 
 const LivePeers: React.FC<LivePeersProps> = ({ rpc }) => {
 	const [peers, setPeers] = useState<string>("");
+	const [isLoading, setIsLoading] = useState<boolean>(true);
 
 	useEffect(() => {
 		const fetchLivePeers = async () => {
@@ -25,21 +26,27 @@ const LivePeers: React.FC<LivePeersProps> = ({ rpc }) => {
 				});
 
 				setPeers(extractedPeers.join(", "));
+				setIsLoading(false);
 			} catch (error) {
 				console.error(`Failed to fetch peers info for RPC ${rpc}:`, error);
+				setIsLoading(false);
 			}
 		};
 
 		fetchLivePeers();
-	}, []);
+	}, [rpc]);
 
 	return (
-		<div>
-			<h4>
-				Live peers: <span>{peers.split(", ").length}</span>
-			</h4>
-			<CodeBlock language="bash">{`PEERS="${peers}"`}</CodeBlock>
-		</div>
+		<>
+			{isLoading ? (
+				<p>Loading live peers...</p>
+			) : (
+				<>
+					<h4>Live peers: {peers.split(", ").length}</h4>
+					<CodeBlock language="bash">{`PEERS="${peers}"`}</CodeBlock>
+				</>
+			)}
+		</>
 	);
 };