Ionosphere.tv
fix: transcript tab shows loading state then lazy-loads correctly
+7
-7
+7
-7
apps/ionosphere/src/app/tracks/[stream]/TrackViewContent.tsx
+7
-7
apps/ionosphere/src/app/tracks/[stream]/TrackViewContent.tsx
···
126
126
function TrackViewInner({ track, stream }: { track: TrackData; stream: string }) {
127
127
const [activeTab, setActiveTab] = useState<"talks" | "transcript">("talks");
128
128
const [transcript, setTranscript] = useState(track.transcript ?? null);
129
+
const [transcriptFetched, setTranscriptFetched] = useState(!!track.transcript);
129
130
const [loadingTranscript, setLoadingTranscript] = useState(false);
130
-
const hasTranscript = !!(transcript?.facets?.length);
131
131
132
132
// Lazy-load transcript when tab is first activated
133
133
useEffect(() => {
134
-
if (activeTab !== "transcript" || transcript || loadingTranscript) return;
134
+
if (activeTab !== "transcript" || transcriptFetched || loadingTranscript) return;
135
135
setLoadingTranscript(true);
136
136
fetch(`${API_BASE}/xrpc/tv.ionosphere.getTrack?stream=${encodeURIComponent(stream)}&include=transcript`)
137
137
.then(res => res.json())
138
138
.then(data => { if (data.transcript) setTranscript(data.transcript); })
139
139
.catch(() => {})
140
-
.finally(() => setLoadingTranscript(false));
141
-
}, [activeTab, transcript, loadingTranscript, stream]);
140
+
.finally(() => { setLoadingTranscript(false); setTranscriptFetched(true); });
141
+
}, [activeTab, transcriptFetched, loadingTranscript, stream]);
142
142
const [speakerPopover, setSpeakerPopover] = useState<{ speakerId: string; position: { x: number; y: number } } | null>(null);
143
143
144
144
// Zoom state
···
390
390
</div>
391
391
)}
392
392
{activeTab === "transcript" && (
393
-
loadingTranscript
393
+
loadingTranscript || (!transcriptFetched && !transcript)
394
394
? <div className="flex items-center justify-center h-32 text-neutral-500">Loading transcript...</div>
395
-
: hasTranscript
396
-
? <WindowedTranscriptView document={transcript!} />
395
+
: transcript?.facets?.length
396
+
? <WindowedTranscriptView document={transcript} />
397
397
: <div className="flex items-center justify-center h-32 text-neutral-500">No transcript available</div>
398
398
)}
399
399
</div>