perf: lazy-load TipTap via RichText components

client/src/shared/ui/OrderMessageBody.tsx

@@ -1,5 +1,5 @@
 import Box from '@mui/material/Box'
-import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent'
+import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent.lazy'
 
 type Props = {
   text: string

client/src/shared/ui/RichTextMessageContent.lazy.tsx

@@ -0,0 +1,26 @@
+import { lazy, Suspense } from 'react'
+import Box from '@mui/material/Box'
+import CircularProgress from '@mui/material/CircularProgress'
+
+const RichTextMessageContentImpl = lazy(() =>
+  import('./RichTextMessageContent').then((m) => ({ default: m.RichTextMessageContent })),
+)
+
+type RichTextMessageContentProps = {
+  value: string
+  tone?: 'default' | 'review' | 'chat'
+}
+
+export function RichTextMessageContent(props: RichTextMessageContentProps) {
+  return (
+    <Suspense
+      fallback={
+        <Box sx={{ display: 'flex', justifyContent: 'center', p: 1 }}>
+          <CircularProgress size={16} />
+        </Box>
+      }
+    >
+      <RichTextMessageContentImpl {...props} />
+    </Suspense>
+  )
+}

client/src/shared/ui/RichTextMessageEditor.lazy.tsx

@@ -0,0 +1,28 @@
+import { lazy, Suspense } from 'react'
+import Box from '@mui/material/Box'
+import CircularProgress from '@mui/material/CircularProgress'
+
+const RichTextMessageEditorImpl = lazy(() =>
+  import('./RichTextMessageEditor').then((m) => ({ default: m.RichTextMessageEditor })),
+)
+
+type RichTextMessageEditorProps = {
+  value: string
+  onChange: (next: string) => void
+  placeholder?: string
+  disabled?: boolean
+}
+
+export function RichTextMessageEditor(props: RichTextMessageEditorProps) {
+  return (
+    <Suspense
+      fallback={
+        <Box sx={{ display: 'flex', justifyContent: 'center', p: 2 }}>
+          <CircularProgress size={20} />
+        </Box>
+      }
+    >
+      <RichTextMessageEditorImpl {...props} />
+    </Suspense>
+  )
+}