Skip to content

Commit eb3ed5e

Browse files
committed
Lazy-load BlogEditor with Suspense
Replace the direct BlogEditor import with React.lazy and wrap the visual editor in a Suspense boundary. Adds a dynamic import that maps module.BlogEditor to the default export and provides a loading fallback UI, enabling code-splitting to reduce initial bundle size and improve load performance.
1 parent 80cb5ba commit eb3ed5e

1 file changed

Lines changed: 13 additions & 9 deletions

File tree

src/App.jsx

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import { useCallback, useEffect, useRef, useState } from 'react'
1+
import { Suspense, lazy, useCallback, useEffect, useRef, useState } from 'react'
22
import { HeaderBar } from './components/HeaderBar'
33
import { ToastStack } from './components/ToastStack'
4-
import { BlogEditor } from './components/BlogEditor'
54
import { HtmlEditor } from './components/HtmlEditor'
65
import { DraftList } from './components/DraftList'
76
import { PublishDialog } from './components/PublishDialog'
@@ -12,6 +11,9 @@ import { parsePublishedHtml, serializePost } from './lib/postSerializer'
1211
import { fetchRepoFileText, getFileSha, listPostHtmlFiles, upsertFile } from './lib/github'
1312

1413
const EMPTY_DOC = '<p></p>'
14+
const BlogEditor = lazy(() =>
15+
import('./components/BlogEditor').then((module) => ({ default: module.BlogEditor })),
16+
)
1517

1618
function normalizePostsPath(p) {
1719
if (!p || typeof p !== 'string') return 'blog/'
@@ -411,13 +413,15 @@ export default function App() {
411413
</div>
412414
<section className="editor-section" aria-label="Post body">
413415
{mode === 'visual' ? (
414-
<BlogEditor
415-
key={editorDocumentKey}
416-
documentKey={editorDocumentKey}
417-
content={content}
418-
onChange={setContent}
419-
onRequestSourceMode={() => setMode('code')}
420-
/>
416+
<Suspense fallback={<div className="editor-loading">Loading editor…</div>}>
417+
<BlogEditor
418+
key={editorDocumentKey}
419+
documentKey={editorDocumentKey}
420+
content={content}
421+
onChange={setContent}
422+
onRequestSourceMode={() => setMode('code')}
423+
/>
424+
</Suspense>
421425
) : (
422426
<HtmlEditor
423427
key={editorDocumentKey}

0 commit comments

Comments
 (0)