use buckets gql query

src/components/BucketSelect.tsx

@@ -1,12 +1,13 @@
 import React from "react"
-import { useState } from "react"
 import { Link } from "react-router-dom"
+import { useListBucktesQuery } from "../generated/graphql"
 import Breadcrum from "./Breadcrum"
 import MoreMenu from "./MoreMenu"
+import { ReactComponent as Spinner } from "./../assets/spinner.svg"
 
 const BucketSelect: React.FC = () => {
 
-	const [buckets] = useState(["dev"])
+	const {data: buckets, loading} = useListBucktesQuery()
 
 	return (
 		<div>
@@ -17,12 +18,17 @@ const BucketSelect: React.FC = () => {
 				</div>
 			</div>
 			<ul>
-				{buckets.map((e)=>
+				{buckets?.buckets.map((e)=>
 					<li key={e}>
 						<Link to={`/f/${e}/`} >{e}</Link>
 					</li>
 				)}
 			</ul>
+			{loading && 
+				<div className="flex justify-center mt-4">
+					<Spinner className="animate-spin h-6 w-6 dark:text-white"  />
+				</div>
+			}
 		</div>
 	)
 }