perf: lazy-load TipTap via RichText components

client/src/features/order-chat/ui/OrderChat.tsx

@@ -9,7 +9,7 @@ import { fetchAdminAvatar } from '@/entities/user/api/user-api'
 import { $user } from '@/shared/model/auth'
 import { ChatMessageBubble } from '@/shared/ui/ChatMessageBubble'
 import { OrderMessageBody } from '@/shared/ui/OrderMessageBody'
-import { RichTextMessageEditor } from '@/shared/ui/RichTextMessageEditor'
+import { RichTextMessageEditor } from '@/shared/ui/RichTextMessageEditor.lazy'
 import { UserAvatar } from '@/shared/ui/UserAvatar'
 
 type Message = {

client/src/features/order-detail/ui/OrderDetailContent.tsx

@@ -21,7 +21,7 @@ import { orderStatusLabelRu } from '@/shared/lib/order-status-labels'
 import { $user } from '@/shared/model/auth'
 import { ChatMessageBubble } from '@/shared/ui/ChatMessageBubble'
 import { OrderMessageBody } from '@/shared/ui/OrderMessageBody'
-import { RichTextMessageEditor } from '@/shared/ui/RichTextMessageEditor'
+import { RichTextMessageEditor } from '@/shared/ui/RichTextMessageEditor.lazy'
 import { UserAvatar } from '@/shared/ui/UserAvatar'
 import { DeliveryFeeAdjustmentForm } from './DeliveryFeeAdjustmentForm'
 

client/src/features/product-review/ui/ProductReviewsList.tsx

@@ -10,7 +10,7 @@ import { fetchPublicProductReviews } from '@/entities/review/api/reviews-api'
 import type { PublicProductReviewItem } from '@/entities/review/api/reviews-api'
 import { reviewsCountRu } from '@/shared/lib/reviews-count-ru'
 import { OptimizedImage } from '@/shared/ui/OptimizedImage'
-import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent'
+import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent.lazy'
 import { UserAvatar } from '@/shared/ui/UserAvatar'
 
 function ReviewItem({ rv }: { rv: PublicProductReviewItem }) {

client/src/features/product-review/ui/ReviewDialog.tsx

@@ -10,7 +10,7 @@ import Rating from '@mui/material/Rating'
 import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import axios from 'axios'
-import { RichTextMessageEditor } from '@/shared/ui/RichTextMessageEditor'
+import { RichTextMessageEditor } from '@/shared/ui/RichTextMessageEditor.lazy'
 
 type Props = {
   productTitle: string | null

client/src/pages/admin-reviews/ui/AdminReviewsPage.tsx

@@ -15,7 +15,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { fetchAdminReviews, moderateReview } from '@/entities/review/api/admin-review-api'
 import { getErrorMessage } from '@/shared/lib/get-error-message'
 import { invalidateQueryKeys } from '@/shared/lib/invalidate-query-keys'
-import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent'
+import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent.lazy'
 
 export function AdminReviewsPage() {
   const qc = useQueryClient()

client/src/pages/me/ui/sections/MessagesPage.tsx

@@ -20,8 +20,8 @@ import { usePageTitle } from '@/shared/lib/use-page-title'
 import { $user } from '@/shared/model/auth'
 import { ChatMessageBubble } from '@/shared/ui/ChatMessageBubble'
 import { OrderMessageBody } from '@/shared/ui/OrderMessageBody'
-import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent'
-import { RichTextMessageEditor } from '@/shared/ui/RichTextMessageEditor'
+import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent.lazy'
+import { RichTextMessageEditor } from '@/shared/ui/RichTextMessageEditor.lazy'
 import { UserAvatar } from '@/shared/ui/UserAvatar'
 
 export function MessagesPage() {

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>
+  )
+}

client/src/widgets/reviews-block/ui/ReviewsBlock.tsx

@@ -10,7 +10,7 @@ import { useQuery } from '@tanstack/react-query'
 import { Link as RouterLink } from 'react-router-dom'
 import { fetchLatestApprovedReviews } from '@/entities/review/api/reviews-api'
 import { OptimizedImage } from '@/shared/ui/OptimizedImage'
-import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent'
+import { RichTextMessageContent } from '@/shared/ui/RichTextMessageContent.lazy'
 import { UserAvatar } from '@/shared/ui/UserAvatar'
 
 function formatReviewDate(iso: string): string {