Calendar loads initial view within 2s on 3G and does not block first paint

A blank screen for 4 seconds while the availability API resolves is the leading cause of mobile booking abandonment. Synchronous data fetching on calendar pages blocks first paint, penalizes users on 3G connections (typical in mobile-first markets), and tanks Core Web Vitals LCP scores. ISO 25010 time-behaviour requires that interactive systems provide perceptible feedback within 1–2 seconds. Blocking fetches also mean that a slow or erroring availability API takes down the entire page instead of degrading gracefully to a skeleton.

Wrap the data-fetching calendar component in React Suspense with a skeleton fallback so the page shell renders immediately while availability loads in the background.

// src/app/booking/page.tsx
import { Suspense } from 'react'
import { CalendarContent } from '@/components/CalendarContent'
import { CalendarSkeleton } from '@/components/CalendarSkeleton'

export default function BookingPage() {
  return (
    <Suspense fallback={<CalendarSkeleton />}>
      <CalendarContent />
    </Suspense>
  )
}

Create src/app/booking/loading.tsx as a fallback for the whole route:

export default function Loading() {
  return <CalendarSkeleton />
}

The skeleton should have the same grid dimensions as the real calendar to avoid layout shift when data arrives.