lazy load rich text widget (#16569)

.github/workflows/ci-front.yaml

@@ -185,6 +185,28 @@ jobs:
         uses: ./.github/workflows/actions/save-cache
         with:
           key: ${{ steps.restore-task-cache.outputs.cache-primary-key }}
+  front-build:
+    needs: changed-files-check
+    if: needs.changed-files-check.outputs.any_changed == 'true'
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    env:
+      NODE_OPTIONS: "--max-old-space-size=10240"
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.11.0
+        with:
+          access_token: ${{ github.token }}
+      - name: Fetch custom Github Actions and base branch history
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Install dependencies
+        uses: ./.github/workflows/actions/yarn-install
+      - name: Front / Write .env
+        run: npx nx reset:env twenty-front
+      - name: Build frontend
+        run: npx nx build twenty-front
   ci-front-status-check:
     if: always() && !cancelled()
     timeout-minutes: 5
@@ -193,6 +215,7 @@ jobs:
       [
         changed-files-check,
         front-task,
+        front-build,
         front-chromatic-deployment,
         merge-reports-and-check-coverage,
         front-sb-test,

packages/twenty-front/src/modules/page-layout/widgets/components/WidgetContentRenderer.tsx

@@ -1,13 +1,13 @@
 import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 import { CalendarWidget } from '@/page-layout/widgets/calendar/components/CalendarWidget';
 import { EmailWidget } from '@/page-layout/widgets/emails/components/EmailWidget';
-import { FieldRichTextWidget } from '@/page-layout/widgets/field-rich-text/components/FieldRichTextWidget';
+import { FieldRichTextWidgetRenderer } from '@/page-layout/widgets/field-rich-text/components/FieldRichTextWidgetRenderer';
 import { FieldsWidget } from '@/page-layout/widgets/fields/components/FieldsWidget';
 import { FileWidget } from '@/page-layout/widgets/files/components/FileWidget';
 import { GraphWidgetRenderer } from '@/page-layout/widgets/graph/components/GraphWidgetRenderer';
 import { IframeWidget } from '@/page-layout/widgets/iframe/components/IframeWidget';
 import { NoteWidget } from '@/page-layout/widgets/notes/components/NoteWidget';
-import { StandaloneRichTextWidget } from '@/page-layout/widgets/standalone-rich-text/components/StandaloneRichTextWidget';
+import { StandaloneRichTextWidgetRenderer } from '@/page-layout/widgets/standalone-rich-text/components/StandaloneRichTextWidgetRenderer';
 import { TaskWidget } from '@/page-layout/widgets/tasks/components/TaskWidget';
 import { TimelineWidget } from '@/page-layout/widgets/timeline/components/TimelineWidget';
 import { WorkflowRunWidget } from '@/page-layout/widgets/workflow/components/WorkflowRunWidget';
@@ -42,7 +42,7 @@ export const WidgetContentRenderer = ({
       return <NoteWidget widget={widget} />;
 
     case WidgetType.FIELD_RICH_TEXT:
-      return <FieldRichTextWidget widget={widget} />;
+      return <FieldRichTextWidgetRenderer widget={widget} />;
 
     case WidgetType.FILES:
       return <FileWidget widget={widget} />;
@@ -63,7 +63,7 @@ export const WidgetContentRenderer = ({
       return <WorkflowRunWidget />;
 
     case WidgetType.STANDALONE_RICH_TEXT:
-      return <StandaloneRichTextWidget widget={widget} />;
+      return <StandaloneRichTextWidgetRenderer widget={widget} />;
 
     default:
       return null;

packages/twenty-front/src/modules/page-layout/widgets/field-rich-text/components/FieldRichTextWidgetRenderer.tsx

@@ -0,0 +1,25 @@
+import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
+import { ChartSkeletonLoader } from '@/page-layout/widgets/graph/components/ChartSkeletonLoader';
+import { lazy, Suspense } from 'react';
+
+const FieldRichTextWidget = lazy(() =>
+  import(
+    '@/page-layout/widgets/field-rich-text/components/FieldRichTextWidget'
+  ).then((module) => ({
+    default: module.FieldRichTextWidget,
+  })),
+);
+
+type FieldRichTextWidgetRendererProps = {
+  widget: PageLayoutWidget;
+};
+
+export const FieldRichTextWidgetRenderer = ({
+  widget,
+}: FieldRichTextWidgetRendererProps) => {
+  return (
+    <Suspense fallback={<ChartSkeletonLoader />}>
+      <FieldRichTextWidget widget={widget} />
+    </Suspense>
+  );
+};

packages/twenty-front/src/modules/page-layout/widgets/standalone-rich-text/components/StandaloneRichTextWidgetRenderer.tsx

@@ -0,0 +1,25 @@
+import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
+import { ChartSkeletonLoader } from '@/page-layout/widgets/graph/components/ChartSkeletonLoader';
+import { lazy, Suspense } from 'react';
+
+const StandaloneRichTextWidget = lazy(() =>
+  import(
+    '@/page-layout/widgets/standalone-rich-text/components/StandaloneRichTextWidget'
+  ).then((module) => ({
+    default: module.StandaloneRichTextWidget,
+  })),
+);
+
+type StandaloneRichTextWidgetRendererProps = {
+  widget: PageLayoutWidget;
+};
+
+export const StandaloneRichTextWidgetRenderer = ({
+  widget,
+}: StandaloneRichTextWidgetRendererProps) => {
+  return (
+    <Suspense fallback={<ChartSkeletonLoader />}>
+      <StandaloneRichTextWidget widget={widget} />
+    </Suspense>
+  );
+};

packages/twenty-front/vite.config.ts

@@ -45,7 +45,7 @@ export default defineConfig(({ command, mode }) => {
   // Please don't increase this limit for main index chunk
   // If it gets too big then find modules in the code base
   // that can be loaded lazily, there are more!
-  const MAIN_CHUNK_SIZE_LIMIT = 6.9 * 1024 * 1024; // 6.5MB for main index chunk
+  const MAIN_CHUNK_SIZE_LIMIT = 6.9 * 1024 * 1024; // 6.9MB for main index chunk
   const OTHER_CHUNK_SIZE_LIMIT = 5 * 1024 * 1024; // 5MB for other chunks
 
   const checkers: Checkers = {