fix(landing): optimize customer media loading (#7656)

Author: waleedlatif1

apps/sim/app/(landing)/components/featured-customer/featured-customer-card.tsx

@@ -34,10 +34,16 @@ interface FeaturedCustomerCardProps {
   story: FeaturedCustomerStory
   active: boolean
   emphasized: boolean
+  preload: boolean
 }
 
 /** Shared media and editorial caption treatment for each featured-customer slide. */
-export function FeaturedCustomerCard({ story, active, emphasized }: FeaturedCustomerCardProps) {
+export function FeaturedCustomerCard({
+  story,
+  active,
+  emphasized,
+  preload,
+}: FeaturedCustomerCardProps) {
   const videoRef = useRef<HTMLVideoElement>(null)
   const reducedMotion = usePrefersReducedMotion()
   const isFilm = story.media.kind === 'video'
@@ -51,10 +57,9 @@ export function FeaturedCustomerCard({ story, active, emphasized }: FeaturedCust
     }
 
     /**
-     * The film streams only while the slide is on screen in a visible tab:
-     * `play()` defeats `preload='none'`, so calling it at mount would pull
-     * the whole file for a section well below the fold. Autoplay may still be
-     * blocked, in which case the poster remains the fallback.
+     * Preload prepares neighboring films when the carousel reaches the viewport.
+     * Playback is restricted to the active, visible slide in a visible tab.
+     * If autoplay is blocked, the poster remains the fallback.
      */
     const canObserve = typeof IntersectionObserver !== 'undefined'
     let inView = !canObserve
@@ -103,7 +108,7 @@ export function FeaturedCustomerCard({ story, active, emphasized }: FeaturedCust
             loop
             muted
             playsInline
-            preload='none'
+            preload={preload && !reducedMotion ? 'auto' : 'none'}
             src={story.media.src}
             tabIndex={-1}
             className='pointer-events-none absolute inset-0 size-full rounded-[inherit] object-cover motion-reduce:hidden'

apps/sim/app/(landing)/components/featured-customer/featured-customer.test.tsx

@@ -43,6 +43,7 @@ beforeEach(() => {
 afterEach(() => {
   vi.useRealTimers()
   vi.restoreAllMocks()
+  vi.unstubAllGlobals()
   document.body.replaceChildren()
 })
 
@@ -87,7 +88,7 @@ describe('FeaturedCustomer', () => {
     )
     const expVideo = expRealty.querySelector('video') as HTMLVideoElement
     expect(expVideo.getAttribute('src')).toBe('/landing/customer-stories/exp-house-color-loop.mp4')
-    expect(expVideo.getAttribute('preload')).toBe('none')
+    expect(expVideo.getAttribute('preload')).toBe('auto')
     expect(expVideo.muted).toBe(true)
     expect(vi.mocked(video.play).mock.contexts).not.toContain(expVideo)
     expect(
@@ -178,6 +179,55 @@ describe('FeaturedCustomer', () => {
     })
   })
 
+  it('prepares neighboring videos only once the carousel is visible without starting playback', () => {
+    const observers: Array<{
+      target: Element
+      intersect: (isIntersecting: boolean) => void
+    }> = []
+    vi.stubGlobal(
+      'IntersectionObserver',
+      class {
+        constructor(private readonly callback: IntersectionObserverCallback) {}
+
+        observe(target: Element) {
+          observers.push({
+            target,
+            intersect: (isIntersecting) =>
+              this.callback(
+                [{ target, isIntersecting } as IntersectionObserverEntry],
+                {} as IntersectionObserver
+              ),
+          })
+        }
+
+        disconnect() {}
+      }
+    )
+    const host = document.createElement('div')
+    document.body.appendChild(host)
+    const root = createRoot(host)
+    act(() => root.render(<FeaturedCustomer />))
+
+    const videos = [...host.querySelectorAll('video')]
+    expect(videos.map((video) => video.preload)).toEqual(['none', 'none'])
+    expect(HTMLMediaElement.prototype.play).not.toHaveBeenCalled()
+
+    const regionObserver = observers.find(({ target }) => target.tagName === 'DIV')!
+    act(() => regionObserver.intersect(true))
+    expect(videos.map((video) => video.preload)).toEqual(['auto', 'auto'])
+    expect(HTMLMediaElement.prototype.play).not.toHaveBeenCalled()
+
+    const playbackObserver = observers.find(({ target }) => target === videos[0])!
+    act(() => playbackObserver.intersect(true))
+    expect(vi.mocked(HTMLMediaElement.prototype.play).mock.contexts).toEqual([videos[0]])
+
+    motionPreference.reduced = true
+    act(() => root.render(<FeaturedCustomer />))
+    expect(videos.map((video) => video.preload)).toEqual(['none', 'none'])
+
+    act(() => root.unmount())
+  })
+
   it('keeps video paused with reduced motion and responds to preference changes', () => {
     motionPreference.reduced = true
     ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true

apps/sim/app/(landing)/components/featured-customer/featured-customer.tsx

@@ -12,6 +12,7 @@ import {
   LANDING_GUTTER,
   LANDING_STAGE_RADIUS,
 } from '@/app/(landing)/components/landing-layout'
+import { useLazyMount } from '@/app/(landing)/hooks/use-lazy-mount'
 
 const WHEEL_GESTURE_GAP_MS = 200
 const WHEEL_THRESHOLD_PX = 50
@@ -58,6 +59,7 @@ const CUSTOMER_STORIES: FeaturedCustomerStory[] = [
 export function FeaturedCustomer() {
   const railRef = useRef<HTMLDivElement>(null)
   const touchStartRef = useRef<{ id: number; x: number; y: number } | null>(null)
+  const { ref: mediaRegionRef, inView: preloadVideos } = useLazyMount('0px')
   const [activeIndex, setActiveIndex] = useState(0)
   const [previewedIndex, setPreviewedIndex] = useState<number | null>(null)
   const activeStory = CUSTOMER_STORIES[activeIndex]
@@ -143,7 +145,7 @@ export function FeaturedCustomer() {
       aria-roledescription='carousel'
       className='w-full overflow-hidden'
     >
-      <div className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
+      <div ref={mediaRegionRef} className={cn(LANDING_CONTENT_WIDTH, LANDING_GUTTER)}>
         <div className='mb-4 flex items-center justify-end gap-2 xl:pr-24'>
           <FeaturedCustomerNavigationButton
             direction='previous'
@@ -210,6 +212,7 @@ export function FeaturedCustomer() {
                     story={story}
                     active={isActive}
                     emphasized={isActive || isPreviewed}
+                    preload={preloadVideos}
                   />
                   {!isActive && (
                     <button

apps/sim/app/(landing)/customers/components/customer-story-media/customer-story-media.test.tsx

@@ -27,7 +27,8 @@ describe('CustomerStoryMedia', () => {
     const html = renderToStaticMarkup(<CustomerStoryMedia story={exp} />)
 
     expect(html).not.toContain('<video')
-    expect(html).toContain(exp.logo.src)
+    expect(html).toContain(encodeURIComponent(exp.heroImage!))
+    expect(html).toContain(exp.heroAlt)
   })
 
   it('keeps the artwork fallback for stories without video', () => {

apps/sim/lib/customers/data.ts

@@ -31,7 +31,8 @@ export const CUSTOMER_STORIES: readonly CustomerStory[] = [
     company: 'eXp Realty',
     industry: 'Real estate',
     focus: ['Real estate operations', 'AI workflows', 'Governance'],
-    heroAlt: 'eXp Realty',
+    heroImage: '/landing/customers/exp-beach-house.jpg',
+    heroAlt: 'A modern beach house overlooking the ocean',
     heroVideo: {
       src: '/landing/customer-stories/exp-house-color-loop.mp4',
       poster: '/landing/customer-stories/exp-house-color-poster.jpg',