From 90f598050c27e0a8812e94f28452592b0a3a7d98 Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Tue, 22 Sep 2026 14:34:58 -0400
Subject: [PATCH] fix: show empty timeline lanes when no video is loaded

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/lib/components/Timeline.svelte |  3 ++-
 src/lib/timeline/renderer.ts       | 20 ++++++++++++--------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/Timeline.svelte b/src/lib/components/Timeline.svelte
index 62bc281..3c321e5 100644
--- a/src/lib/components/Timeline.svelte
+++ b/src/lib/components/Timeline.svelte
@@ -83,7 +83,8 @@
       clipStore.selectedClipId,
       clipStore.pendingInPoint,
       waveformData,
-      session.thumbnailSpritesheets
+      session.thumbnailSpritesheets,
+      session.status === 'ready'
     );
     ctx.restore();
   }
diff --git a/src/lib/timeline/renderer.ts b/src/lib/timeline/renderer.ts
index 22bdd4b..932c782 100644
--- a/src/lib/timeline/renderer.ts
+++ b/src/lib/timeline/renderer.ts
@@ -37,7 +37,8 @@ export function drawTimeline(
   selectedClipId: string | null = null,
   pendingInPoint: number | null = null,
   waveform: WaveformData = { tiers: null },
-  thumbnailSpritesheets: ThumbnailSpritesheet[] = []
+  thumbnailSpritesheets: ThumbnailSpritesheet[] = [],
+  hasVideo: boolean = false
 ): void {
   const { width, height } = state;
   ctx.clearRect(0, 0, width, height);
@@ -50,13 +51,13 @@ export function drawTimeline(
   if (thumbnailSpritesheets.length > 0) {
     drawThumbnails(ctx, state, thumbnailSpritesheets, duration, 0, THUMB_LANE_HEIGHT);
   } else {
-    drawPlaceholderLane(ctx, state, 0, THUMB_LANE_HEIGHT, 'Thumbnails');
+    drawPlaceholderLane(ctx, state, 0, THUMB_LANE_HEIGHT, 'Thumbnails', hasVideo);
   }
 
   if (waveform.tiers) {
     drawWaveform(ctx, state, waveform, duration, THUMB_LANE_HEIGHT, WAVEFORM_LANE_HEIGHT);
   } else {
-    drawPlaceholderLane(ctx, state, THUMB_LANE_HEIGHT, WAVEFORM_LANE_HEIGHT, 'Waveform');
+    drawPlaceholderLane(ctx, state, THUMB_LANE_HEIGHT, WAVEFORM_LANE_HEIGHT, 'Waveform', hasVideo);
   }
 
   drawClips(ctx, state, clips, selectedClipId, pendingInPoint);
@@ -114,16 +115,19 @@ function drawPlaceholderLane(
   state: TimelineState,
   y: number,
   height: number,
-  label: string
+  label: string,
+  showLabel: boolean
 ): void {
   ctx.fillStyle = '#2a2a3e';
   ctx.fillRect(0, y, state.width, height);
   ctx.strokeStyle = '#353550';
   ctx.strokeRect(0, y, state.width, height);
-  ctx.fillStyle = '#6c7086';
-  ctx.font = '11px -apple-system, sans-serif';
-  ctx.textAlign = 'center';
-  ctx.fillText(`Generating ${label}…`, state.width / 2, y + height / 2 + 4);
+  if (showLabel) {
+    ctx.fillStyle = '#6c7086';
+    ctx.font = '11px -apple-system, sans-serif';
+    ctx.textAlign = 'center';
+    ctx.fillText(`Generating ${label}…`, state.width / 2, y + height / 2 + 4);
+  }
 }
 
 export function drawPlayhead(