feat: add loading and error states to stats component

web/src/hooks/useCoinPrice.tsx

@@ -1,25 +1,33 @@
 import { useQuery } from "@tanstack/react-query";
 
-const fetchCoinPrices = async (...coinIds) => {
-  const response = await fetch(`https://coins.llama.fi/prices/current/${coinIds.join(",")}?searchWidth=1h`);
+const fetchCoinPrices = async (coinIds: readonly string[]): Promise<Prices> => {
+  const ids = Array.from(new Set(coinIds)).filter(Boolean).sort().map(encodeURIComponent).join(",");
+  if (!ids) return {};
+  const response = await fetch(`https://coins.llama.fi/prices/current/${ids}?searchWidth=1h`);
+  if (!response.ok) throw new Error(`Failed to fetch coin prices (${response.status})`);
   const data = await response.json();
-  return data.coins;
+  return (data?.coins ?? {}) as Prices;
 };
 
 export type Prices = {
   [coinId: string]: { price: number };
 };
 
 export const useCoinPrice = (coinIds: string[]) => {
-  const isEnabled = coinIds !== undefined;
-
-  const { data: prices, isError } = useQuery<Prices>({
-    queryKey: [`coinPrice${coinIds}`],
-    enabled: isEnabled,
-    queryFn: async () => fetchCoinPrices(coinIds),
+  const {
+    data: prices,
+    isError,
+    isLoading,
+    error,
+  } = useQuery<Prices>({
+    queryKey: ["coinPrice", coinIds],
+    enabled: Array.isArray(coinIds) && coinIds.length > 0,
+    queryFn: () => fetchCoinPrices(coinIds),
   });
   return {
     prices,
     isError,
+    isLoading,
+    error,
   };
 };

web/src/pages/Courts/CourtDetails/Stats/index.tsx

@@ -14,6 +14,7 @@ import { useCourtDetails } from "queries/useCourtDetails";
 import { landscapeStyle } from "styles/landscapeStyle";
 
 import StatsContent from "./StatsContent";
+import Spinner from "components/Spinner";
 
 const Container = styled.div`
   padding: 0 24px 12px 24px;
@@ -50,13 +51,31 @@ const StyledAccordion = styled(Accordion)`
   )}
 `;
 
+const ErrorMessage = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  color: ${({ theme }) => theme.error};
+  font-size: 16px;
+  font-weight: 500;
+`;
+
 const Stats = () => {
   const { id } = useParams();
-  const { data } = useCourtDetails(id);
+  const { data, isLoading: isLoadingCourt, error: courtError } = useCourtDetails(id);
   const coinIds = [CoinIds.PNK, CoinIds.ETH];
-  const { prices: pricesData } = useCoinPrice(coinIds);
+  const { prices: pricesData, isLoading: isLoadingPrices, error: pricesError } = useCoinPrice(coinIds);
   const isDesktop = useIsDesktop();
 
+  if (isLoadingCourt || isLoadingPrices) {
+    return <Spinner />;
+  }
+
+  if (courtError || pricesError) {
+    return <ErrorMessage>Failed to load statistics</ErrorMessage>;
+  }
+
   return isDesktop ? (
     <Container>
       <Header>Statistics</Header>
@@ -75,4 +94,4 @@ const Stats = () => {
   );
 };
 
-export default Stats;
+export default Stats;