feat: implement useBucketsWithDetails hook for enhanced bucket data retrieval

- Added a new hook, `useBucketsWithDetails`, to fetch detailed information for all buckets using concurrent queries.
- Updated the `HomePage` component to utilize the new hook, allowing for improved calculation of total bucket usage based on detailed data.
- Refactored usage calculation logic to handle multiple asynchronous queries effectively.

src/pages/buckets/hooks.ts

@@ -3,6 +3,7 @@ import {
   useMutation,
   UseMutationOptions,
   useQuery,
+  useQueries,
 } from "@tanstack/react-query";
 import { GetBucketRes, Bucket } from "./types";
 import { CreateBucketSchema } from "./schema";
@@ -22,6 +23,18 @@ export const useBucketDetails = (id?: string | null) => {
   });
 };
 
+export const useBucketsWithDetails = () => {
+  const { data: buckets } = useBuckets();
+
+  return useQueries({
+    queries: (buckets || []).map((bucket) => ({
+      queryKey: ["bucket-details", bucket.id],
+      queryFn: () => api.get<Bucket>("/v2/GetBucketInfo", { params: { id: bucket.id } }),
+      enabled: !!bucket.id,
+    })),
+  });
+};
+
 export const useCreateBucket = (
   options?: UseMutationOptions<unknown, Error, CreateBucketSchema>
 ) => {

src/pages/home/page.tsx

@@ -13,16 +13,19 @@ import {
   PieChart,
 } from "lucide-react";
 import { cn, readableBytes, ucfirst } from "@/lib/utils";
-import { useBuckets } from "../buckets/hooks";
+import { useBucketsWithDetails } from "../buckets/hooks";
 import { useMemo } from "react";
 
 const HomePage = () => {
   const { data: health } = useNodesHealth();
-  const { data: buckets } = useBuckets();
+  const bucketDetailsQueries = useBucketsWithDetails();
 
   const totalUsage = useMemo(() => {
-    return buckets?.reduce((acc, bucket) => acc + bucket.bytes, 0);
+    return bucketDetailsQueries
-  }, [buckets]);
+      .map(query => query.data?.bytes)
+      .filter(bytes => bytes != null)
+      .reduce((acc, bytes) => acc + bytes, 0);
+  }, [bucketDetailsQueries]);
 
   return (
     <div className="container">
@@ -38,8 +41,8 @@ const HomePage = () => {
             health?.status === "healthy"
               ? "text-success"
               : health?.status === "degraded"
-              ? "text-warning"
+                ? "text-warning"
-              : "text-error"
+                : "text-error"
           )}
         />
         <StatsCard title="Nodes" icon={HardDrive} value={health?.knownNodes} />