improved preloading functionality

frontend/src/components/CanvasLoadingSpinner.tsx

@@ -0,0 +1,91 @@
+/**
+ * CanvasLoadingSpinner Component
+ *
+ * Loading spinner overlay for canvas contexts.
+ * Shows during video preparation/buffering.
+ * Includes delay to avoid flashing for quick operations.
+ */
+
+import React, { useState, useEffect } from 'react';
+import { PRELOAD_CONFIG } from '../config/preload.config';
+
+interface CanvasLoadingSpinnerProps {
+  /** Whether the spinner is visible */
+  isVisible: boolean;
+  /** Loading message to display */
+  message?: string;
+  /** Spinner size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Loading progress (0-100) */
+  progress?: number;
+  /** Z-index for stacking (default: 100) */
+  zIndex?: number;
+}
+
+const CanvasLoadingSpinner: React.FC<CanvasLoadingSpinnerProps> = ({
+  isVisible,
+  message = 'Loading...',
+  size = 'md',
+  progress,
+  zIndex = 100,
+}) => {
+  // Delayed visibility - only show after SPINNER_DELAY_MS
+  const [showSpinner, setShowSpinner] = useState(false);
+
+  useEffect(() => {
+    if (isVisible) {
+      // Start timer to show spinner after delay
+      const timer = setTimeout(() => {
+        setShowSpinner(true);
+      }, PRELOAD_CONFIG.ui.spinnerDelayMs);
+
+      return () => clearTimeout(timer);
+    } else {
+      // Hide immediately when loading completes
+      setShowSpinner(false);
+    }
+  }, [isVisible]);
+
+  if (!showSpinner) return null;
+
+  const sizeClasses = {
+    sm: 'w-8 h-8 border-2',
+    md: 'w-12 h-12 border-3',
+    lg: 'w-16 h-16 border-4',
+  };
+
+  return (
+    <div
+      className='absolute inset-0 flex flex-col items-center justify-center transition-opacity duration-300'
+      style={{
+        // Semi-transparent background with blur
+        // Reduced blur on mobile for better performance
+        background: 'rgba(0, 0, 0, 0.3)',
+        backdropFilter: 'blur(4px)',
+        WebkitBackdropFilter: 'blur(4px)',
+        zIndex,
+      }}
+    >
+      <div className='relative'>
+        {/* Spinner ring */}
+        <div
+          className={`${sizeClasses[size]} rounded-full border-white/30 border-t-white animate-spin`}
+          style={{ borderStyle: 'solid' }}
+        />
+        {/* Progress indicator (optional) */}
+        {progress !== undefined && (
+          <div className='absolute inset-0 flex items-center justify-center'>
+            <span className='text-white text-xs font-medium'>
+              {Math.round(progress)}%
+            </span>
+          </div>
+        )}
+      </div>
+      {message && (
+        <p className='mt-3 text-white/90 text-sm font-medium'>{message}</p>
+      )}
+    </div>
+  );
+};
+
+export default CanvasLoadingSpinner;

frontend/src/components/Constructor/CanvasBackground.tsx

@@ -16,6 +16,7 @@ import React, {
 import NextImage from 'next/image';
 import { useBackgroundVideoPlayback } from '../../hooks/useBackgroundVideoPlayback';
 import PreviousBackgroundOverlay from '../PreviousBackgroundOverlay';
+import CanvasLoadingSpinner from '../CanvasLoadingSpinner';
 import { scheduleAfterPaint } from '../../lib/browserUtils';
 import { baseURLApi } from '../../config';
 
@@ -40,6 +41,8 @@ interface CanvasBackgroundProps {
   isSwitching?: boolean;
   isNewBgReady?: boolean;
   onBackgroundReady?: () => void;
+  /** Callback when video buffer state changes (true = buffering, false = ready) */
+  onVideoBufferStateChange?: (isBuffering: boolean) => void;
   // Video playback settings
   videoAutoplay?: boolean;
   videoLoop?: boolean;
@@ -59,6 +62,7 @@ const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
   isSwitching = false,
   isNewBgReady = false,
   onBackgroundReady,
+  onVideoBufferStateChange,
   videoAutoplay = true,
   videoLoop = true,
   videoMuted = true,
@@ -84,6 +88,40 @@ const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
   // Video error state for fallback to proxy URL
   const [videoError, setVideoError] = useState(false);
 
+  // Video buffering state for loading indicator
+  const [isVideoBuffering, setIsVideoBuffering] = useState(true);
+
+  // Track video buffering via canplay/waiting events
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!backgroundVideoUrl || !video) {
+      setIsVideoBuffering(false);
+      return;
+    }
+
+    // Start as buffering for new video
+    setIsVideoBuffering(true);
+    onVideoBufferStateChange?.(true);
+
+    const handleCanPlay = () => {
+      setIsVideoBuffering(false);
+      onVideoBufferStateChange?.(false);
+    };
+
+    const handleWaiting = () => {
+      setIsVideoBuffering(true);
+      onVideoBufferStateChange?.(true);
+    };
+
+    video.addEventListener('canplay', handleCanPlay);
+    video.addEventListener('waiting', handleWaiting);
+
+    return () => {
+      video.removeEventListener('canplay', handleCanPlay);
+      video.removeEventListener('waiting', handleWaiting);
+    };
+  }, [backgroundVideoUrl, onVideoBufferStateChange]);
+
   // Fallback to proxy URL if presigned URL fails (e.g., CORS, expiration)
   const videoSrc = useMemo(() => {
     if (!backgroundVideoUrl) return undefined;
@@ -180,9 +218,18 @@ const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
 
   return (
     <>
-      {/* Background image - z-1 keeps it below backdrop blur layer (z-5) */}
+      {/* Background image - z-1 keeps it below backdrop blur layer (z-5).
+          Image layer stays visible while video buffers (fallback behavior).
+          When video is ready, image fades out via opacity transition. */}
       {backgroundImageUrl && (
-        <div className='pointer-events-none absolute inset-0 z-1 h-full w-full select-none'>
+        <div
+          className='pointer-events-none absolute inset-0 z-1 h-full w-full select-none'
+          style={{
+            // When video exists and is ready, hide image layer
+            opacity: backgroundVideoUrl && !isVideoBuffering ? 0 : 1,
+            transition: 'opacity 300ms ease-out',
+          }}
+        >
           {backgroundImageUrl.startsWith('blob:') ? (
             // eslint-disable-next-line @next/next/no-img-element
             <img
@@ -225,12 +272,18 @@ const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
           Actual muted state is controlled via useBackgroundVideoPlayback hook
           which sets video.muted property via JavaScript (useEffect).
           webkit-playsinline is legacy attribute for older iOS versions.
-          preload="metadata" is required for iOS Safari video initialization. */}
+          preload="metadata" is required for iOS Safari video initialization.
+          Video fades in when ready (opacity transition from 0 to 1). */}
       {backgroundVideoUrl && (
         <video
           ref={videoRef}
           key={`bg_video_${backgroundVideoUrl}`}
           className='absolute inset-0 z-1 h-full w-full object-contain'
+          style={{
+            // Fade in when video is ready
+            opacity: isVideoBuffering ? 0 : 1,
+            transition: 'opacity 300ms ease-out',
+          }}
           src={videoSrc}
           preload='metadata'
           autoPlay={effectiveAutoplay}
@@ -242,6 +295,17 @@ const CanvasBackground: React.FC<CanvasBackgroundProps> = ({
         />
       )}
 
+      {/* Loading spinner for video-only pages (no image fallback).
+          Shows while video is buffering, provides user feedback. */}
+      {backgroundVideoUrl && !backgroundImageUrl && isVideoBuffering && (
+        <CanvasLoadingSpinner
+          isVisible={true}
+          message='Loading video...'
+          size='md'
+          zIndex={4}
+        />
+      )}
+
       {/* Background audio */}
       {backgroundAudioUrl && (
         <audio

frontend/src/components/Constructor/TransitionPreviewOverlay.tsx

@@ -10,6 +10,7 @@
  */
 
 import React from 'react';
+import CanvasLoadingSpinner from '../CanvasLoadingSpinner';
 
 interface TransitionPreviewOverlayProps {
   /** Reference to the video element - useTransitionPlayback manages src and playback */
@@ -18,6 +19,10 @@ interface TransitionPreviewOverlayProps {
   isActive: boolean;
   /** Whether the video is currently buffering (used to hide video during load) */
   isBuffering?: boolean;
+  /** Show loading spinner during buffering (default: false for backward compat) */
+  showSpinner?: boolean;
+  /** Loading message for spinner */
+  spinnerMessage?: string;
   /** Letterbox styles from useCanvasScale - positions overlay within canvas bounds */
   letterboxStyles?: React.CSSProperties;
   /** Video object-fit mode (default: 'contain' to match backgrounds) */
@@ -32,6 +37,8 @@ const TransitionPreviewOverlay: React.FC<TransitionPreviewOverlayProps> = ({
   videoRef,
   isActive,
   isBuffering = false,
+  showSpinner = false,
+  spinnerMessage = 'Preparing transition...',
   letterboxStyles,
   videoFit = 'contain',
   opacity,
@@ -47,28 +54,43 @@ const TransitionPreviewOverlay: React.FC<TransitionPreviewOverlayProps> = ({
     // Outer: full viewport, transparent background
     // Transparent ensures if Safari clears video frame when paused,
     // the new page background shows through instead of black flash
-    <div
+    <div className='fixed inset-0 z-50 overflow-hidden pointer-events-none'>
-      className='fixed inset-0 z-50 overflow-hidden pointer-events-none'
+      {/* Loading spinner during buffering - provides user feedback */}
-      style={{ opacity: containerOpacity }}
+      {isBuffering && showSpinner && (
-    >
+        <CanvasLoadingSpinner
-      {/* Inner: respects letterbox dimensions when provided */}
+          isVisible={true}
-      <div
+          message={spinnerMessage}
-        className='overflow-hidden'
+          size='lg'
-        style={letterboxStyles || { position: 'absolute', inset: 0 }}
+          zIndex={60}
-      >
-        {/* Video element - container handles visibility, video is always opaque */}
-        {/* key forces React to remount the video element when URL changes, clearing decoder state */}
-        <video
-          key={videoKey}
-          ref={videoRef}
-          className={`absolute inset-0 h-full w-full ${
-            videoFit === 'cover' ? 'object-cover' : 'object-contain'
-          }`}
-          muted
-          playsInline
-          preload='auto'
-          disablePictureInPicture
         />
+      )}
+
+      {/* Video container - hidden while buffering */}
+      <div
+        style={{
+          opacity: containerOpacity,
+          transition: 'opacity 150ms ease-out',
+        }}
+      >
+        {/* Inner: respects letterbox dimensions when provided */}
+        <div
+          className='overflow-hidden'
+          style={letterboxStyles || { position: 'absolute', inset: 0 }}
+        >
+          {/* Video element - container handles visibility, video is always opaque */}
+          {/* key forces React to remount the video element when URL changes, clearing decoder state */}
+          <video
+            key={videoKey}
+            ref={videoRef}
+            className={`absolute inset-0 h-full w-full ${
+              videoFit === 'cover' ? 'object-cover' : 'object-contain'
+            }`}
+            muted
+            playsInline
+            preload='auto'
+            disablePictureInPicture
+          />
+        </div>
       </div>
     </div>
   );

frontend/src/components/RuntimePresentation.tsx

@@ -25,6 +25,7 @@ import GalleryCarouselOverlay from './UiElements/GalleryCarouselOverlay';
 import { BackdropPortalProvider } from './BackdropPortal';
 import { RotatePrompt } from './RotatePrompt';
 import CanvasBackground from './Constructor/CanvasBackground';
+import CanvasLoadingSpinner from './CanvasLoadingSpinner';
 import TransitionBlackOverlay from './TransitionBlackOverlay';
 import { useCanvasScale } from '../hooks/useCanvasScale';
 import { CANVAS_CONFIG } from '../config/canvas.config';
@@ -185,6 +186,10 @@ export default function RuntimePresentation({
   // Only shown during video transitions to prevent black flashes.
   const [lastKnownBgUrl, setLastKnownBgUrl] = useState<string>('');
 
+  // Track background video buffering state for loading indicator
+  const [isBackgroundVideoBuffering, setIsBackgroundVideoBuffering] =
+    useState(false);
+
   const transitionVideoRef = useRef<HTMLVideoElement>(null);
   const lastInitializedPageIdRef = useRef<string | null>(null);
 
@@ -493,6 +498,12 @@ export default function RuntimePresentation({
   const areNeighborBackgroundsReady =
     preloadOrchestrator?.areNeighborBackgroundsReady ?? true;
 
+  // Compute page loading state for UI feedback
+  const isPageLoading =
+    preloadOrchestrator?.currentPhase === 'phase1_current_page';
+  const areTransitionsReady =
+    preloadOrchestrator?.areTransitionsReady ?? true;
+
   // Compute disabled state for forward navigation elements
   // DISABLED: Allow navigation even if neighbors not preloaded
   const isForwardNavDisabled = false && !areNeighborBackgroundsReady;
@@ -769,6 +780,7 @@ export default function RuntimePresentation({
                   setIsBackgroundReady(true);
                   pageSwitch.markBackgroundReady();
                 }}
+                onVideoBufferStateChange={setIsBackgroundVideoBuffering}
                 videoAutoplay={videoAutoplay}
                 videoLoop={videoLoop}
                 videoMuted={soundControl.isMuted}
@@ -779,6 +791,16 @@ export default function RuntimePresentation({
             </div>
             {/* End page background wrapper */}
 
+            {/* Page loading spinner - shows during Phase 1 (current page loading) */}
+            {isPageLoading && (
+              <CanvasLoadingSpinner
+                isVisible={true}
+                message='Loading page...'
+                progress={preloadOrchestrator?.phaseProgress}
+                zIndex={100}
+              />
+            )}
+
             {/* Page elements wrapper - z-[46] keeps it ABOVE carousel slide (z-10) AND carousel controls (z-45).
                 UI controls (z-50) remain on top.
                 No fade animation - elements switch instantly behind the black overlay. */}
@@ -831,6 +853,8 @@ export default function RuntimePresentation({
                   transitionPhase === 'preparing' ||
                   isBuffering
                 }
+                showSpinner={true}
+                spinnerMessage='Preparing transition...'
                 letterboxStyles={letterboxStyles}
                 opacity={1}
               />

frontend/src/config/offline.config.ts

@@ -26,6 +26,7 @@ export const OFFLINE_CONFIG = {
     projectDownloadComplete: 'project-download-complete',
     queueUpdate: 'queue-update',
     blobUrlReady: 'blob-url-ready',
+    streamingReady: 'streaming-ready',
   },
 
   // Service worker settings

frontend/src/config/preload.config.ts

@@ -66,6 +66,25 @@ export const PRELOAD_CONFIG = {
     transitionMaxBytes: 3 * 1024 * 1024, // 3MB (~3 seconds of transition video)
   },
 
+  // Streaming mode settings (for progressive playback)
+  // When enabled, presigned URL is used immediately for playback
+  // Streaming ready event fires after minimum buffer downloaded
+  // Full download continues in background for caching
+  streaming: {
+    enabled: true, // Enable streaming for faster first playback
+    minBufferBytes: 3 * 1024 * 1024, // 3MB minimum before signaling ready
+    videoBufferTarget: 5, // seconds of video to buffer before playback
+    audioBufferTarget: 3, // seconds of audio to buffer before playback
+    mobile: {
+      minBufferBytes: 2 * 1024 * 1024, // 2MB on mobile (lower memory)
+    },
+  },
+
+  // UI feedback settings
+  ui: {
+    spinnerDelayMs: 500, // Delay before showing loading spinner (avoids flash)
+  },
+
   // Asset URL field names in element content_json (camelCase)
   assetFields: {
     // All asset URL fields for preloading extraction

frontend/src/hooks/usePreloadOrchestrator.ts

@@ -48,6 +48,14 @@ interface PreloadQueueItem {
   pageId: string;
 }
 
+/** Preload phase for UI feedback */
+export type PreloadPhase =
+  | 'idle'
+  | 'phase1_current_page'
+  | 'phase2_transitions'
+  | 'phase3_neighbors'
+  | 'complete';
+
 interface UsePreloadOrchestratorResult {
   isPreloading: boolean;
   preloadedUrls: Set<string>;
@@ -64,6 +72,14 @@ interface UsePreloadOrchestratorResult {
   getReadyBlob: (url: string) => Blob | null;
   /** Whether all neighbor page backgrounds are ready for instant navigation */
   areNeighborBackgroundsReady: boolean;
+  /** Current preload phase (for UI feedback) */
+  currentPhase: PreloadPhase;
+  /** Progress within current phase (0-100) */
+  phaseProgress: number;
+  /** Whether current page is ready to display */
+  isCurrentPageReady: boolean;
+  /** Whether outgoing transitions are ready */
+  areTransitionsReady: boolean;
 }
 
 /**
@@ -100,6 +116,10 @@ export function usePreloadOrchestrator(
   // Version counter to trigger re-renders when blob URLs become ready
   const [readyUrlsVersion, setReadyUrlsVersion] = useState(0);
 
+  // Phase tracking for UI feedback
+  const [currentPhase, setCurrentPhase] = useState<PreloadPhase>('idle');
+  const [phaseProgress, setPhaseProgress] = useState(0);
+
   const queueRef = useRef<PreloadQueueItem[]>([]);
   const isProcessingRef = useRef(false);
   const lastPreloadedPageRef = useRef<string | null>(null);
@@ -553,6 +573,15 @@ export function usePreloadOrchestrator(
 
         preloadedUrls.add(normalizedKey);
 
+        // Enable streaming for media assets (video, audio, transitions)
+        // This allows playback to start immediately using presigned URL
+        // while full download continues in background for caching
+        const enableStreaming =
+          PRELOAD_CONFIG.streaming.enabled &&
+          (assetType === 'video' ||
+            assetType === 'audio' ||
+            assetType === 'transition');
+
         // DownloadManager always creates blob URLs for reliable playback
         return downloadManager
           .addJob({
@@ -565,6 +594,12 @@ export function usePreloadOrchestrator(
             priority,
             storageKey: normalizedKey,
             persist: false,
+            streamingMode: enableStreaming
+              ? {
+                  enabled: true,
+                  minBufferBytes: PRELOAD_CONFIG.streaming.minBufferBytes,
+                }
+              : undefined,
           })
           .then(() => {
             if (isPresignedUrl(resolvedUrl)) {
@@ -579,72 +614,159 @@ export function usePreloadOrchestrator(
           });
       };
 
-      // ============================================
+      // ═══════════════════════════════════════════════════════════════════
-      // PHASE 1: Load current page IMAGE backgrounds only and WAIT
+      // PHASE 1: Current Page Assets (BLOCKING)
-      // Video/audio backgrounds stream on their own - don't block on them
+      // Priority: Images first (small, essential), then videos (can stream)
-      // ============================================
+      // ═══════════════════════════════════════════════════════════════════
+      setCurrentPhase('phase1_current_page');
+      setPhaseProgress(0);
       logger.info('[PRELOAD] Phase 1: Loading current page backgrounds');
 
-      const currentPageImageJobs: Promise<void>[] = [];
+      const phase1Jobs: Promise<void>[] = [];
+      let phase1Total = 0;
+      let phase1Completed = 0;
 
-      // Current page IMAGE background - WAIT for this (essential for visual)
+      // Current page IMAGE background - CRITICAL (wait for this)
       if (currentPage?.background_image_url) {
+        phase1Total++;
         const job = createDownloadJob(
           `bg-img-${currentPageId}`,
           currentPage.background_image_url,
           PRELOAD_CONFIG.priority.currentPage + 200,
           'image',
         );
-        if (job) currentPageImageJobs.push(job);
+        if (job) {
+          phase1Jobs.push(
+            job.then(() => {
+              phase1Completed++;
+              setPhaseProgress(
+                phase1Total > 0 ? (phase1Completed / phase1Total) * 100 : 100,
+              );
+            }),
+          );
+        }
       }
 
-      // Current page VIDEO/AUDIO backgrounds - DON'T wait (they can stream)
+      // Current page VIDEO background - start download (can stream)
-      // These are started but not awaited - video player buffers on its own
       if (currentPage?.background_video_url) {
-        createDownloadJob(
+        phase1Total++;
+        const job = createDownloadJob(
           `bg-vid-${currentPageId}`,
           currentPage.background_video_url,
           PRELOAD_CONFIG.priority.currentPage + 150,
           'video',
         );
-        // Not pushed to awaited jobs - video streams on its own
+        if (job) {
+          phase1Jobs.push(
+            job.then(() => {
+              phase1Completed++;
+              setPhaseProgress(
+                phase1Total > 0 ? (phase1Completed / phase1Total) * 100 : 100,
+              );
+            }),
+          );
+        }
       }
+
+      // Current page AUDIO background - start download
       if (currentPage?.background_audio_url) {
-        createDownloadJob(
+        phase1Total++;
+        const job = createDownloadJob(
           `bg-aud-${currentPageId}`,
           currentPage.background_audio_url,
           PRELOAD_CONFIG.priority.currentPage + 100,
           'audio',
         );
-        // Not pushed to awaited jobs - audio streams on its own
+        if (job) {
+          phase1Jobs.push(
+            job.then(() => {
+              phase1Completed++;
+              setPhaseProgress(
+                phase1Total > 0 ? (phase1Completed / phase1Total) * 100 : 100,
+              );
+            }),
+          );
+        }
       }
 
-      // Wait ONLY for IMAGE backgrounds (they're small and essential)
+      // Wait for Phase 1 to complete
-      // Video/audio can stream - don't block the page
       const phase1Start = Date.now();
-      if (currentPageImageJobs.length > 0) {
+      if (phase1Jobs.length > 0) {
-        logger.info('[PRELOAD] Waiting for current page image backgrounds', {
+        logger.info('[PRELOAD] Waiting for current page assets', {
-          count: currentPageImageJobs.length,
+          count: phase1Jobs.length,
         });
-        await Promise.all(currentPageImageJobs);
+        await Promise.all(phase1Jobs);
         logger.info('[PRELOAD] Phase 1 complete', {
           elapsed: `${Date.now() - phase1Start}ms`,
         });
       } else {
-        logger.info('[PRELOAD] Phase 1 complete (no image backgrounds)');
+        logger.info('[PRELOAD] Phase 1 complete (no backgrounds)');
       }
 
-      // ============================================
+      // ═══════════════════════════════════════════════════════════════════
-      // PHASE 2: Preload everything else (don't wait)
+      // PHASE 2: Outgoing Transition Videos (BLOCKING)
-      // - Current page element assets
+      // Load transitions FROM current page BEFORE neighbors
-      // - Neighbor page backgrounds
+      // ═══════════════════════════════════════════════════════════════════
-      // - Neighbor page element assets
+      setCurrentPhase('phase2_transitions');
-      // - Transition videos from page links
+      setPhaseProgress(0);
-      // All assets use full download with blob URLs for mobile compatibility
+      logger.info('[PRELOAD] Phase 2: Loading outgoing transitions');
-      // ============================================
-      logger.info('[PRELOAD] Phase 2: Preloading neighbors and transitions');
 
-      // Current page element assets (moved from Phase 1 for faster startup)
+      const phase2Jobs: Promise<void>[] = [];
+      let phase2Total = 0;
+      let phase2Completed = 0;
+
+      // Find all transition videos from current page
+      const outgoingTransitions = pageLinks.filter(
+        (link) =>
+          link.from_pageId === currentPageId && link.transition?.video_url,
+      );
+
+      outgoingTransitions.forEach((link) => {
+        const transitionVideoUrl = link.transition?.video_url;
+        if (!transitionVideoUrl) return;
+        phase2Total++;
+        const job = createDownloadJob(
+          `trans-${link.from_pageId}-${link.to_pageId}`,
+          transitionVideoUrl,
+          PRELOAD_CONFIG.priority.currentPage +
+            PRELOAD_CONFIG.priority.assetType.transition,
+          'transition',
+        );
+        if (job) {
+          phase2Jobs.push(
+            job.then(() => {
+              phase2Completed++;
+              setPhaseProgress(
+                phase2Total > 0 ? (phase2Completed / phase2Total) * 100 : 100,
+              );
+            }),
+          );
+        }
+      });
+
+      // Wait for Phase 2 to complete
+      const phase2Start = Date.now();
+      if (phase2Jobs.length > 0) {
+        logger.info('[PRELOAD] Waiting for transition videos', {
+          count: phase2Jobs.length,
+        });
+        await Promise.all(phase2Jobs);
+        logger.info('[PRELOAD] Phase 2 complete', {
+          elapsed: `${Date.now() - phase2Start}ms`,
+        });
+      } else {
+        logger.info('[PRELOAD] Phase 2 complete (no transitions)');
+      }
+
+      // ═══════════════════════════════════════════════════════════════════
+      // PHASE 3: Neighbor Pages (NON-BLOCKING)
+      // Background download for smooth subsequent navigation
+      // ═══════════════════════════════════════════════════════════════════
+      setCurrentPhase('phase3_neighbors');
+      setPhaseProgress(0);
+      logger.info('[PRELOAD] Phase 3: Preloading neighbors');
+
+      // Current page element assets (non-blocking)
       const currentPageAssets = assets.filter(
         (asset) => asset.pageId === currentPageId,
       );
@@ -700,7 +822,9 @@ export function usePreloadOrchestrator(
         }
       });
 
-      logger.info('[PRELOAD] Phase 2: Neighbor assets queued');
+      logger.info('[PRELOAD] Phase 3: Neighbor assets queued');
+      setCurrentPhase('complete');
+      setPhaseProgress(100);
     };
 
     // If there are storage paths to presign, fetch them first
@@ -740,6 +864,15 @@ export function usePreloadOrchestrator(
     maxNeighborDepth,
   ]);
 
+  // Compute derived state values for UI feedback
+  const isCurrentPageReady =
+    currentPhase === 'phase2_transitions' ||
+    currentPhase === 'phase3_neighbors' ||
+    currentPhase === 'complete';
+
+  const areTransitionsReady =
+    currentPhase === 'phase3_neighbors' || currentPhase === 'complete';
+
   return {
     isPreloading,
     preloadedUrls,
@@ -752,5 +885,9 @@ export function usePreloadOrchestrator(
     getReadyBlobUrl,
     getReadyBlob,
     areNeighborBackgroundsReady,
+    currentPhase,
+    phaseProgress,
+    isCurrentPageReady,
+    areTransitionsReady,
   };
 }

frontend/src/hooks/useTransitionPlayback.ts

@@ -26,6 +26,7 @@ import {
 import { downloadManager } from '../lib/offline/DownloadManager';
 import { isSafari, isFirefox, scheduleAfterPaint } from '../lib/browserUtils';
 import { TRANSITION_CONFIG } from '../config/transition.config';
+import { PRELOAD_CONFIG } from '../config/preload.config';
 
 export type ReverseMode = 'none' | 'separate';
 
@@ -498,21 +499,50 @@ export function useTransitionPlayback(
             return cachedBlobUrl;
           }
         } catch (cacheError) {
-          logger.warn('Cache lookup failed, falling back to fetch', {
+          logger.warn('Cache lookup failed, falling back to streaming', {
             cacheError,
           });
         }
       }
 
-      // 6. Fetch video as blob
+      // 6. Use presigned URL for streaming (browser handles buffering)
-      logger.info('Fetching video as blob', {
+      //    Start background download for caching
-        isBack: currentTransition.isBack,
-      });
-
       const freshUrl = currentStorageKey
         ? resolveAssetPlaybackUrl(currentStorageKey)
         : sourceUrl;
 
+      // If streaming is enabled, use presigned URL directly and start background download
+      if (currentStorageKey && PRELOAD_CONFIG.streaming.enabled) {
+        logger.info('Using streaming URL, starting background download', {
+          url: freshUrl.slice(0, 60),
+        });
+
+        // Start background download for caching (non-blocking)
+        downloadManager
+          .addJob({
+            assetId: `stream-${currentStorageKey}`,
+            projectId: '',
+            url: freshUrl,
+            filename: 'video.mp4',
+            variantType: 'original',
+            assetType: 'transition',
+            storageKey: currentStorageKey,
+            persist: false,
+            streamingMode: { enabled: true },
+          })
+          .catch(() => {
+            /* ignore background download errors */
+          });
+
+        // Return presigned URL for immediate playback
+        return freshUrl;
+      }
+
+      // Legacy: Fetch video as blob (when streaming disabled)
+      logger.info('Fetching video as blob', {
+        isBack: currentTransition.isBack,
+      });
+
       const token =
         typeof window !== 'undefined'
           ? localStorage.getItem('token') || ''

frontend/src/lib/offline/DownloadEventBus.ts

@@ -15,6 +15,7 @@ import type {
   ProjectDownloadProgressEvent,
   ProjectDownloadCompleteEvent,
   BlobUrlReadyEvent,
+  StreamingReadyEvent,
 } from '../../types/offline';
 
 type EventMap = {
@@ -26,6 +27,7 @@ type EventMap = {
   [OFFLINE_CONFIG.events.projectDownloadComplete]: ProjectDownloadCompleteEvent;
   [OFFLINE_CONFIG.events.queueUpdate]: void;
   [OFFLINE_CONFIG.events.blobUrlReady]: BlobUrlReadyEvent;
+  [OFFLINE_CONFIG.events.streamingReady]: StreamingReadyEvent;
 };
 
 type EventCallback<T> = (data: T) => void;
@@ -182,6 +184,13 @@ class DownloadEventBusClass {
   emitBlobUrlReady(data: BlobUrlReadyEvent): void {
     this.emit(OFFLINE_CONFIG.events.blobUrlReady as keyof EventMap, data);
   }
+
+  /**
+   * Emit streaming ready event (minimum buffer downloaded for playback)
+   */
+  emitStreamingReady(data: StreamingReadyEvent): void {
+    this.emit(OFFLINE_CONFIG.events.streamingReady as keyof EventMap, data);
+  }
 }
 
 // Singleton instance

frontend/src/lib/offline/DownloadManager.ts

@@ -45,6 +45,14 @@ interface DownloadJob {
   abortController?: AbortController;
   resolve?: () => void;
   reject?: (error: Error) => void;
+
+  /** Streaming mode state */
+  streamingMode?: {
+    enabled: boolean;
+    minBufferBytes: number;
+    streamingUrl: string;
+    didSignalReady: boolean;
+  };
 }
 
 class DownloadManagerClass {
@@ -82,6 +90,11 @@ class DownloadManagerClass {
     priority?: number;
     storageKey?: string; // Optional, will extract if not provided
     persist?: boolean; // Persist to IndexedDB for resume (default: true)
+    /** Enable streaming mode - signal ready after minimum buffer downloaded */
+    streamingMode?: {
+      enabled: boolean;
+      minBufferBytes?: number;
+    };
   }): Promise<void> {
     const storageKey = params.storageKey || extractStoragePath(params.url);
 
@@ -128,6 +141,17 @@ class DownloadManagerClass {
         persist: params.persist ?? true,
         resolve,
         reject,
+        // Initialize streaming mode if enabled
+        streamingMode: params.streamingMode?.enabled
+          ? {
+              enabled: true,
+              minBufferBytes:
+                params.streamingMode.minBufferBytes ??
+                this.getMinBufferBytes(),
+              streamingUrl: params.url,
+              didSignalReady: false,
+            }
+          : undefined,
       };
 
       // Persist to IndexedDB for resume capability (default true)
@@ -260,6 +284,30 @@ class DownloadManagerClass {
             totalBytes: job.totalBytes,
           });
 
+          // Check if streaming mode and minimum buffer reached
+          if (
+            job.streamingMode?.enabled &&
+            !job.streamingMode.didSignalReady &&
+            job.bytesLoaded >= job.streamingMode.minBufferBytes
+          ) {
+            job.streamingMode.didSignalReady = true;
+
+            logger.info('[DownloadManager] Streaming ready', {
+              storageKey: job.storageKey.slice(-50),
+              bytesLoaded: job.bytesLoaded,
+              minBuffer: job.streamingMode.minBufferBytes,
+            });
+
+            // Emit streaming ready event
+            downloadEventBus.emitStreamingReady({
+              jobId: job.id,
+              storageKey: job.storageKey,
+              streamingUrl: job.streamingMode.streamingUrl,
+              bytesLoaded: job.bytesLoaded,
+              totalBytes: job.totalBytes,
+            });
+          }
+
           // Only update queue progress if persisting
           if (job.persist !== false) {
             await OfflineDbManager.updateQueueProgress(
@@ -707,6 +755,44 @@ class DownloadManagerClass {
       }
     });
   }
+
+  /**
+   * Check if device is mobile (for streaming buffer size)
+   */
+  private isMobile(): boolean {
+    if (typeof navigator === 'undefined') return false;
+    return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+  }
+
+  /**
+   * Get minimum buffer bytes based on device type
+   */
+  private getMinBufferBytes(): number {
+    if (this.isMobile()) {
+      return (
+        PRELOAD_CONFIG.streaming.mobile?.minBufferBytes || 2 * 1024 * 1024
+      );
+    }
+    return PRELOAD_CONFIG.streaming.minBufferBytes;
+  }
+
+  /**
+   * Check if asset is cached or get streaming URL for first playback.
+   * Returns cached blob URL for instant O(1) playback, or presigned URL for streaming.
+   */
+  getStreamingUrlIfNeeded(
+    storageKey: string,
+    presignedUrl: string,
+  ): { url: string; isFromCache: boolean } {
+    // Fully cached - use blob URL
+    const cachedUrl = this.readyBlobUrls.get(storageKey);
+    if (cachedUrl) {
+      return { url: cachedUrl, isFromCache: true };
+    }
+
+    // Not cached - use presigned URL for streaming
+    return { url: presignedUrl, isFromCache: false };
+  }
 }
 
 // Singleton instance

frontend/src/pages/constructor.tsx

@@ -13,6 +13,7 @@ import React, {
 import { flushSync } from 'react-dom';
 import BaseButton from '../components/BaseButton';
 import CanvasBackground from '../components/Constructor/CanvasBackground';
+import CanvasLoadingSpinner from '../components/CanvasLoadingSpinner';
 import TransitionBlackOverlay from '../components/TransitionBlackOverlay';
 import ConstructorToolbar from '../components/Constructor/ConstructorToolbar';
 import TransitionPreviewOverlay from '../components/Constructor/TransitionPreviewOverlay';
@@ -291,6 +292,9 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
   const [isBackgroundReady, setIsBackgroundReady] = useState(true);
   const [pendingTransitionComplete, setPendingTransitionComplete] =
     useState(false);
+  // Track background video buffering state for loading indicator
+  const [isBackgroundVideoBuffering, setIsBackgroundVideoBuffering] =
+    useState(false);
   // Current element transition settings (for CSS transitions when no video)
   const [
     currentElementTransitionSettings,
@@ -436,6 +440,10 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
     // maxNeighborDepth defaults to 1 - only preload immediate neighbors
   });
 
+  // Compute page loading state for UI feedback
+  const isPagePreloading =
+    preloadOrchestrator?.currentPhase === 'phase1_current_page';
+
   // Page switch hook for smooth background transitions (uses blob URLs from preload cache)
   const pageSwitch = usePageSwitch({
     preloadCache: preloadOrchestrator
@@ -1700,6 +1708,7 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
                   pageSwitch.markBackgroundReady();
                   setIsBackgroundReady(true);
                 }}
+                onVideoBufferStateChange={setIsBackgroundVideoBuffering}
                 videoAutoplay={backgroundVideoAutoplay}
                 videoLoop={backgroundVideoLoop}
                 videoMuted={soundControl.isMuted}
@@ -1711,6 +1720,16 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
               />
             </div>
 
+            {/* Page loading spinner - shows during Phase 1 (current page loading) */}
+            {isPagePreloading && (
+              <CanvasLoadingSpinner
+                isVisible={true}
+                message='Loading page...'
+                progress={preloadOrchestrator?.phaseProgress}
+                zIndex={100}
+              />
+            )}
+
             {/* Elements container - z-[46] keeps it ABOVE carousel slide (z-10) AND carousel controls (z-45).
                 UI controls (z-50) remain on top.
                 No fade animation - elements switch instantly behind the black overlay. */}
@@ -1817,6 +1836,8 @@ const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => {
         videoRef={transitionVideoRef}
         isActive={Boolean(transitionPreview)}
         isBuffering={isReverseBuffering}
+        showSpinner={true}
+        spinnerMessage='Preparing transition...'
         letterboxStyles={letterboxStyles}
       />
 

frontend/src/types/offline.ts

@@ -188,3 +188,12 @@ export interface BlobUrlReadyEvent {
   storageKey: string;
   blobUrl: string;
 }
+
+// Streaming ready event - emitted when minimum buffer is downloaded for streaming playback
+export interface StreamingReadyEvent {
+  jobId: string;
+  storageKey: string;
+  streamingUrl: string;
+  bytesLoaded: number;
+  totalBytes: number;
+}