fix(demo): preload the Cal.com booking embed while the visitor fills the form

The embed script, booker iframe, and its assets only started downloading
after the visitor pressed Continue, so the calendar took several seconds
to appear. Warm the whole path on first form focus via the embed's
documented preload instruction (hidden ?preload=true iframe caches the
booker assets) plus a preconnect to app.cal.com. Nothing Cal.com-related
loads at initial page load, so Lighthouse/LCP are untouched.

Author: waleedlatif1

apps/sim/app/(landing)/demo/components/demo-booking/demo-booking.tsx

@@ -3,10 +3,19 @@
 import { type CSSProperties, useEffect, useRef, useState } from 'react'
 import { chipBorderShadowRing, cn } from '@sim/emcn'
 import dynamic from 'next/dynamic'
+import { preconnect } from 'react-dom'
 import { DemoForm, type DemoLead } from '@/app/(landing)/demo/components/demo-form'
 
 const importScheduler = () => import('@/app/(landing)/demo/components/demo-scheduler')
 
+/**
+ * Warm the entire booking path while the visitor fills the form: the scheduler
+ * chunk, Cal.com's embed.js, and the booker iframe assets (via the embed's
+ * `preload` instruction). Fired on first form focus so none of it competes
+ * with initial page load, and finished long before the visitor submits.
+ */
+const preloadScheduler = () => importScheduler().then((m) => m.preloadCalEmbed())
+
 /**
  * Lazy-loaded so the Cal.com embed never enters the initial landing bundle - it
  * loads only once a visitor reaches the booking step. `loading: () => null` (no
@@ -42,6 +51,8 @@ interface DemoBookingProps {
  * hides/shows.
  */
 export function DemoBooking({ className }: DemoBookingProps) {
+  preconnect('https://app.cal.com')
+
   const [lead, setLead] = useState<DemoLead | null>(null)
   const [formHeight, setFormHeight] = useState<number>()
   const formRef = useRef<HTMLDivElement>(null)
@@ -75,7 +86,7 @@ export function DemoBooking({ className }: DemoBookingProps) {
         <div
           className='w-full min-w-0 shrink-0'
           inert={showScheduler}
-          onFocusCapture={() => void importScheduler()}
+          onFocusCapture={() => void preloadScheduler()}
         >
           <div ref={formRef} className='p-6 max-sm:p-5'>
             <DemoForm onComplete={setLead} />

apps/sim/app/(landing)/demo/components/demo-scheduler/demo-scheduler.tsx

@@ -19,6 +19,24 @@ interface DemoSchedulerProps {
   lead: DemoLead
 }
 
+let calEmbedPreloaded = false
+
+/**
+ * Warm the Cal.com embed before the scheduler mounts. Loads `embed.js` and
+ * issues the embed's `preload` instruction, which fetches the booker in a
+ * hidden `?preload=true` iframe so its assets are already cached when the real
+ * embed renders on submit. Without this, nothing Cal.com-related starts
+ * downloading until the visitor presses Continue, which is why the calendar
+ * used to take several seconds to appear. Idempotent — repeat calls no-op.
+ */
+export function preloadCalEmbed(): void {
+  if (calEmbedPreloaded) return
+  calEmbedPreloaded = true
+  getCalApi({ namespace: CAL_NAMESPACE }).then((cal) => {
+    cal('preload', { calLink: CAL_LINK })
+  })
+}
+
 /**
  * Step 2 of the booking card - the Cal.com scheduler, prefilled from the form's
  * {@link DemoLead}. Rendered inside the card chrome owned by {@link DemoBooking}

apps/sim/app/(landing)/demo/components/demo-scheduler/index.ts

@@ -1 +1 @@
-export { DemoScheduler } from './demo-scheduler'
+export { DemoScheduler, preloadCalEmbed } from './demo-scheduler'