zack3d/big-agi
1
0
Fork 0
mirror of https://github.com/enricoros/big-AGI.git synced 2026-05-10 21:50:14 -07:00
Code Issues Packages Projects Releases Wiki Activity

Markdown: bundle in main chunk instead of lazy-loading

Browse Source
This commit is contained in:
Enrico Ros
2026-02-06 12:27:03 -08:00
parent 3054e1b88d
commit 61a60c5b9f
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/modules/blocks/markdown/RenderMarkdown.tsx
+12 -6
View File
@@ -5,6 +5,15 @@ import { Box, styled } from '@mui/joy';
import { lineHeightChatTextMd } from '~/common/app.theme';
import CustomMarkdownRenderer from './CustomMarkdownRenderer';
/*
* Markdown is bundled in the main chunk (not lazy-loaded) because:
* - It's used immediately when opening any conversation with existing messages
* - Lazy loading caused a visible "Loading..." flash on the critical path
* - The ~150KB cost is acceptable for instant rendering of this core feature
*/
/*
* For performance reasons, we style this component here and copy the equivalent of 'props.sx' (the lineHeight) locally.
@@ -21,19 +30,16 @@ const RenderMarkdownBox = styled(Box)({
'& table': { width: 'inherit !important' }, // un-break auto-width (tables have 'max-content', which overflows)
});
const DynamicMarkdownRenderer = React.lazy(() => import('./CustomMarkdownRenderer'));
export function RenderMarkdown(props: { content: string; disablePreprocessor?: boolean, sx?: SxProps; }) {
return (
<RenderMarkdownBox
className='markdown-body' /* NODE: see GithubMarkdown.css for the dark/light switch, synced with Joy's */
className='markdown-body' /* NOTE: see GithubMarkdown.css for the dark/light switch, synced with Joy's */
sx={props.sx}
>
<React.Suspense fallback={<div>Loading...</div>}>
<DynamicMarkdownRenderer content={props.content} disablePreprocessor={props.disablePreprocessor} />
</React.Suspense>
<CustomMarkdownRenderer content={props.content} disablePreprocessor={props.disablePreprocessor} />
</RenderMarkdownBox>
);
}
export const RenderMarkdownMemo = React.memo(RenderMarkdown);
export const RenderMarkdownMemo = React.memo(RenderMarkdown);