From 08cdc6ef81e697b3ea1761430e3955099b4a2d60 Mon Sep 17 00:00:00 2001
From: Dayz Tech Co <Dayztechnology@gmail.com>
Date: Fri, 28 Aug 2026 13:43:32 +0100
Subject: [PATCH] fix(workspaces): add loading state to the booking action
 (#351)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Convert the booking CTA from a Link to a button that tracks in-flight navigation
- Disable the action while submitting so duplicate requests are prevented
- Show a spinner and 'Preparing booking…' label during the transition
- Set aria-busy on the action while pending
---
 frontend/app/workspaces/[id]/page.tsx | 39 ++++++++++++++++++++++-----
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/frontend/app/workspaces/[id]/page.tsx b/frontend/app/workspaces/[id]/page.tsx
index 217aece..6ae3857 100644
--- a/frontend/app/workspaces/[id]/page.tsx
+++ b/frontend/app/workspaces/[id]/page.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import { use } from "react";
+import { use, useState } from "react";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import DashboardLayout from "@/components/dashboard/DashboardLayout";
 import { useGetWorkspaceById } from "@/lib/react-query/hooks/workspaces/useGetWorkspaceById";
 import {
@@ -12,6 +13,7 @@ import {
   CalendarPlus,
   AlertCircle,
   RefreshCcw,
+  Loader2,
 } from "lucide-react";
 
 const TYPE_LABELS: Record<string, string> = {
@@ -31,6 +33,17 @@ export default function WorkspaceDetailPage({
   const { data, isLoading, isError, refetch } = useGetWorkspaceById(id);
   const workspace = data?.data;
 
+  // #351: track in-flight booking navigation so the CTA is disabled, shows a
+  // spinner, and duplicate requests are prevented while the booking form loads.
+  const router = useRouter();
+  const [bookingPending, setBookingPending] = useState(false);
+
+  function handleBookWorkspace() {
+    if (bookingPending || !workspace) return;
+    setBookingPending(true);
+    router.push(`/bookings/new?workspaceId=${workspace.id}`);
+  }
+
   const hourlyNaira = workspace
     ? (workspace.hourlyRate / 100).toLocaleString("en-NG", {
         style: "currency",
@@ -213,13 +226,25 @@ export default function WorkspaceDetailPage({
               </div>
 
               {workspace.isActive ? (
-                <Link
-                  href={`/bookings/new?workspaceId=${workspace.id}`}
-                  className="flex items-center justify-center gap-2 w-full py-2.5 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-700 transition-colors"
+                <button
+                  type="button"
+                  onClick={handleBookWorkspace}
+                  disabled={bookingPending}
+                  aria-busy={bookingPending}
+                  className="flex items-center justify-center gap-2 w-full py-2.5 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-700 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
                 >
-                  <CalendarPlus className="w-4 h-4" />
-                  Book this space
-                </Link>
+                  {bookingPending ? (
+                    <>
+                      <Loader2 className="w-4 h-4 animate-spin" aria-hidden="true" />
+                      Preparing booking…
+                    </>
+                  ) : (
+                    <>
+                      <CalendarPlus className="w-4 h-4" aria-hidden="true" />
+                      Book this space
+                    </>
+                  )}
+                </button>
               ) : (
                 <button
                   disabled