Skip to content

Add a loading state to the workspace booking action #389

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Nabeelahh merged 1 commit into from
Aug 28, 2026
Merged

Add a loading state to the workspace booking action #389

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 32 additions & 7 deletions frontend/app/workspaces/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -12,6 +13,7 @@ import {
CalendarPlus,
AlertCircle,
RefreshCcw,
Loader2,
} from "lucide-react";

const TYPE_LABELS: Record<string, string> = {
Expand All @@ -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",
Expand Down Expand Up @@ -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
Expand Down
Loading