feat: add loading and error states to stats component

Author: ManiBAJPAI22

web/src/hooks/useCoinPrice.tsx

@@ -13,13 +13,20 @@ export type Prices = {
 export const useCoinPrice = (coinIds: string[]) => {
  const isEnabled = coinIds !== undefined;
 
- const { data: prices, isError } = useQuery<Prices>({
+ const {
+ data: prices,
+ isError,
+ isLoading,
+ error,
+ } = useQuery<Prices>({
  queryKey: [`coinPrice${coinIds}`],
  enabled: isEnabled,
  queryFn: async () => 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;