Skip to content

Commit 7d635ce

Browse files
committed
fix: show LoadingOverlay during CDN metadata fetch, not just template load
Root cause: the LoadingOverlay lives inside WebIframe, which only mounts after defaultWebPreviewFile is set (i.e. after metadata finishes fetching). During the CDN metadata fetch window there is no WebIframe in the tree at all, so no loading indicator is visible. Additionally, once the CDN bundle is browser-cached the template renders in ~2 rAFs which is imperceptible. Fix: import LoadingOverlay into ExampleContent and render it directly on the preview-wrap-content panel with visible={!initState}. This covers the entire metadata-fetch phase. The WebIframe's own overlay continues to handle the subsequent template-load phase, giving a seamless indicator from the moment the CDN version is requested until the frame is painted.
1 parent 2a94a1b commit 7d635ce

File tree

1 file changed

+5
-1
lines changed

1 file changed

+5
-1
lines changed

src/example-preview/components/index.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { FileTree } from './file-tree';
2626
import { CodeView } from './code-view';
2727
import { SwitchSchema } from './switch-schema';
2828
import { PreviewImg } from './preview-img';
29+
import { LoadingOverlay } from './loading-overlay';
2930
import { SplitPane, type SplitPaneHandle } from './split-pane';
3031

3132
import {
@@ -278,7 +279,7 @@ export const ExampleContent: FC<ExampleContentProps> = ({
278279
}
279280
second={
280281
<div className={s['preview-wrap']}>
281-
<div className={s['preview-wrap-content']}>
282+
<div className={s['preview-wrap-content']} style={{ position: 'relative' }}>
282283
<div className={s['preview-header']}>
283284
<div style={{ width: 24, flexShrink: 0 }} />
284285
<RadioGroup
@@ -342,6 +343,9 @@ export const ExampleContent: FC<ExampleContentProps> = ({
342343
/>
343344
</div>
344345

346+
{/* Show loading overlay while metadata is fetching (before initState=true) */}
347+
<LoadingOverlay visible={!initState} />
348+
345349
{previewType === PreviewType.QRCode && currentEntry && (
346350
<div className={s.qrcode}>
347351
<Typography.Text

0 commit comments

Comments
 (0)