fix: RefreshButton handle async onRefresh outside startTransition

client/src/components/home/PublicGames/RefreshButton.tsx

@@ -2,26 +2,38 @@
 
 import { IconRefresh } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
-import { useTransition } from "react";
+import { useState, useTransition } from "react";
 
-export default function RefreshButton({ onRefresh }: { onRefresh?: () => void }) {
+export default function RefreshButton({ onRefresh }: { onRefresh?: () => Promise<void> | void }) {
   const router = useRouter();
-  const [isLoading, startTransition] = useTransition();
+  const [isPending, startTransition] = useTransition();
+  const [isLoading, setIsLoading] = useState(false);
 
-  function handleRefresh() {
-    startTransition(() => {
-      if (onRefresh) onRefresh();
-      else router.refresh();
-    });
+  async function handleRefresh() {
+    if (onRefresh) {
+      setIsLoading(true);
+      try {
+        await onRefresh();
+      } finally {
+        setIsLoading(false);
+      }
+    } else {
+      startTransition(() => {
+        router.refresh();
+      });
+    }
   }
 
+  const loading = isLoading || isPending;
+
   return (
     <button
       aria-label="Refresh public games"
-      className={"btn btn-sm btn-square btn-ghost" + (isLoading ? " loading" : "")}
+      className={"btn btn-sm btn-square btn-ghost" + (loading ? " loading" : "")}
       onClick={handleRefresh}
+      disabled={loading}
     >
-      <IconRefresh size={16} />
+      {!loading && <IconRefresh size={16} />}
     </button>
   );
 }