From 61a60c5b9f6ae0f27b4f382a7e9dcc20c9a6568e Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Fri, 6 Feb 2026 12:27:03 -0800
Subject: [PATCH] Markdown: bundle in main chunk instead of lazy-loading

---
 src/modules/blocks/markdown/RenderMarkdown.tsx | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/modules/blocks/markdown/RenderMarkdown.tsx b/src/modules/blocks/markdown/RenderMarkdown.tsx
index 4e6d16b14..4ea3103d1 100644
--- a/src/modules/blocks/markdown/RenderMarkdown.tsx
+++ b/src/modules/blocks/markdown/RenderMarkdown.tsx
@@ -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);
\ No newline at end of file
+export const RenderMarkdownMemo = React.memo(RenderMarkdown);