From 5b391a8f9b389a6919cfc9b0ce82eaf1363b0ef7 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Fri, 18 Apr 2025 13:53:23 +0800
Subject: [PATCH 01/36] fix(locales): invalid interpolation patterns

---
 client/locales/zh.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/locales/zh.json b/client/locales/zh.json
index 6d90f0533c9..ff6e1054d8a 100644
--- a/client/locales/zh.json
+++ b/client/locales/zh.json
@@ -3306,7 +3306,7 @@
     "defaultMessage": "运行代码"
   },
   "course.assessment.submission.runCodeWithLimit": {
-    "defaultMessage": "运行代码（{attempts Left, pleural, one {# attempt} other {# attempts}} left）"
+    "defaultMessage": "运行代码（{attemptsLeft, plural, one {# attempt} other {# attempts}} left）"
   },
   "course.assessment.submission.saveDraft": {
     "defaultMessage": "保存草稿"
@@ -4719,7 +4719,7 @@
     "defaultMessage": "无法创建 {numFailed} 个组。"
   },
   "course.group.GroupShow.GroupManager.GroupManager.createMultiplePartialFailure": {
-    "defaultMessage": "无法创建 {numFailed} {numFailed，复数，一个 {group} 其他 {groups}}。"
+    "defaultMessage": "无法创建 {numFailed} {numFailed, plural, one {group} other {groups}}。"
   },
   "course.group.GroupShow.GroupManager.GroupManager.createMultipleSuccess": {
     "defaultMessage": "{numCreated} {numCreated, plural, one {group was} other {groups were}} 已成功创建。"

From f48d53689323b6ddebebe9810fcd424cb9105996 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Fri, 18 Apr 2025 13:53:56 +0800
Subject: [PATCH 02/36] fix(AchievementReordering): clarify button label

---
 .../achievement/components/misc/AchievementReordering.tsx       | 2 +-
 client/locales/en.json                                          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/app/bundles/course/achievement/components/misc/AchievementReordering.tsx b/client/app/bundles/course/achievement/components/misc/AchievementReordering.tsx
index e0011aa1349..e1bdb3dee55 100644
--- a/client/app/bundles/course/achievement/components/misc/AchievementReordering.tsx
+++ b/client/app/bundles/course/achievement/components/misc/AchievementReordering.tsx
@@ -26,7 +26,7 @@ const translations = defineMessages({
   },
   endReorderAchievement: {
     id: 'course.achievement.AchievementReordering.endReorderAchievement',
-    defaultMessage: 'Save New Ordering',
+    defaultMessage: 'Done reordering',
   },
   updateFailed: {
     id: 'course.achievement.AchievementReordering.updateFailed',
diff --git a/client/locales/en.json b/client/locales/en.json
index 074a07bcaa1..5e0623dba09 100644
--- a/client/locales/en.json
+++ b/client/locales/en.json
@@ -306,7 +306,7 @@
     "defaultMessage": "New Achievement"
   },
   "course.achievement.AchievementReordering.endReorderAchievement": {
-    "defaultMessage": "Save New Ordering"
+    "defaultMessage": "Done reordering"
   },
   "course.achievement.AchievementReordering.startReorderAchievement": {
     "defaultMessage": "Reorder"

From 9770410fbd0e5bc6cfb0c1c4bf401491a57694d8 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Fri, 18 Apr 2025 13:54:38 +0800
Subject: [PATCH 03/36] perf(AchievementReordering): lazy load jQuery, jQuery
 UI

---
 client/app/__test__/setup.js                  |  4 -
 .../components/misc/AchievementReordering.tsx | 97 ++++++++++++-------
 .../lib/components/wrappers/ThemeProvider.tsx |  2 +-
 client/webpack.common.js                      |  7 --
 4 files changed, 65 insertions(+), 45 deletions(-)

diff --git a/client/app/__test__/setup.js b/client/app/__test__/setup.js
index f34b92f8144..0fcb817bfdd 100644
--- a/client/app/__test__/setup.js
+++ b/client/app/__test__/setup.js
@@ -15,8 +15,6 @@ import './mocks/matchMedia';
 Enzyme.configure({ adapter: new Adapter() });
 
 require('@babel/polyfill');
-// Our jquery is from CDN and loaded at runtime, so this is required in test.
-const jQuery = require('jquery');
 
 const timeZone = 'Asia/Singapore';
 const intlCache = createIntlCache();
@@ -47,8 +45,6 @@ const buildContextOptions = (store) => {
 global.courseId = courseId;
 global.window = window;
 global.muiTheme = muiTheme;
-global.$ = jQuery;
-global.jQuery = jQuery;
 global.buildContextOptions = buildContextOptions;
 
 window.history.pushState({}, '', `/courses/${courseId}`);
diff --git a/client/app/bundles/course/achievement/components/misc/AchievementReordering.tsx b/client/app/bundles/course/achievement/components/misc/AchievementReordering.tsx
index e1bdb3dee55..89288695de2 100644
--- a/client/app/bundles/course/achievement/components/misc/AchievementReordering.tsx
+++ b/client/app/bundles/course/achievement/components/misc/AchievementReordering.tsx
@@ -1,24 +1,16 @@
+import { useRef, useState } from 'react';
 import { defineMessages } from 'react-intl';
-import { Button } from '@mui/material';
+import { LoadingButton } from '@mui/lab';
 
 import CourseAPI from 'api/course';
 import toast from 'lib/hooks/toast';
 import useTranslation from 'lib/hooks/useTranslation';
 
-require('jquery-ui/ui/widgets/sortable');
-
 interface AchievementReorderingProps {
   handleReordering: (state: boolean) => void;
   isReordering: boolean;
 }
 
-const styles = {
-  AchievementReorderingButton: {
-    fontSize: 14,
-    marginRight: 12,
-  },
-};
-
 const translations = defineMessages({
   startReorderAchievement: {
     id: 'course.achievement.AchievementReordering.startReorderAchievement',
@@ -38,12 +30,6 @@ const translations = defineMessages({
   },
 });
 
-// Serialise the ordered achievements as data for the API call.
-function serializedOrdering(): string {
-  const options = { attribute: 'achievementid', key: 'achievement_order[]' };
-  return $('tbody').first().sortable('serialize', options);
-}
-
 const AchievementReordering = (
   props: AchievementReorderingProps,
 ): JSX.Element => {
@@ -60,35 +46,80 @@ const AchievementReordering = (
     }
   }
 
+  const [loadingSortable, setLoadingSortable] = useState(false);
+
+  const sortableCallbacksRef = useRef<{
+    enable: () => void;
+    disable: () => void;
+  }>();
+
   return (
-    <Button
-      key="achievement-reordering-button"
-      className="achievement-reordering-button"
+    <LoadingButton
       color="primary"
+      loading={loadingSortable}
+      loadingPosition="start"
       onClick={(): void => {
+        if (loadingSortable) return;
+
+        if (!sortableCallbacksRef.current) {
+          setLoadingSortable(true);
+
+          (async (): Promise<void> => {
+            const [jquery] = await Promise.all([
+              import(
+                /* webpackChunkName: "jquery-sortable" */
+                'jquery'
+              ),
+              import(
+                /* webpackChunkName: "jquery-sortable" */
+                'jquery-ui/ui/widgets/sortable'
+              ),
+            ]);
+
+            sortableCallbacksRef.current = {
+              enable: (): void => {
+                const table = jquery.default('tbody').first();
+
+                table.sortable({
+                  disabled: false,
+                  update() {
+                    const ordering = table.sortable('serialize', {
+                      attribute: 'achievementid',
+                      key: 'achievement_order[]',
+                    });
+
+                    submitReordering(ordering);
+                  },
+                });
+
+                handleReordering(true);
+              },
+              disable: (): void => {
+                jquery.default('tbody').first().sortable({ disabled: true });
+                handleReordering(false);
+              },
+            };
+
+            sortableCallbacksRef.current.enable();
+
+            setLoadingSortable(false);
+          })();
+
+          return;
+        }
+
         if (isReordering) {
-          $('tbody').first().sortable({ disabled: true });
-          handleReordering(false);
+          sortableCallbacksRef.current.disable();
         } else {
-          $('tbody')
-            .first()
-            .sortable({
-              update() {
-                const ordering = serializedOrdering();
-                submitReordering(ordering);
-              },
-              disabled: false,
-            });
-          handleReordering(true);
+          sortableCallbacksRef.current.enable();
         }
       }}
-      style={styles.AchievementReorderingButton}
       variant={isReordering ? 'contained' : 'outlined'}
     >
       {isReordering
         ? t(translations.endReorderAchievement)
         : t(translations.startReorderAchievement)}
-    </Button>
+    </LoadingButton>
   );
 };
 
diff --git a/client/app/lib/components/wrappers/ThemeProvider.tsx b/client/app/lib/components/wrappers/ThemeProvider.tsx
index bca0fb12815..0b2f0e3e264 100644
--- a/client/app/lib/components/wrappers/ThemeProvider.tsx
+++ b/client/app/lib/components/wrappers/ThemeProvider.tsx
@@ -74,7 +74,7 @@ const ThemeProvider = (props: ThemeProviderProps): JSX.Element => {
           classes: {
             root: 'rounded-full',
             sizeLarge: 'px-5 py-3',
-            sizeMedium: 'px-3 py-2',
+            sizeMedium: 'px-2 py-2',
             sizeSmall: 'min-w-[6rem] px-1 py-1',
           },
         },
diff --git a/client/webpack.common.js b/client/webpack.common.js
index fcc8623d3d0..5b96da75f32 100644
--- a/client/webpack.common.js
+++ b/client/webpack.common.js
@@ -164,13 +164,6 @@ module.exports = {
         ],
         exclude: /node_modules/,
       },
-      {
-        test: require.resolve('jquery'),
-        loader: 'expose-loader',
-        options: {
-          exposes: ['jQuery', '$'],
-        },
-      },
       {
         test: require.resolve('./app/lib/moment-timezone'),
         loader: 'expose-loader',

From f5d1f8f0fbfecbdc7e82277516aa6932bcc54a7b Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Fri, 18 Apr 2025 13:57:58 +0800
Subject: [PATCH 04/36] fix(moment): import moment from lib/moment only

---
 client/app/bundles/common/DashboardPage.tsx                    | 2 +-
 .../AssessmentMonitoring/components/HeartbeatsTimeline.tsx     | 2 +-
 .../components/HeartbeatsTimelineChart.tsx                     | 2 +-
 .../course/assessment/pages/AssessmentMonitoring/utils.ts      | 2 +-
 .../LiveFeedbackHistory/LiveFeedbackMessageHistory.tsx         | 3 +--
 .../assessment/submission/reducers/liveFeedbackChats/index.ts  | 3 +--
 .../reference-timelines/components/DayCalendar/DayCalendar.tsx | 2 +-
 .../reference-timelines/components/DayCalendar/DayColumn.tsx   | 3 ++-
 .../course/reference-timelines/components/SubmitIndicator.tsx  | 2 +-
 .../reference-timelines/components/TimeBar/DurationBar.tsx     | 3 ++-
 .../course/reference-timelines/components/TimeBar/TimeBar.tsx  | 3 ++-
 .../reference-timelines/components/TimeBar/TimeBarHandle.tsx   | 3 ++-
 .../reference-timelines/components/TimePopup/TimePopup.tsx     | 2 +-
 .../reference-timelines/components/TimePopup/TimePopupForm.tsx | 2 +-
 .../components/TimelinesStack/AssignableTimeline.tsx           | 3 ++-
 .../reference-timelines/components/TimelinesStack/Timeline.tsx | 2 +-
 .../course/reference-timelines/contexts/LastSavedContext.tsx   | 3 ++-
 client/app/bundles/course/reference-timelines/utils.ts         | 3 ++-
 .../course/reference-timelines/views/DayView/ItemsSidebar.tsx  | 3 ++-
 19 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/client/app/bundles/common/DashboardPage.tsx b/client/app/bundles/common/DashboardPage.tsx
index 4798315b944..be171e86977 100644
--- a/client/app/bundles/common/DashboardPage.tsx
+++ b/client/app/bundles/common/DashboardPage.tsx
@@ -2,7 +2,6 @@ import { defineMessages } from 'react-intl';
 import { Navigate } from 'react-router-dom';
 import { ArrowForward } from '@mui/icons-material';
 import { Avatar, Stack, Typography } from '@mui/material';
-import moment from 'moment';
 import { HomeLayoutCourseData } from 'types/home';
 
 import { getCourseLogoUrl } from 'course/helper';
@@ -13,6 +12,7 @@ import { useAppContext } from 'lib/containers/AppContainer';
 import { getUrlParameter } from 'lib/helpers/url-helpers';
 import useItems from 'lib/hooks/items/useItems';
 import useTranslation from 'lib/hooks/useTranslation';
+import moment from 'lib/moment';
 
 import NewCourseButton from './components/NewCourseButton';
 
diff --git a/client/app/bundles/course/assessment/pages/AssessmentMonitoring/components/HeartbeatsTimeline.tsx b/client/app/bundles/course/assessment/pages/AssessmentMonitoring/components/HeartbeatsTimeline.tsx
index ea2939f22d5..e14221272c6 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentMonitoring/components/HeartbeatsTimeline.tsx
+++ b/client/app/bundles/course/assessment/pages/AssessmentMonitoring/components/HeartbeatsTimeline.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react';
-import moment from 'moment';
 import { HeartbeatDetail } from 'types/channels/liveMonitoring';
 
 import { BrowserAuthorizationMethod } from 'course/assessment/components/monitoring/BrowserAuthorizationMethodOptionsFormFields/common';
+import moment from 'lib/moment';
 
 import HeartbeatDetailCard from './HeartbeatDetailCard';
 import HeartbeatsTimelineChart from './HeartbeatsTimelineChart';
diff --git a/client/app/bundles/course/assessment/pages/AssessmentMonitoring/components/HeartbeatsTimelineChart.tsx b/client/app/bundles/course/assessment/pages/AssessmentMonitoring/components/HeartbeatsTimelineChart.tsx
index 3e47f456841..68af626e572 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentMonitoring/components/HeartbeatsTimelineChart.tsx
+++ b/client/app/bundles/course/assessment/pages/AssessmentMonitoring/components/HeartbeatsTimelineChart.tsx
@@ -10,12 +10,12 @@ import {
   PointStyle,
 } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
-import moment from 'moment';
 import palette from 'theme/palette';
 import { HeartbeatDetail } from 'types/channels/liveMonitoring';
 
 import { useAppSelector } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
+import moment from 'lib/moment';
 
 import translations from '../../../translations';
 import { select } from '../selectors';
diff --git a/client/app/bundles/course/assessment/pages/AssessmentMonitoring/utils.ts b/client/app/bundles/course/assessment/pages/AssessmentMonitoring/utils.ts
index 3ab5a503a8a..ca23d6dc429 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentMonitoring/utils.ts
+++ b/client/app/bundles/course/assessment/pages/AssessmentMonitoring/utils.ts
@@ -1,4 +1,4 @@
-import moment from 'moment';
+import moment from 'lib/moment';
 
 export type Presence = 'alive' | 'late' | 'missing';
 
diff --git a/client/app/bundles/course/assessment/pages/AssessmentStatistics/LiveFeedbackHistory/LiveFeedbackMessageHistory.tsx b/client/app/bundles/course/assessment/pages/AssessmentStatistics/LiveFeedbackHistory/LiveFeedbackMessageHistory.tsx
index 7860f3ca075..fa9f6f7b250 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentStatistics/LiveFeedbackHistory/LiveFeedbackMessageHistory.tsx
+++ b/client/app/bundles/course/assessment/pages/AssessmentStatistics/LiveFeedbackHistory/LiveFeedbackMessageHistory.tsx
@@ -1,6 +1,5 @@
 import { Dispatch, FC, SetStateAction } from 'react';
 import { Typography } from '@mui/material';
-import moment from 'moment';
 import { LiveFeedbackChatMessage } from 'types/course/assessment/submission/liveFeedback';
 
 import {
@@ -8,7 +7,7 @@ import {
   justifyPosition,
 } from 'course/assessment/submission/components/GetHelpChatPage/utils';
 import MarkdownText from 'course/assessment/submission/components/MarkdownText';
-import { SHORT_DATE_TIME_FORMAT } from 'lib/moment';
+import moment, { SHORT_DATE_TIME_FORMAT } from 'lib/moment';
 
 interface Props {
   messages: LiveFeedbackChatMessage[];
diff --git a/client/app/bundles/course/assessment/submission/reducers/liveFeedbackChats/index.ts b/client/app/bundles/course/assessment/submission/reducers/liveFeedbackChats/index.ts
index 60f12b53400..b5e115df408 100644
--- a/client/app/bundles/course/assessment/submission/reducers/liveFeedbackChats/index.ts
+++ b/client/app/bundles/course/assessment/submission/reducers/liveFeedbackChats/index.ts
@@ -5,9 +5,8 @@ import {
   PayloadAction,
 } from '@reduxjs/toolkit';
 import { shuffle } from 'lodash';
-import moment from 'moment';
 
-import { SHORT_TIME_FORMAT } from 'lib/moment';
+import moment, { SHORT_TIME_FORMAT } from 'lib/moment';
 
 import {
   getLocalStorageValue,
diff --git a/client/app/bundles/course/reference-timelines/components/DayCalendar/DayCalendar.tsx b/client/app/bundles/course/reference-timelines/components/DayCalendar/DayCalendar.tsx
index 719499bdd2c..d3ba32d4527 100644
--- a/client/app/bundles/course/reference-timelines/components/DayCalendar/DayCalendar.tsx
+++ b/client/app/bundles/course/reference-timelines/components/DayCalendar/DayCalendar.tsx
@@ -2,9 +2,9 @@ import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList as List } from 'react-window';
 import { Button, Typography } from '@mui/material';
-import moment from 'moment';
 
 import useTranslation from 'lib/hooks/useTranslation';
+import moment from 'lib/moment';
 
 import translations from '../../translations';
 import {
diff --git a/client/app/bundles/course/reference-timelines/components/DayCalendar/DayColumn.tsx b/client/app/bundles/course/reference-timelines/components/DayCalendar/DayColumn.tsx
index 4ca273feeb8..7cee1062211 100644
--- a/client/app/bundles/course/reference-timelines/components/DayCalendar/DayColumn.tsx
+++ b/client/app/bundles/course/reference-timelines/components/DayCalendar/DayColumn.tsx
@@ -1,7 +1,8 @@
 import { CSSProperties, memo } from 'react';
 import { areEqual } from 'react-window';
 import { Typography } from '@mui/material';
-import moment from 'moment';
+
+import moment from 'lib/moment';
 
 import { getSecondsFromDays, isToday, isWeekend } from '../../utils';
 
diff --git a/client/app/bundles/course/reference-timelines/components/SubmitIndicator.tsx b/client/app/bundles/course/reference-timelines/components/SubmitIndicator.tsx
index 416fd39637f..8d77d7dca2b 100644
--- a/client/app/bundles/course/reference-timelines/components/SubmitIndicator.tsx
+++ b/client/app/bundles/course/reference-timelines/components/SubmitIndicator.tsx
@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
 import { Cancel, CheckCircle } from '@mui/icons-material';
 import { Chip, Grow, Tooltip, Typography } from '@mui/material';
-import moment from 'moment';
 
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import useTranslation from 'lib/hooks/useTranslation';
+import moment from 'lib/moment';
 
 import { useLastSaved } from '../contexts';
 import translations from '../translations';
diff --git a/client/app/bundles/course/reference-timelines/components/TimeBar/DurationBar.tsx b/client/app/bundles/course/reference-timelines/components/TimeBar/DurationBar.tsx
index b5b64dc5b89..82d74dd9123 100644
--- a/client/app/bundles/course/reference-timelines/components/TimeBar/DurationBar.tsx
+++ b/client/app/bundles/course/reference-timelines/components/TimeBar/DurationBar.tsx
@@ -1,5 +1,6 @@
 import { MouseEventHandler, ReactNode, TouchEventHandler } from 'react';
-import moment from 'moment';
+
+import moment from 'lib/moment';
 
 import {
   DAY_WIDTH_PIXELS,
diff --git a/client/app/bundles/course/reference-timelines/components/TimeBar/TimeBar.tsx b/client/app/bundles/course/reference-timelines/components/TimeBar/TimeBar.tsx
index f2d206374ed..9dbae1ef05a 100644
--- a/client/app/bundles/course/reference-timelines/components/TimeBar/TimeBar.tsx
+++ b/client/app/bundles/course/reference-timelines/components/TimeBar/TimeBar.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import moment from 'moment';
+
+import moment from 'lib/moment';
 
 import { DAY_WIDTH_PIXELS, getDaysFromWidth } from '../../utils';
 import HorizontallyDraggable from '../HorizontallyDraggable';
diff --git a/client/app/bundles/course/reference-timelines/components/TimeBar/TimeBarHandle.tsx b/client/app/bundles/course/reference-timelines/components/TimeBar/TimeBarHandle.tsx
index 9c5c2a28c03..b6cd8a2ac82 100644
--- a/client/app/bundles/course/reference-timelines/components/TimeBar/TimeBarHandle.tsx
+++ b/client/app/bundles/course/reference-timelines/components/TimeBar/TimeBarHandle.tsx
@@ -5,7 +5,8 @@ import {
   TouchEventHandler,
 } from 'react';
 import { Typography } from '@mui/material';
-import moment from 'moment';
+
+import moment from 'lib/moment';
 
 interface HandleContentProps {
   side: 'start' | 'end';
diff --git a/client/app/bundles/course/reference-timelines/components/TimePopup/TimePopup.tsx b/client/app/bundles/course/reference-timelines/components/TimePopup/TimePopup.tsx
index ceb9814270b..209aca0c70b 100644
--- a/client/app/bundles/course/reference-timelines/components/TimePopup/TimePopup.tsx
+++ b/client/app/bundles/course/reference-timelines/components/TimePopup/TimePopup.tsx
@@ -1,5 +1,4 @@
 import { Typography } from '@mui/material';
-import moment from 'moment';
 import {
   ItemWithTimeData,
   TimelineData,
@@ -8,6 +7,7 @@ import {
 import { useAppDispatch } from 'lib/hooks/store';
 import toast from 'lib/hooks/toast';
 import useTranslation from 'lib/hooks/useTranslation';
+import moment from 'lib/moment';
 
 import { useSetLastSaved } from '../../contexts';
 import { createTime, deleteTime, updateTime } from '../../operations';
diff --git a/client/app/bundles/course/reference-timelines/components/TimePopup/TimePopupForm.tsx b/client/app/bundles/course/reference-timelines/components/TimePopup/TimePopupForm.tsx
index b7a7309ffa8..bdb650773d4 100644
--- a/client/app/bundles/course/reference-timelines/components/TimePopup/TimePopupForm.tsx
+++ b/client/app/bundles/course/reference-timelines/components/TimePopup/TimePopupForm.tsx
@@ -1,11 +1,11 @@
 import { Controller } from 'react-hook-form';
 import { Button, Collapse } from '@mui/material';
-import moment from 'moment';
 import { date, object, ref } from 'yup';
 
 import FormDateTimePickerField from 'lib/components/form/fields/DateTimePickerField';
 import Form from 'lib/components/form/Form';
 import useTranslation from 'lib/hooks/useTranslation';
+import moment from 'lib/moment';
 import formTranslations from 'lib/translations/form';
 
 import { useLastSaved } from '../../contexts';
diff --git a/client/app/bundles/course/reference-timelines/components/TimelinesStack/AssignableTimeline.tsx b/client/app/bundles/course/reference-timelines/components/TimelinesStack/AssignableTimeline.tsx
index 989b619bf31..1256c169631 100644
--- a/client/app/bundles/course/reference-timelines/components/TimelinesStack/AssignableTimeline.tsx
+++ b/client/app/bundles/course/reference-timelines/components/TimelinesStack/AssignableTimeline.tsx
@@ -1,11 +1,12 @@
 import { useState } from 'react';
-import moment from 'moment';
 import {
   ItemWithTimeData,
   TimeData,
   TimelineData,
 } from 'types/course/referenceTimelines';
 
+import moment from 'lib/moment';
+
 import { useLastSaved } from '../../contexts';
 import { DraftableTimeData } from '../../utils';
 import TimePopup from '../TimePopup';
diff --git a/client/app/bundles/course/reference-timelines/components/TimelinesStack/Timeline.tsx b/client/app/bundles/course/reference-timelines/components/TimelinesStack/Timeline.tsx
index c24c262ccc8..9cb7223ab5b 100644
--- a/client/app/bundles/course/reference-timelines/components/TimelinesStack/Timeline.tsx
+++ b/client/app/bundles/course/reference-timelines/components/TimelinesStack/Timeline.tsx
@@ -1,10 +1,10 @@
 import { ReactNode, useState } from 'react';
 import { Add } from '@mui/icons-material';
 import { Typography } from '@mui/material';
-import moment from 'moment';
 import { TimeData } from 'types/course/referenceTimelines';
 
 import useTranslation from 'lib/hooks/useTranslation';
+import moment from 'lib/moment';
 
 import translations from '../../translations';
 import { DAY_WIDTH_PIXELS, getSecondsFromDays } from '../../utils';
diff --git a/client/app/bundles/course/reference-timelines/contexts/LastSavedContext.tsx b/client/app/bundles/course/reference-timelines/contexts/LastSavedContext.tsx
index c868b65d4ba..873433794ad 100644
--- a/client/app/bundles/course/reference-timelines/contexts/LastSavedContext.tsx
+++ b/client/app/bundles/course/reference-timelines/contexts/LastSavedContext.tsx
@@ -6,7 +6,8 @@ import {
   useContext,
   useState,
 } from 'react';
-import moment from 'moment';
+
+import moment from 'lib/moment';
 
 type FetchStatus = 'loading' | 'success' | 'failure';
 
diff --git a/client/app/bundles/course/reference-timelines/utils.ts b/client/app/bundles/course/reference-timelines/utils.ts
index b10859b880e..9cce968a80b 100644
--- a/client/app/bundles/course/reference-timelines/utils.ts
+++ b/client/app/bundles/course/reference-timelines/utils.ts
@@ -1,6 +1,7 @@
-import moment from 'moment';
 import { TimeData } from 'types/course/referenceTimelines';
 
+import moment from 'lib/moment';
+
 const SECONDS_IN_A_DAY = 86_400 as const;
 
 export const DAY_WIDTH_PIXELS = 30 as const;
diff --git a/client/app/bundles/course/reference-timelines/views/DayView/ItemsSidebar.tsx b/client/app/bundles/course/reference-timelines/views/DayView/ItemsSidebar.tsx
index e0821f4979e..12081c2be64 100644
--- a/client/app/bundles/course/reference-timelines/views/DayView/ItemsSidebar.tsx
+++ b/client/app/bundles/course/reference-timelines/views/DayView/ItemsSidebar.tsx
@@ -1,10 +1,11 @@
 import { Typography } from '@mui/material';
-import moment from 'moment';
 import {
   ItemWithTimeData,
   TimelineData,
 } from 'types/course/referenceTimelines';
 
+import moment from 'lib/moment';
+
 import { getDaysFromSeconds } from '../../utils';
 
 import TimelineSidebarItem from './TimelineSidebarItem';

From a9f62f1348e82d7281f465fb7472e87f98f280df Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Fri, 18 Apr 2025 14:02:07 +0800
Subject: [PATCH 05/36] perf(EditorField): lazy load Ace's language modes

---
 .../LiveFeedbackHistory/LiveFeedbackFiles.tsx |   5 +-
 .../components/answers/Programming/index.jsx  |   3 -
 client/app/initializers.js                    |   1 -
 .../components/core/fields/EditorField.tsx    |  52 ++++++-
 client/app/lib/initializers/ace-editor.js     | 129 ------------------
 5 files changed, 50 insertions(+), 140 deletions(-)
 delete mode 100644 client/app/lib/initializers/ace-editor.js

diff --git a/client/app/bundles/course/assessment/pages/AssessmentStatistics/LiveFeedbackHistory/LiveFeedbackFiles.tsx b/client/app/bundles/course/assessment/pages/AssessmentStatistics/LiveFeedbackHistory/LiveFeedbackFiles.tsx
index 192f1e1c003..f605762135f 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentStatistics/LiveFeedbackHistory/LiveFeedbackFiles.tsx
+++ b/client/app/bundles/course/assessment/pages/AssessmentStatistics/LiveFeedbackHistory/LiveFeedbackFiles.tsx
@@ -1,5 +1,4 @@
-import { FC, useRef, useState } from 'react';
-import ReactAce from 'react-ace';
+import { ComponentRef, FC, useRef, useState } from 'react';
 import { MessageFile } from 'types/course/assessment/submission/liveFeedback';
 
 import ProgrammingFileDownloadChip from 'course/assessment/submission/components/answers/Programming/ProgrammingFileDownloadChip';
@@ -12,7 +11,7 @@ interface Props {
 const LiveFeedbackFiles: FC<Props> = (props) => {
   const { file } = props;
 
-  const editorRef = useRef<ReactAce | null>(null);
+  const editorRef = useRef<ComponentRef<typeof EditorField>>(null);
 
   const [selectedLine, setSelectedLine] = useState(1);
 
diff --git a/client/app/bundles/course/assessment/submission/components/answers/Programming/index.jsx b/client/app/bundles/course/assessment/submission/components/answers/Programming/index.jsx
index 681af3e71ba..27d3d871e3b 100644
--- a/client/app/bundles/course/assessment/submission/components/answers/Programming/index.jsx
+++ b/client/app/bundles/course/assessment/submission/components/answers/Programming/index.jsx
@@ -7,9 +7,6 @@ import { getIsSavingAnswer } from 'course/assessment/submission/selectors/answer
 import { getSubmission } from 'course/assessment/submission/selectors/submissions';
 import { useAppSelector } from 'lib/hooks/store';
 
-import 'ace-builds/src-noconflict/mode-python';
-import 'ace-builds/src-noconflict/theme-github';
-
 import CodaveriFeedbackStatus from '../../../containers/CodaveriFeedbackStatus';
 import ProgrammingImportEditor from '../../../containers/ProgrammingImport/ProgrammingImportEditor';
 import { questionShape } from '../../../propTypes';
diff --git a/client/app/initializers.js b/client/app/initializers.js
index eb9d60a4816..264d98d39d0 100644
--- a/client/app/initializers.js
+++ b/client/app/initializers.js
@@ -1,7 +1,6 @@
 /* eslint-disable global-require */
 
 function loadModules() {
-  require('lib/initializers/ace-editor');
   // Require web font last so that it doesn't block the load of current module.
   require('lib/initializers/webfont');
 }
diff --git a/client/app/lib/components/core/fields/EditorField.tsx b/client/app/lib/components/core/fields/EditorField.tsx
index 953023f138c..39c7fd3809b 100644
--- a/client/app/lib/components/core/fields/EditorField.tsx
+++ b/client/app/lib/components/core/fields/EditorField.tsx
@@ -1,8 +1,15 @@
-import { ComponentProps, ForwardedRef, forwardRef } from 'react';
+import {
+  ComponentProps,
+  ForwardedRef,
+  forwardRef,
+  useEffect,
+  useState,
+} from 'react';
 import AceEditor from 'react-ace';
 import { LanguageMode } from 'types/course/assessment/question/programming';
 
 import 'ace-builds/src-noconflict/theme-github';
+import 'ace-builds/src-noconflict/mode-python';
 
 import './AceEditor.css';
 
@@ -30,11 +37,48 @@ const DEFAULT_FONT_FAMILY = [
   'monospace',
 ].join(',');
 
+/**
+ * Loads Ace's mode scripts on demand for `language` and returns `true` if the mode
+ * has been loaded.
+ *
+ * Remember to update the regex in the `webpackInclude` comment below to bundle any
+ * new languages we support in the future.
+ */
+const useLazyMode = (language: LanguageMode): boolean => {
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+
+    let ignore = false;
+
+    (async (): Promise<void> => {
+      await import(
+        /* webpackInclude: /ace-builds\/src-noconflict\/mode-(c_cpp|python|r|java|javascript)\./ */
+        /* webpackChunkName: "ace-[request]" */
+        `ace-builds/src-noconflict/mode-${language}`
+      );
+
+      if (ignore) return;
+
+      setLoading(false);
+    })();
+
+    return () => {
+      ignore = true;
+    };
+  }, [language]);
+
+  return loading;
+};
+
 const EditorField = forwardRef(
   (props: EditorProps, ref: ForwardedRef<AceEditor>): JSX.Element => {
     const { language, value, disabled, onChange, cursorStart, ...otherProps } =
       props;
 
+    const loading = useLazyMode(language);
+
     return (
       <AceEditor
         ref={ref}
@@ -42,15 +86,15 @@ const EditorField = forwardRef(
          * This "mode" parameter should match one of the file names in this git directory:
          * https://github.com/thlorenz/brace/tree/master/mode
          *
-         * Short-circuit this because during build time, `mode` can be `undefined` and
-         * AceEditor will request for `/webpack/mode-mode.js`, which doesn't exist.
+         * Python is always available. For other modes, we lazy-load them, and when it is
+         * loaded, the editor will simply "snap" to the new mode's syntax highlighting.
          *
          * TODO: This parameter is called by many names in various places in the codebase,
          * such as "language", "editorMode", "languageMode", or "ace_mode".
          * We should standardize to reduce ambiguity, which can be done safely when all relevant
          * components have been moved to TypeScript.
          */
-        mode={language || 'python'}
+        mode={loading || !language ? 'python' : language}
         onChange={onChange}
         theme="github"
         value={value}
diff --git a/client/app/lib/initializers/ace-editor.js b/client/app/lib/initializers/ace-editor.js
deleted file mode 100644
index 38d69c52d0c..00000000000
--- a/client/app/lib/initializers/ace-editor.js
+++ /dev/null
@@ -1,129 +0,0 @@
-const ace = require('ace-builds');
-
-// Load ACE dependencies required for ACE syntax highlighting and theming
-require('ace-builds/src-noconflict/mode-c_cpp');
-require('ace-builds/src-noconflict/mode-java');
-require('ace-builds/src-noconflict/mode-javascript');
-require('ace-builds/src-noconflict/mode-python');
-require('ace-builds/src-noconflict/mode-r');
-require('ace-builds/src-noconflict/theme-github');
-
-/**
- * Builds a new Ace editor container, with the given ID as a suffix.
- *
- * @param {String} id The ID to use as a suffix for the Ace editors.
- * @returns {jQuery}
- */
-function buildEditorContainer(id) {
-  const $editor = $('<div></div>');
-  $editor.css({
-    display: 'none',
-    position: 'relative',
-  });
-  $editor[0].id = `ace_${id}`;
-
-  return $editor;
-}
-
-/**
- * Builds the editor within the given container.
- *
- * @param {jQuery} $container The container to build the editor in.
- * @param {Object} options The options for the editor.
- * @returns {Object} The Ace editor instance.
- */
-function buildEditor($container, options) {
-  const editor = ace.edit($container[0]);
-  editor.setTheme(`ace/theme/${options.theme}`);
-  editor.getSession().setMode(`ace/mode/${options.lang}`);
-
-  editor.setOptions({ readOnly: !!options.readOnly });
-
-  return editor;
-}
-
-/**
- * Builds the Ace configuration object.
- *
- * @param {jQuery} $container The container for the Ace editor.
- * @param {Object} aceEditor The Ace editor created.
- * @returns {Object}
- */
-function buildAceOptions($container, aceEditor) {
-  return {
-    container: $container,
-    editor: aceEditor,
-  };
-}
-
-/**
- * Assigns the Ace configuration to the given element.
- *
- * @param {jQuery} $element The element which has the Ace editor associated with.
- * @param {jQuery} $container The container element for the Ace editor.
- * @param {Object} aceEditor The Ace editor created from `ace.edit`.
- */
-function assignEditor($element, $container, aceEditor) {
-  $element.data('ace', buildAceOptions($container, aceEditor));
-}
-
-/**
- * Finds or builds an editor container from the given jQuery element.
- *
- * @param {jQuery} $element The element to find or build an Ace editor for.
- * @param {Object} options The options to use when building the element.
- * @returns {jQuery}
- */
-function findOrBuildEditorContainer($element, options) {
-  const aceData = $element.data('ace');
-  if (aceData) {
-    return aceData.container;
-  }
-
-  const $container = buildEditorContainer($element[0].id);
-  $container.insertAfter($element);
-  $container.height($element.height());
-
-  const editor = buildEditor($container, options);
-  editor.on('change', () => {
-    $element.val(editor.session.getValue());
-  });
-  editor.session.setValue($element.val());
-  assignEditor($element, $container, editor);
-
-  return $container;
-}
-
-/**
- * Redirects all labels from the old textarea to point to the new editor.
- * @param {jQuery} $from The textarea to redirect the labels from.
- * @param {jQuery} $editor The container for the Ace editor to redirect the labels to.
- */
-function reassignLabelsToAce($from, $editor) {
-  const fromId = $from[0].id;
-  const $editorTextarea = $('textarea.ace_text-input', $editor);
-  $editorTextarea[0].id = `ace_textarea_${fromId}`;
-  $(`label[for="${fromId}"]`).attr('for', $editorTextarea[0].id);
-}
-
-$.fn.ace = function (opt) {
-  const options = $.extend({}, $.fn.ace.defaults, opt);
-  return this.each(function () {
-    const $this = $(this);
-    const elementOptions = $.extend({}, options, {
-      lang: this.lang,
-      readOnly: $this[0].readOnly,
-    });
-    const $editor = findOrBuildEditorContainer($this, elementOptions);
-
-    $this.hide();
-    $editor.show();
-
-    reassignLabelsToAce($this, $editor);
-  });
-};
-
-$.fn.ace.defaults = {
-  theme: 'github',
-  lang: null,
-};

From 35c18372c8c6f0398c312833d38bc8033063de13 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Fri, 18 Apr 2025 14:03:34 +0800
Subject: [PATCH 06/36] perf(VideoPlayer): import only YouTube adapter for
 react-player

---
 .../bundles/course/video/submission/containers/VideoPlayer.jsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/app/bundles/course/video/submission/containers/VideoPlayer.jsx b/client/app/bundles/course/video/submission/containers/VideoPlayer.jsx
index a1c3c8e0b83..cf8332f1a8b 100644
--- a/client/app/bundles/course/video/submission/containers/VideoPlayer.jsx
+++ b/client/app/bundles/course/video/submission/containers/VideoPlayer.jsx
@@ -82,7 +82,7 @@ class VideoPlayer extends Component {
   UNSAFE_componentWillMount() {
     if (VideoPlayer.ReactPlayer !== undefined) return; // Already loaded
 
-    import(/* webpackChunkName: "video" */ 'react-player').then(
+    import(/* webpackChunkName: "video" */ 'react-player/youtube').then(
       (ReactPlayer) => {
         VideoPlayer.ReactPlayer = ReactPlayer.default;
         this.forceUpdate();

From de58b2ffd9abfaea5d3d9fd3a03a6e0a6961103e Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:40:03 +0800
Subject: [PATCH 07/36] perf(AuthenticatedApp): lazy load all routes

---
 client/app/bundles/course/container/index.ts |    1 -
 client/app/routers/AuthenticatedApp.tsx      | 1735 ++++++++++++++----
 2 files changed, 1405 insertions(+), 331 deletions(-)
 delete mode 100644 client/app/bundles/course/container/index.ts

diff --git a/client/app/bundles/course/container/index.ts b/client/app/bundles/course/container/index.ts
deleted file mode 100644
index 379f1d945fc..00000000000
--- a/client/app/bundles/course/container/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as CourseContainer } from './CourseContainer';
diff --git a/client/app/routers/AuthenticatedApp.tsx b/client/app/routers/AuthenticatedApp.tsx
index bdf3f382ecf..ae3e58bc9ed 100644
--- a/client/app/routers/AuthenticatedApp.tsx
+++ b/client/app/routers/AuthenticatedApp.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable sonarjs/no-duplicate-string */
 import { memo } from 'react';
 import { withAuthenticationRequired } from 'react-oidc-context';
@@ -8,145 +9,6 @@ import {
   RouterProvider,
 } from 'react-router-dom';
 
-import GlobalAnnouncementIndex from 'bundles/announcements/GlobalAnnouncementIndex';
-import DashboardPage from 'bundles/common/DashboardPage';
-import AchievementShow from 'bundles/course/achievement/pages/AchievementShow';
-import AchievementsIndex from 'bundles/course/achievement/pages/AchievementsIndex';
-import SettingsNavigation from 'bundles/course/admin/components/SettingsNavigation';
-import AnnouncementSettings from 'bundles/course/admin/pages/AnnouncementsSettings';
-import AssessmentSettings from 'bundles/course/admin/pages/AssessmentSettings';
-import CodaveriSettings from 'bundles/course/admin/pages/CodaveriSettings';
-import CommentsSettings from 'bundles/course/admin/pages/CommentsSettings';
-import ComponentSettings from 'bundles/course/admin/pages/ComponentSettings';
-import CourseSettings from 'bundles/course/admin/pages/CourseSettings';
-import ForumsSettings from 'bundles/course/admin/pages/ForumsSettings';
-import LeaderboardSettings from 'bundles/course/admin/pages/LeaderboardSettings';
-import LessonPlanSettings from 'bundles/course/admin/pages/LessonPlanSettings';
-import MaterialsSettings from 'bundles/course/admin/pages/MaterialsSettings';
-import NotificationSettings from 'bundles/course/admin/pages/NotificationSettings';
-import RagWiseSettings from 'bundles/course/admin/pages/RagWiseSettings';
-import SidebarSettings from 'bundles/course/admin/pages/SidebarSettings';
-import VideosSettings from 'bundles/course/admin/pages/VideosSettings';
-import AnnouncementsIndex from 'bundles/course/announcements/pages/AnnouncementsIndex';
-import AssessmentEdit from 'bundles/course/assessment/pages/AssessmentEdit';
-import AssessmentMonitoring from 'bundles/course/assessment/pages/AssessmentMonitoring';
-import AssessmentShow from 'bundles/course/assessment/pages/AssessmentShow';
-import AssessmentsIndex from 'bundles/course/assessment/pages/AssessmentsIndex';
-import AssessmentStatistics from 'bundles/course/assessment/pages/AssessmentStatistics';
-import EditForumPostResponsePage from 'bundles/course/assessment/question/forum-post-responses/EditForumPostResponsePage';
-import NewForumPostResponsePage from 'bundles/course/assessment/question/forum-post-responses/NewForumPostResponsePage';
-import EditMcqMrqPage from 'bundles/course/assessment/question/multiple-responses/EditMcqMrqPage';
-import NewMcqMrqPage from 'bundles/course/assessment/question/multiple-responses/NewMcqMrqPage';
-import EditProgrammingQuestionPage from 'bundles/course/assessment/question/programming/EditProgrammingQuestionPage';
-import NewProgrammingQuestionPage from 'bundles/course/assessment/question/programming/NewProgrammingQuestionPage';
-import ScribingQuestion from 'bundles/course/assessment/question/scribing/ScribingQuestion';
-import EditTextResponse from 'bundles/course/assessment/question/text-responses/EditTextResponsePage';
-import NewTextResponse from 'bundles/course/assessment/question/text-responses/NewTextResponsePage';
-import EditVoicePage from 'bundles/course/assessment/question/voice-responses/EditVoicePage';
-import NewVoicePage from 'bundles/course/assessment/question/voice-responses/NewVoicePage';
-import AssessmentSessionNew from 'bundles/course/assessment/sessions/pages/AssessmentSessionNew';
-import SkillsIndex from 'bundles/course/assessment/skills/pages/SkillsIndex';
-import LogsIndex from 'bundles/course/assessment/submission/pages/LogsIndex';
-import SubmissionEditIndex from 'bundles/course/assessment/submission/pages/SubmissionEditIndex';
-import AssessmentSubmissionsIndex from 'bundles/course/assessment/submission/pages/SubmissionsIndex';
-import SubmissionsIndex from 'bundles/course/assessment/submissions/SubmissionsIndex';
-import CourseShow from 'bundles/course/courses/pages/CourseShow';
-import CommentIndex from 'bundles/course/discussion/topics/pages/CommentIndex';
-import Duplication from 'bundles/course/duplication/pages/Duplication';
-import UserRequests from 'bundles/course/enrol-requests/pages/UserRequests';
-import ExperiencePointsIndex from 'bundles/course/experience-points';
-import ForumShow from 'bundles/course/forum/pages/ForumShow';
-import ForumsIndex from 'bundles/course/forum/pages/ForumsIndex';
-import ForumTopicShow from 'bundles/course/forum/pages/ForumTopicShow';
-import GroupIndex from 'bundles/course/group/pages/GroupIndex';
-import GroupShow from 'bundles/course/group/pages/GroupShow';
-import LeaderboardIndex from 'bundles/course/leaderboard/pages/LeaderboardIndex';
-import LearningMap from 'bundles/course/learning-map/containers/LearningMap';
-import LessonPlanLayout from 'bundles/course/lesson-plan/containers/LessonPlanLayout';
-import LessonPlanEdit from 'bundles/course/lesson-plan/pages/LessonPlanEdit';
-import LessonPlanShow from 'bundles/course/lesson-plan/pages/LessonPlanShow';
-import LevelsIndex from 'bundles/course/level/pages/LevelsIndex';
-import DownloadingFilePage from 'bundles/course/material/files/DownloadingFilePage';
-import ErrorRetrievingFilePage from 'bundles/course/material/files/ErrorRetrievingFilePage';
-import FolderShow from 'bundles/course/material/folders/pages/FolderShow';
-import TimelineDesigner from 'bundles/course/reference-timelines/TimelineDesigner';
-import ResponseEdit from 'bundles/course/survey/pages/ResponseEdit';
-import ResponseIndex from 'bundles/course/survey/pages/ResponseIndex';
-import ResponseShow from 'bundles/course/survey/pages/ResponseShow';
-import SurveyIndex from 'bundles/course/survey/pages/SurveyIndex';
-import SurveyResults from 'bundles/course/survey/pages/SurveyResults';
-import SurveyShow from 'bundles/course/survey/pages/SurveyShow';
-import UserEmailSubscriptions from 'bundles/course/user-email-subscriptions/UserEmailSubscriptions';
-import InvitationsIndex from 'bundles/course/user-invitations/pages/InvitationsIndex';
-import InviteUsers from 'bundles/course/user-invitations/pages/InviteUsers';
-import ExperiencePointsRecords from 'bundles/course/users/pages/ExperiencePointsRecords';
-import ManageStaff from 'bundles/course/users/pages/ManageStaff';
-import ManageStudents from 'bundles/course/users/pages/ManageStudents';
-import PersonalTimes from 'bundles/course/users/pages/PersonalTimes';
-import PersonalTimesShow from 'bundles/course/users/pages/PersonalTimesShow';
-import CourseUserShow from 'bundles/course/users/pages/UserShow';
-import UsersIndex from 'bundles/course/users/pages/UsersIndex';
-import VideoShow from 'bundles/course/video/pages/VideoShow';
-import VideosIndex from 'bundles/course/video/pages/VideosIndex';
-import VideoSubmissionEdit from 'bundles/course/video/submission/pages/VideoSubmissionEdit';
-import VideoSubmissionShow from 'bundles/course/video/submission/pages/VideoSubmissionShow';
-import VideoSubmissionsIndex from 'bundles/course/video/submission/pages/VideoSubmissionsIndex';
-import UserVideoSubmissionsIndex from 'bundles/course/video-submissions/pages/UserVideoSubmissionsIndex';
-import AdminNavigator from 'bundles/system/admin/admin/AdminNavigator';
-import AnnouncementIndex from 'bundles/system/admin/admin/pages/AnnouncementsIndex';
-import CourseIndex from 'bundles/system/admin/admin/pages/CoursesIndex';
-import InstancesIndex from 'bundles/system/admin/admin/pages/InstancesIndex';
-import UserIndex from 'bundles/system/admin/admin/pages/UsersIndex';
-import InstanceAdminNavigator from 'bundles/system/admin/instance/instance/InstanceAdminNavigator';
-import InstanceAnnouncementsIndex from 'bundles/system/admin/instance/instance/pages/InstanceAnnouncementsIndex';
-import InstanceComponentsIndex from 'bundles/system/admin/instance/instance/pages/InstanceComponentsIndex';
-import InstanceCoursesIndex from 'bundles/system/admin/instance/instance/pages/InstanceCoursesIndex';
-import InstanceUserRoleRequestsIndex from 'bundles/system/admin/instance/instance/pages/InstanceUserRoleRequestsIndex';
-import InstanceUsersIndex from 'bundles/system/admin/instance/instance/pages/InstanceUsersIndex';
-import InstanceUsersInvitations from 'bundles/system/admin/instance/instance/pages/InstanceUsersInvitations';
-import InstanceUsersInvite from 'bundles/system/admin/instance/instance/pages/InstanceUsersInvite';
-import AccountSettings from 'bundles/user/AccountSettings';
-import ConfirmEmailPage from 'bundles/users/pages/ConfirmEmailPage';
-import UserShow from 'bundles/users/pages/UserShow';
-import { achievementHandle } from 'course/achievement/handles';
-import StoriesSettings from 'course/admin/pages/StoriesSettings';
-import { announcementsHandle } from 'course/announcements/handles';
-import assessmentAttemptLoader from 'course/assessment/attemptLoader';
-import {
-  assessmentHandle,
-  assessmentsHandle,
-  questionHandle,
-} from 'course/assessment/handles';
-import GenerateProgrammingQuestionPage from 'course/assessment/pages/AssessmentGenerate/GenerateProgrammingQuestionPage';
-import QuestionFormOutlet from 'course/assessment/question/components/QuestionFormOutlet';
-import { CourseContainer } from 'course/container';
-import { commentHandle } from 'course/discussion/topics/handles';
-import {
-  forumHandle,
-  forumNameHandle,
-  forumTopicHandle,
-} from 'course/forum/handles';
-import { leaderboardHandle } from 'course/leaderboard/handles';
-import { folderHandle } from 'course/material/folders/handles';
-import materialLoader from 'course/material/materialLoader';
-import { videoWatchHistoryHandle } from 'course/statistics/handles';
-import StatisticsIndex from 'course/statistics/pages/StatisticsIndex';
-import AssessmentsStatistics from 'course/statistics/pages/StatisticsIndex/assessments/AssessmentsStatistics';
-import CourseStatistics from 'course/statistics/pages/StatisticsIndex/course/CourseStatistics';
-import StaffStatistics from 'course/statistics/pages/StatisticsIndex/staff/StaffStatistics';
-import StudentsStatistics from 'course/statistics/pages/StatisticsIndex/students/StudentsStatistics';
-import LearnRedirect from 'course/stories/components/LearnRedirect';
-import LearnPage from 'course/stories/pages/LearnPage';
-import MissionControlPage from 'course/stories/pages/MissionControlPage';
-import { surveyHandle, surveyResponseHandle } from 'course/survey/handles';
-import {
-  courseUserHandle,
-  courseUserPersonalizedTimelineHandle,
-  manageUserHandles,
-} from 'course/users/handles';
-import videoAttemptLoader from 'course/video/attemptLoader';
-import { videoHandle, videosHandle } from 'course/video/handles';
-import CourselessContainer from 'lib/containers/CourselessContainer';
 import useTranslation, { Translated } from 'lib/hooks/useTranslation';
 
 import { reservedRoutes } from './redirects';
@@ -156,61 +18,187 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
   createAppRouter([
     {
       path: 'courses/:courseId',
-      element: <CourseContainer />,
-      loader: CourseContainer.loader,
-      handle: CourseContainer.handle,
+      lazy: async () => {
+        const CourseContainer = (
+          await import(
+            /* webpackChunkName: 'CourseContainer' */
+            'course/container/CourseContainer'
+          )
+        ).default;
+
+        return {
+          Component: CourseContainer,
+          handle: CourseContainer.handle,
+          loader: CourseContainer.loader,
+        };
+      },
       shouldRevalidate: ({ currentParams, nextParams }): boolean => {
         return currentParams.courseId !== nextParams.courseId;
       },
       children: [
         {
           index: true,
-          element: (
-            <LearnRedirect otherwiseRender={<CourseShow />} to="learn" />
-          ),
+          lazy: async () => {
+            const [CourseShow, LearnRedirect] = await Promise.all([
+              import(
+                /* webpackChunkName: 'CourseShow' */
+                'course/courses/pages/CourseShow'
+              ).then((module) => module.default),
+              import(
+                /* webpackChunkName: 'LearnRedirect' */
+                'course/stories/components/LearnRedirect'
+              ).then((module) => module.default),
+            ]);
+
+            return {
+              element: (
+                <LearnRedirect otherwiseRender={<CourseShow />} to="learn" />
+              ),
+            };
+          },
         },
         {
           path: 'home',
-          element: <CourseShow />,
+          lazy: async () => ({
+            Component: (
+              await import(
+                /* webpackChunkName: 'CourseShow' */
+                'course/courses/pages/CourseShow'
+              )
+            ).default,
+          }),
         },
         {
           path: 'learn',
-          handle: LearnPage.handle,
-          element: <LearnPage />,
+          lazy: async () => {
+            const LearnPage = (
+              await import(
+                /* webpackChunkName: 'LearnPage' */
+                'course/stories/pages/LearnPage'
+              )
+            ).default;
+
+            return {
+              Component: LearnPage,
+              handle: LearnPage.handle,
+            };
+          },
         },
         {
           path: 'mission_control',
-          handle: MissionControlPage.handle,
-          element: <MissionControlPage />,
+          lazy: async () => {
+            const MissionControlPage = (
+              await import(
+                /* webpackChunkName: 'MissionControlPage' */
+                'course/stories/pages/MissionControlPage'
+              )
+            ).default;
+
+            return {
+              Component: MissionControlPage,
+              handle: MissionControlPage.handle,
+            };
+          },
         },
         {
           path: 'timelines',
-          handle: TimelineDesigner.handle,
-          element: <TimelineDesigner />,
+          lazy: async () => {
+            const TimelineDesigner = (
+              await import(
+                /* webpackChunkName: 'TimelineDesigner' */
+                'course/reference-timelines/TimelineDesigner'
+              )
+            ).default;
+
+            return {
+              Component: TimelineDesigner,
+              handle: TimelineDesigner.handle,
+            };
+          },
         },
         {
           path: 'announcements',
-          handle: announcementsHandle,
-          element: <AnnouncementsIndex />,
+          lazy: async () => {
+            const [announcementsHandle, AnnouncementsIndex] = await Promise.all(
+              [
+                import(
+                  /* webpackChunkName: 'announcementsHandle' */
+                  'course/announcements/handles'
+                ).then((module) => module.announcementsHandle),
+                import(
+                  /* webpackChunkName: 'AnnouncementsIndex' */
+                  'course/announcements/pages/AnnouncementsIndex'
+                ).then((module) => module.default),
+              ],
+            );
+
+            return {
+              Component: AnnouncementsIndex,
+              handle: announcementsHandle,
+            };
+          },
         },
         {
           path: 'comments',
-          handle: commentHandle,
-          element: <CommentIndex />,
+          lazy: async () => {
+            const [commentHandle, CommentIndex] = await Promise.all([
+              import(
+                /* webpackChunkName: 'commentHandle' */
+                'course/discussion/topics/handles'
+              ).then((module) => module.commentHandle),
+              import(
+                /* webpackChunkName: 'CommentIndex' */
+                'course/discussion/topics/pages/CommentIndex'
+              ).then((module) => module.default),
+            ]);
+
+            return {
+              Component: CommentIndex,
+              handle: commentHandle,
+            };
+          },
         },
         {
           path: 'leaderboard',
-          handle: leaderboardHandle,
-          element: <LeaderboardIndex />,
+          lazy: async () => {
+            const [leaderboardHandle, LeaderboardIndex] = await Promise.all([
+              import(
+                /* webpackChunkName: 'leaderboardHandle' */
+                'course/leaderboard/handles'
+              ).then((module) => module.leaderboardHandle),
+              import(
+                /* webpackChunkName: 'LeaderboardIndex' */
+                'course/leaderboard/pages/LeaderboardIndex'
+              ).then((module) => module.default),
+            ]);
+
+            return {
+              Component: LeaderboardIndex,
+              handle: leaderboardHandle,
+            };
+          },
         },
         {
           path: 'learning_map',
-          handle: LearningMap.handle,
-          element: <LearningMap />,
+          lazy: async () => ({
+            Component: (
+              await import(
+                /* webpackChunkName: 'LearningMap' */
+                'course/learning-map/containers/LearningMap'
+              )
+            ).default,
+          }),
         },
         {
           path: 'materials/folders',
-          handle: folderHandle,
+          lazy: async () => ({
+            handle: (
+              await import(
+                /* webpackChunkName: 'folderHandle' */
+                'course/material/folders/handles'
+              )
+            ).folderHandle,
+          }),
           // `:folderId` must be split this way so that `folderHandle` is matched
           // to the stable (non-changing) match of `/materials/folders`. This allows
           // the crumbs in the Workbin to not disappear when revalidated by the
@@ -218,20 +206,57 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
           children: [
             {
               index: true,
-              element: <FolderShow />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'FolderShow' */
+                    'course/material/folders/pages/FolderShow'
+                  )
+                ).default,
+              }),
             },
             {
               path: ':folderId',
               children: [
                 {
                   index: true,
-                  element: <FolderShow />,
+                  lazy: async () => ({
+                    Component: (
+                      await import(
+                        /* webpackChunkName: 'FolderShow' */
+                        'course/material/folders/pages/FolderShow'
+                      )
+                    ).default,
+                  }),
                 },
                 {
                   path: 'files/:materialId',
-                  loader: materialLoader,
-                  errorElement: <ErrorRetrievingFilePage />,
-                  element: <DownloadingFilePage />,
+                  lazy: async () => {
+                    const [
+                      materialLoader,
+                      ErrorRetrievingFilePage,
+                      DownloadingFilePage,
+                    ] = await Promise.all([
+                      import(
+                        /* webpackChunkName: 'materialLoader' */
+                        'course/material/materialLoader'
+                      ).then((module) => module.default),
+                      import(
+                        /* webpackChunkName: 'ErrorRetrievingFilePage' */
+                        'course/material/files/ErrorRetrievingFilePage'
+                      ).then((module) => module.default),
+                      import(
+                        /* webpackChunkName: 'DownloadingFilePage' */
+                        'course/material/files/DownloadingFilePage'
+                      ).then((module) => module.default),
+                    ]);
+
+                    return {
+                      loader: materialLoader,
+                      errorElement: <ErrorRetrievingFilePage />,
+                      element: <DownloadingFilePage />,
+                    };
+                  },
                 },
               ],
             },
@@ -239,237 +264,691 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
         },
         {
           path: 'levels',
-          handle: LevelsIndex.handle,
-          element: <LevelsIndex />,
+          lazy: async () => {
+            const LevelsIndex = (
+              await import(
+                /* webpackChunkName: 'LevelsIndex' */
+                'course/level/pages/LevelsIndex'
+              )
+            ).default;
+
+            return {
+              Component: LevelsIndex,
+              handle: LevelsIndex.handle,
+            };
+          },
         },
         {
           path: 'statistics',
-          handle: StatisticsIndex.handle,
-          element: <StatisticsIndex />,
+          lazy: async () => {
+            const StatisticsIndex = (
+              await import(
+                /* webpackChunkName: 'StatisticsIndex' */
+                'course/statistics/pages/StatisticsIndex'
+              )
+            ).default;
+
+            return {
+              Component: StatisticsIndex,
+              handle: StatisticsIndex.handle,
+            };
+          },
           children: [
             {
               path: 'students',
-              element: <StudentsStatistics />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'StudentsStatistics' */
+                    'course/statistics/pages/StatisticsIndex/students/StudentsStatistics'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'staff',
-              element: <StaffStatistics />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'StaffStatistics' */
+                    'course/statistics/pages/StatisticsIndex/staff/StaffStatistics'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'course',
-              element: <CourseStatistics />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'CourseStatistics' */
+                    'course/statistics/pages/StatisticsIndex/course/CourseStatistics'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'assessments',
-              element: <AssessmentsStatistics />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'CourseStatistics' */
+                    'course/statistics/pages/StatisticsIndex/assessments/AssessmentsStatistics'
+                  )
+                ).default,
+              }),
             },
           ],
         },
         {
           path: 'duplication',
-          handle: Duplication.handle,
-          element: <Duplication />,
+          lazy: async () => {
+            const Duplication = (
+              await import(
+                /* webpackChunkName: 'Duplication' */
+                'course/duplication/pages/Duplication'
+              )
+            ).default;
+
+            return {
+              Component: Duplication,
+              handle: Duplication.handle,
+            };
+          },
         },
         {
           path: 'enrol_requests',
-          handle: manageUserHandles.enrolRequests,
-          element: <UserRequests />,
+          lazy: async () => {
+            const [manageUserHandles, UserRequests] = await Promise.all([
+              import(
+                /* webpackChunkName: 'userHandles' */
+                'course/users/handles'
+              ).then((module) => module.manageUserHandles),
+              import(
+                /* webpackChunkName: 'UserRequests' */
+                'course/enrol-requests/pages/UserRequests'
+              ).then((module) => module.default),
+            ]);
+
+            return {
+              Component: UserRequests,
+              handle: manageUserHandles.enrolRequests,
+            };
+          },
         },
         {
           path: 'user_invitations',
-          handle: manageUserHandles.invitations,
-          element: <InvitationsIndex />,
+          lazy: async () => {
+            const [manageUserHandles, UserRequests] = await Promise.all([
+              import(
+                /* webpackChunkName: 'userHandles' */
+                'course/users/handles'
+              ).then((module) => module.manageUserHandles),
+              import(
+                /* webpackChunkName: 'InvitationsIndex' */
+                'course/user-invitations/pages/InvitationsIndex'
+              ).then((module) => module.default),
+            ]);
+
+            return {
+              Component: UserRequests,
+              handle: manageUserHandles.invitations,
+            };
+          },
         },
         {
           path: 'students',
-          handle: manageUserHandles.students,
-          element: <ManageStudents />,
+          lazy: async () => {
+            const [manageUserHandles, UserRequests] = await Promise.all([
+              import(
+                /* webpackChunkName: 'userHandles' */
+                'course/users/handles'
+              ).then((module) => module.manageUserHandles),
+              import(
+                /* webpackChunkName: 'ManageStudents' */
+                'course/users/pages/ManageStudents'
+              ).then((module) => module.default),
+            ]);
+
+            return {
+              Component: UserRequests,
+              handle: manageUserHandles.students,
+            };
+          },
         },
         {
           path: 'staff',
-          handle: manageUserHandles.staff,
-          element: <ManageStaff />,
+          lazy: async () => {
+            const [manageUserHandles, UserRequests] = await Promise.all([
+              import(
+                /* webpackChunkName: 'userHandles' */
+                'course/users/handles'
+              ).then((module) => module.manageUserHandles),
+              import(
+                /* webpackChunkName: 'ManageStaff' */
+                'course/users/pages/ManageStaff'
+              ).then((module) => module.default),
+            ]);
+
+            return {
+              Component: UserRequests,
+              handle: manageUserHandles.staff,
+            };
+          },
         },
         {
           path: 'lesson_plan',
-          // @ts-ignore `connect` throws error when cannot find `store` as direct parent
-          element: <LessonPlanLayout />,
-          handle: LessonPlanLayout.handle,
+          lazy: async () => {
+            const LessonPlanLayout = (
+              await import(
+                /* webpackChunkName: 'LessonPlanLayout' */
+                'course/lesson-plan/containers/LessonPlanLayout'
+              )
+            ).default;
+
+            return {
+              // @ts-ignore `connect` throws error when cannot find `store` as direct parent
+              element: <LessonPlanLayout />,
+              handle: LessonPlanLayout.handle,
+            };
+          },
           children: [
             {
               index: true,
-              element: <LessonPlanShow />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'LessonPlanShow' */
+                    'course/lesson-plan/pages/LessonPlanShow'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'edit',
-              element: <LessonPlanEdit />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'LessonPlanEdit' */
+                    'course/lesson-plan/pages/LessonPlanEdit'
+                  )
+                ).default,
+              }),
             },
           ],
         },
         {
           path: 'experience_points_records',
-          handle: ExperiencePointsIndex.handle,
-          element: <ExperiencePointsIndex />,
+          lazy: async () => {
+            const ExperiencePointsIndex = (
+              await import(
+                /* webpackChunkName: 'ExperiencePointsIndex' */
+                'course/experience-points'
+              )
+            ).default;
+
+            return {
+              Component: ExperiencePointsIndex,
+              handle: ExperiencePointsIndex.handle,
+            };
+          },
         },
         {
           path: 'users',
           children: [
             {
               index: true,
-              handle: UsersIndex.handle,
-              element: <UsersIndex />,
+              lazy: async () => {
+                const UsersIndex = (
+                  await import(
+                    /* webpackChunkName: 'UsersIndex' */
+                    'course/users/pages/UsersIndex'
+                  )
+                ).default;
+
+                return {
+                  Component: UsersIndex,
+                  handle: UsersIndex.handle,
+                };
+              },
             },
             {
               path: 'personal_times',
-              handle: manageUserHandles.personalizedTimelines,
-              element: <PersonalTimes />,
+              lazy: async () => {
+                const [manageUserHandles, PersonalTimes] = await Promise.all([
+                  import(
+                    /* webpackChunkName: 'userHandles' */
+                    'course/users/handles'
+                  ).then((module) => module.manageUserHandles),
+                  import(
+                    /* webpackChunkName: 'PersonalTimes' */
+                    'course/users/pages/PersonalTimes'
+                  ).then((module) => module.default),
+                ]);
+
+                return {
+                  Component: PersonalTimes,
+                  handle: manageUserHandles.personalizedTimelines,
+                };
+              },
             },
             {
               path: 'invite',
-              handle: manageUserHandles.inviteUsers,
-              element: <InviteUsers />,
+              lazy: async () => {
+                const [manageUserHandles, InviteUsers] = await Promise.all([
+                  import(
+                    /* webpackChunkName: 'userHandles' */
+                    'course/users/handles'
+                  ).then((module) => module.manageUserHandles),
+                  import(
+                    /* webpackChunkName: 'InviteUsers' */
+                    'course/user-invitations/pages/InviteUsers'
+                  ).then((module) => module.default),
+                ]);
+
+                return {
+                  Component: InviteUsers,
+                  handle: manageUserHandles.inviteUsers,
+                };
+              },
             },
             {
               path: ':userId',
-              handle: courseUserHandle,
+              lazy: async () => ({
+                handle: await import(
+                  /* webpackChunkName: 'userHandles' */
+                  'course/users/handles'
+                ).then((module) => module.courseUserHandle),
+              }),
               children: [
                 {
                   index: true,
-                  element: <CourseUserShow />,
+                  lazy: async () => ({
+                    Component: (
+                      await import(
+                        /* webpackChunkName: 'CourseUserShow' */
+                        'course/users/pages/UserShow'
+                      )
+                    ).default,
+                  }),
                 },
                 {
                   path: 'experience_points_records',
-                  handle: ExperiencePointsRecords.handle,
-                  element: <ExperiencePointsRecords />,
+                  lazy: async () => {
+                    const ExperiencePointsRecords = (
+                      await import(
+                        /* webpackChunkName: 'ExperiencePointsRecords' */
+                        'course/users/pages/ExperiencePointsRecords'
+                      )
+                    ).default;
+
+                    return {
+                      Component: ExperiencePointsRecords,
+                      handle: ExperiencePointsRecords.handle,
+                    };
+                  },
                 },
               ],
             },
             {
               path: ':userId/personal_times',
-              handle: courseUserPersonalizedTimelineHandle,
-              element: <PersonalTimesShow />,
+              lazy: async () => {
+                const [courseUserPersonalizedTimelineHandle, InviteUsers] =
+                  await Promise.all([
+                    import(
+                      /* webpackChunkName: 'userHandles' */
+                      'course/users/handles'
+                    ).then(
+                      (module) => module.courseUserPersonalizedTimelineHandle,
+                    ),
+                    import(
+                      /* webpackChunkName: 'PersonalTimesShow' */
+                      'course/users/pages/PersonalTimesShow'
+                    ).then((module) => module.default),
+                  ]);
+
+                return {
+                  Component: InviteUsers,
+                  handle: courseUserPersonalizedTimelineHandle,
+                };
+              },
             },
             {
               path: ':userId/video_submissions',
-              handle: videoWatchHistoryHandle,
-              element: <UserVideoSubmissionsIndex />,
+              lazy: async () => {
+                const [videoWatchHistoryHandle, UserVideoSubmissionsIndex] =
+                  await Promise.all([
+                    import(
+                      /* webpackChunkName: 'videoWatchHistoryHandle' */
+                      'course/statistics/handles'
+                    ).then((module) => module.videoWatchHistoryHandle),
+                    import(
+                      /* webpackChunkName: 'UserVideoSubmissionsIndex' */
+                      'course/video-submissions/pages/UserVideoSubmissionsIndex'
+                    ).then((module) => module.default),
+                  ]);
+
+                return {
+                  Component: UserVideoSubmissionsIndex,
+                  handle: videoWatchHistoryHandle,
+                };
+              },
             },
             {
               path: ':userId/manage_email_subscription',
-              handle: UserEmailSubscriptions.handle,
-              element: <UserEmailSubscriptions />,
+              lazy: async () => {
+                const UserEmailSubscriptions = (
+                  await import(
+                    /* webpackChunkName: 'UserEmailSubscriptions' */
+                    'course/user-email-subscriptions/UserEmailSubscriptions'
+                  )
+                ).default;
+
+                return {
+                  Component: UserEmailSubscriptions,
+                  handle: UserEmailSubscriptions.handle,
+                };
+              },
             },
           ],
         },
         {
           path: 'admin',
-          loader: SettingsNavigation.loader,
-          handle: SettingsNavigation.handle,
-          element: <SettingsNavigation />,
+          lazy: async () => {
+            const SettingsNavigation = (
+              await import(
+                /* webpackChunkName: 'SettingsNavigation' */
+                'course/admin/components/SettingsNavigation'
+              )
+            ).default;
+
+            return {
+              Component: SettingsNavigation,
+              handle: SettingsNavigation.handle,
+              loader: SettingsNavigation.loader,
+            };
+          },
           children: [
             {
               index: true,
-              element: <CourseSettings />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'CourseSettings' */
+                    'course/admin/pages/CourseSettings'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'components',
-              element: <ComponentSettings />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'ComponentSettings' */
+                    'course/admin/pages/ComponentSettings'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'sidebar',
-              element: <SidebarSettings />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'SidebarSettings' */
+                    'course/admin/pages/SidebarSettings'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'notifications',
-              element: <NotificationSettings />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'NotificationSettings' */
+                    'course/admin/pages/NotificationSettings'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'announcements',
-              element: <AnnouncementSettings />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'AnnouncementsSettings' */
+                    'course/admin/pages/AnnouncementsSettings'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'assessments',
-              element: <AssessmentSettings />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'AssessmentSettings' */
+                    'course/admin/pages/AssessmentSettings'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'materials',
-              element: <MaterialsSettings />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'MaterialsSettings' */
+                    'course/admin/pages/MaterialsSettings'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'forums',
-              element: <ForumsSettings />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'ForumsSettings' */
+                    'course/admin/pages/ForumsSettings'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'leaderboard',
-              element: <LeaderboardSettings />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'LeaderboardSettings' */
+                    'course/admin/pages/LeaderboardSettings'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'comments',
-              element: <CommentsSettings />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'CommentsSettings' */
+                    'course/admin/pages/CommentsSettings'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'videos',
-              element: <VideosSettings />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'VideosSettings' */
+                    'course/admin/pages/VideosSettings'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'lesson_plan',
-              element: <LessonPlanSettings />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'LessonPlanSettings' */
+                    'course/admin/pages/LessonPlanSettings'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'codaveri',
-              element: <CodaveriSettings />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'CodaveriSettings' */
+                    'course/admin/pages/CodaveriSettings'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'stories',
-              element: <StoriesSettings />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'StoriesSettings' */
+                    'course/admin/pages/StoriesSettings'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'rag_wise',
-              element: <RagWiseSettings />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'RagWiseSettings' */
+                    'course/admin/pages/RagWiseSettings'
+                  )
+                ).default,
+              }),
             },
           ],
         },
         {
           path: 'surveys',
-          handle: SurveyIndex.handle,
+          lazy: async () => ({
+            handle: (
+              await import(
+                /* webpackChunkName: 'SurveyIndex' */
+                'course/survey/pages/SurveyIndex'
+              )
+            ).default.handle,
+          }),
           children: [
             {
               index: true,
-              element: <SurveyIndex />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'SurveyIndex' */
+                    'course/survey/pages/SurveyIndex'
+                  )
+                ).default,
+              }),
             },
             {
               path: ':surveyId',
-              handle: surveyHandle,
+              lazy: async () => ({
+                handle: (
+                  await import(
+                    /* webpackChunkName: 'surveyHandles' */
+                    'course/survey/handles'
+                  )
+                ).surveyHandle,
+              }),
               children: [
                 {
                   index: true,
-                  element: <SurveyShow />,
+                  lazy: async () => ({
+                    Component: (
+                      await import(
+                        /* webpackChunkName: 'SurveyShow' */
+                        'course/survey/pages/SurveyShow'
+                      )
+                    ).default,
+                  }),
                 },
                 {
                   path: 'results',
-                  handle: SurveyResults.handle,
-                  element: <SurveyResults />,
+                  lazy: async () => {
+                    const SurveyResults = (
+                      await import(
+                        /* webpackChunkName: 'SurveyResults' */
+                        'course/survey/pages/SurveyResults'
+                      )
+                    ).default;
+
+                    return {
+                      Component: SurveyResults,
+                      handle: SurveyResults.handle,
+                    };
+                  },
                 },
                 {
                   path: 'responses',
                   children: [
                     {
                       index: true,
-                      handle: ResponseIndex.handle,
-                      element: <ResponseIndex />,
+                      lazy: async () => {
+                        const ResponseIndex = (
+                          await import(
+                            /* webpackChunkName: 'ResponseIndex' */
+                            'course/survey/pages/ResponseIndex'
+                          )
+                        ).default;
+
+                        return {
+                          Component: ResponseIndex,
+                          handle: ResponseIndex.handle,
+                        };
+                      },
                     },
                     {
                       path: ':responseId',
                       children: [
                         {
                           index: true,
-                          handle: surveyResponseHandle,
-                          element: <ResponseShow />,
+                          lazy: async () => {
+                            const [surveyResponseHandle, ResponseShow] =
+                              await Promise.all([
+                                import(
+                                  /* webpackChunkName: 'surveyHandles' */
+                                  'course/survey/handles'
+                                ).then((module) => module.surveyResponseHandle),
+                                import(
+                                  /* webpackChunkName: 'ResponseShow' */
+                                  'course/survey/pages/ResponseShow'
+                                ).then((module) => module.default),
+                              ]);
+
+                            return {
+                              Component: ResponseShow,
+                              handle: surveyResponseHandle,
+                            };
+                          },
                         },
                         {
                           path: 'edit',
-                          handle: ResponseEdit.handle,
-                          element: <ResponseEdit />,
+                          lazy: async () => ({
+                            Component: (
+                              await import(
+                                /* webpackChunkName: 'ResponseEdit' */
+                                'course/survey/pages/ResponseEdit'
+                              )
+                            ).default,
+                          }),
                         },
                       ],
                     },
@@ -481,50 +960,128 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
         },
         {
           path: 'groups',
-          element: <GroupIndex />,
-          handle: GroupIndex.handle,
+          lazy: async () => {
+            const GroupIndex = (
+              await import(
+                /* webpackChunkName: 'GroupIndex' */
+                'course/group/pages/GroupIndex'
+              )
+            ).default;
+
+            return {
+              Component: GroupIndex,
+              handle: GroupIndex.handle,
+            };
+          },
           children: [
             {
               path: ':groupCategoryId',
-              element: <GroupShow />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'GroupShow' */
+                    'course/group/pages/GroupShow'
+                  )
+                ).default,
+              }),
             },
           ],
         },
         {
           path: 'videos',
-          handle: videosHandle,
+          lazy: async () => ({
+            handle: (
+              await import(
+                /* webpackChunkName: 'videoHandles' */
+                'course/video/handles'
+              )
+            ).videosHandle,
+          }),
           children: [
             {
               index: true,
-              element: <VideosIndex />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'VideosIndex' */
+                    'course/video/pages/VideosIndex'
+                  )
+                ).default,
+              }),
             },
             {
               path: ':videoId',
-              handle: videoHandle,
+              lazy: async () => ({
+                handle: (
+                  await import(
+                    /* webpackChunkName: 'videoHandles' */
+                    'course/video/handles'
+                  )
+                ).videoHandle,
+              }),
               children: [
                 {
                   index: true,
-                  element: <VideoShow />,
+                  lazy: async () => ({
+                    Component: (
+                      await import(
+                        /* webpackChunkName: 'VideoShow' */
+                        'course/video/pages/VideoShow'
+                      )
+                    ).default,
+                  }),
                 },
                 {
                   path: 'submissions',
                   children: [
                     {
                       index: true,
-                      handle: VideoSubmissionsIndex.handle,
-                      element: <VideoSubmissionsIndex />,
+                      lazy: async () => {
+                        const VideoSubmissionsIndex = (
+                          await import(
+                            /* webpackChunkName: 'VideoSubmissionsIndex' */
+                            'course/video/submission/pages/VideoSubmissionsIndex'
+                          )
+                        ).default;
+
+                        return {
+                          Component: VideoSubmissionsIndex,
+                          handle: VideoSubmissionsIndex.handle,
+                        };
+                      },
                     },
                     {
                       path: ':submissionId',
-                      handle: VideoSubmissionShow.handle,
+                      lazy: async () => ({
+                        handle: (
+                          await import(
+                            /* webpackChunkName: 'VideoSubmissionShow' */
+                            'course/video/submission/pages/VideoSubmissionShow'
+                          )
+                        ).default.handle,
+                      }),
                       children: [
                         {
                           index: true,
-                          element: <VideoSubmissionShow />,
+                          lazy: async () => ({
+                            Component: (
+                              await import(
+                                /* webpackChunkName: 'VideoSubmissionShow' */
+                                'course/video/submission/pages/VideoSubmissionShow'
+                              )
+                            ).default,
+                          }),
                         },
                         {
                           path: 'edit',
-                          element: <VideoSubmissionEdit />,
+                          lazy: async () => ({
+                            Component: (
+                              await import(
+                                /* webpackChunkName: 'VideoSubmissionEdit' */
+                                'course/video/submission/pages/VideoSubmissionEdit'
+                              )
+                            ).default,
+                          }),
                         },
                       ],
                     },
@@ -532,7 +1089,16 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
                 },
                 {
                   path: 'attempt',
-                  loader: videoAttemptLoader(t),
+                  lazy: async () => {
+                    const videoAttemptLoader = (
+                      await import(
+                        /* webpackChunkName: 'videoAttemptLoader' */
+                        'course/video/attemptLoader'
+                      )
+                    ).default;
+
+                    return { loader: videoAttemptLoader(t) };
+                  },
                 },
               ],
             },
@@ -540,24 +1106,68 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
         },
         {
           path: 'forums',
-          handle: forumHandle,
+          lazy: async () => ({
+            handle: (
+              await import(
+                /* webpackChunkName: 'forumHandles' */
+                'course/forum/handles'
+              )
+            ).forumHandle,
+          }),
           children: [
             {
               index: true,
-              element: <ForumsIndex />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'ForumsIndex' */
+                    'course/forum/pages/ForumsIndex'
+                  )
+                ).default,
+              }),
             },
             {
               path: ':forumId',
-              handle: forumNameHandle,
+              lazy: async () => ({
+                handle: (
+                  await import(
+                    /* webpackChunkName: 'forumHandles' */
+                    'course/forum/handles'
+                  )
+                ).forumNameHandle,
+              }),
               children: [
                 {
                   index: true,
-                  element: <ForumShow />,
+                  lazy: async () => ({
+                    Component: (
+                      await import(
+                        /* webpackChunkName: 'ForumShow' */
+                        'course/forum/pages/ForumShow'
+                      )
+                    ).default,
+                  }),
                 },
                 {
                   path: 'topics/:topicId',
-                  handle: forumTopicHandle,
-                  element: <ForumTopicShow />,
+                  lazy: async () => {
+                    const [forumTopicHandle, ForumTopicShow] =
+                      await Promise.all([
+                        import(
+                          /* webpackChunkName: 'forumHandles' */
+                          'course/forum/handles'
+                        ).then((module) => module.forumTopicHandle),
+                        import(
+                          /* webpackChunkName: 'ForumTopicShow' */
+                          'course/forum/pages/ForumTopicShow'
+                        ).then((module) => module.default),
+                      ]);
+
+                    return {
+                      Component: ForumTopicShow,
+                      handle: forumTopicHandle,
+                    };
+                  },
                 },
               ],
             },
@@ -565,88 +1175,249 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
         },
         {
           path: 'achievements',
-          handle: AchievementsIndex.handle,
+          lazy: async () => ({
+            handle: (
+              await import(
+                /* webpackChunkName: 'AchievementsIndex' */
+                'course/achievement/pages/AchievementsIndex'
+              )
+            ).default.handle,
+          }),
           children: [
             {
               index: true,
-              element: <AchievementsIndex />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'AchievementsIndex' */
+                    'course/achievement/pages/AchievementsIndex'
+                  )
+                ).default,
+              }),
             },
             {
               path: ':achievementId',
-              handle: achievementHandle,
-              element: <AchievementShow />,
+              lazy: async () => {
+                const [achievementHandle, AchievementShow] = await Promise.all([
+                  import(
+                    /* webpackChunkName: 'achievementHandle' */
+                    'course/achievement/handles'
+                  ).then((module) => module.achievementHandle),
+                  import(
+                    /* webpackChunkName: 'AchievementShow' */
+                    'course/achievement/pages/AchievementShow'
+                  ).then((module) => module.default),
+                ]);
+
+                return {
+                  Component: AchievementShow,
+                  handle: achievementHandle,
+                };
+              },
             },
           ],
         },
         {
           path: 'assessments',
-          handle: assessmentsHandle,
+          lazy: async () => ({
+            handle: (
+              await import(
+                /* webpackChunkName: 'assessmentHandles' */
+                'course/assessment/handles'
+              )
+            ).assessmentsHandle,
+          }),
           children: [
             {
               index: true,
-              element: <AssessmentsIndex />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'AssessmentsIndex' */
+                    'bundles/course/assessment/pages/AssessmentsIndex'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'submissions',
-              handle: SubmissionsIndex.handle,
-              element: <SubmissionsIndex />,
+              lazy: async () => {
+                const SubmissionsIndex = (
+                  await import(
+                    /* webpackChunkName: 'SubmissionsIndex' */
+                    'course/assessment/submissions/SubmissionsIndex'
+                  )
+                ).default;
+
+                return {
+                  Component: SubmissionsIndex,
+                  handle: SubmissionsIndex.handle,
+                };
+              },
             },
             {
               path: 'skills',
-              handle: SkillsIndex.handle,
-              element: <SkillsIndex />,
+              lazy: async () => {
+                const SkillsIndex = (
+                  await import(
+                    /* webpackChunkName: 'SkillsIndex' */
+                    'course/assessment/skills/pages/SkillsIndex'
+                  )
+                ).default;
+
+                return {
+                  Component: SkillsIndex,
+                  handle: SkillsIndex.handle,
+                };
+              },
             },
             {
               path: ':assessmentId',
-              handle: assessmentHandle,
+              lazy: async () => ({
+                handle: (
+                  await import(
+                    /* webpackChunkName: 'assessmentHandles' */
+                    'course/assessment/handles'
+                  )
+                ).assessmentHandle,
+              }),
               children: [
                 {
                   index: true,
-                  element: <AssessmentShow />,
+                  lazy: async () => ({
+                    Component: (
+                      await import(
+                        /* webpackChunkName: 'AssessmentShow' */
+                        'course/assessment/pages/AssessmentShow'
+                      )
+                    ).default,
+                  }),
                 },
                 {
                   path: 'edit',
-                  handle: AssessmentEdit.handle,
-                  element: <AssessmentEdit />,
+                  lazy: async () => {
+                    const AssessmentEdit = (
+                      await import(
+                        /* webpackChunkName: 'AssessmentEdit' */
+                        'course/assessment/pages/AssessmentEdit'
+                      )
+                    ).default;
+
+                    return {
+                      Component: AssessmentEdit,
+                      handle: AssessmentEdit.handle,
+                    };
+                  },
                 },
                 {
                   path: 'attempt',
-                  loader: assessmentAttemptLoader(t),
+                  lazy: async () => {
+                    const assessmentAttemptLoader = (
+                      await import(
+                        /* webpackChunkName: 'assessmentAttemptLoader' */
+                        'course/assessment/attemptLoader'
+                      )
+                    ).default;
+
+                    return { loader: assessmentAttemptLoader(t) };
+                  },
                 },
                 {
                   path: 'monitoring',
-                  handle: AssessmentMonitoring.handle,
-                  element: <AssessmentMonitoring />,
+                  lazy: async () => {
+                    const AssessmentMonitoring = (
+                      await import(
+                        /* webpackChunkName: 'AssessmentMonitoring' */
+                        'course/assessment/pages/AssessmentMonitoring'
+                      )
+                    ).default;
+
+                    return {
+                      Component: AssessmentMonitoring,
+                      handle: AssessmentMonitoring.handle,
+                    };
+                  },
                 },
                 {
                   path: 'sessions/new',
-                  element: <AssessmentSessionNew />,
+                  lazy: async () => ({
+                    Component: (
+                      await import(
+                        /* webpackChunkName: 'AssessmentSessionNew' */
+                        'course/assessment/sessions/pages/AssessmentSessionNew'
+                      )
+                    ).default,
+                  }),
                 },
                 {
                   path: 'statistics',
-                  handle: AssessmentStatistics.handle,
-                  element: <AssessmentStatistics />,
+                  lazy: async () => {
+                    const AssessmentStatistics = (
+                      await import(
+                        /* webpackChunkName: 'AssessmentStatistics' */
+                        'course/assessment/pages/AssessmentStatistics'
+                      )
+                    ).default;
+
+                    return {
+                      Component: AssessmentStatistics,
+                      handle: AssessmentStatistics.handle,
+                    };
+                  },
                 },
                 {
                   path: 'submissions',
                   children: [
                     {
                       index: true,
-                      handle: AssessmentSubmissionsIndex.handle,
-                      element: <AssessmentSubmissionsIndex />,
+                      lazy: async () => {
+                        const AssessmentSubmissionsIndex = (
+                          await import(
+                            /* webpackChunkName: 'AssessmentSubmissionsIndex' */
+                            'course/assessment/submission/pages/SubmissionsIndex'
+                          )
+                        ).default;
+
+                        return {
+                          Component: AssessmentSubmissionsIndex,
+                          handle: AssessmentSubmissionsIndex.handle,
+                        };
+                      },
                     },
                     {
                       path: ':submissionId',
                       children: [
                         {
                           path: 'edit',
-                          handle: SubmissionEditIndex.handle,
-                          element: <SubmissionEditIndex />,
+                          lazy: async () => {
+                            const SubmissionEditIndex = (
+                              await import(
+                                /* webpackChunkName: 'SubmissionEditIndex' */
+                                'course/assessment/submission/pages/SubmissionEditIndex'
+                              )
+                            ).default;
+
+                            return {
+                              Component: SubmissionEditIndex,
+                              handle: SubmissionEditIndex.handle,
+                            };
+                          },
                         },
                         {
                           path: 'logs',
-                          handle: LogsIndex.handle,
-                          element: <LogsIndex />,
+                          lazy: async () => {
+                            const SubmissionLogs = (
+                              await import(
+                                /* webpackChunkName: 'SubmissionLogs' */
+                                'course/assessment/submission/pages/LogsIndex'
+                              )
+                            ).default;
+
+                            return {
+                              Component: SubmissionLogs,
+                              handle: SubmissionLogs.handle,
+                            };
+                          },
                         },
                       ],
                     },
@@ -654,20 +1425,54 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
                 },
                 {
                   path: 'question',
-                  element: <QuestionFormOutlet />,
-                  handle: questionHandle,
+                  lazy: async () => {
+                    const [questionHandle, QuestionFormOutlet] =
+                      await Promise.all([
+                        import(
+                          /* webpackChunkName: 'assessmentHandles' */
+                          'course/assessment/handles'
+                        ).then((module) => module.questionHandle),
+                        import(
+                          /* webpackChunkName: 'QuestionFormOutlet' */
+                          'course/assessment/question/components/QuestionFormOutlet'
+                        ).then((module) => module.default),
+                      ]);
+
+                    return {
+                      Component: QuestionFormOutlet,
+                      handle: questionHandle,
+                    };
+                  },
                   children: [
                     {
                       path: 'forum_post_responses',
                       children: [
                         {
                           path: 'new',
-                          handle: NewForumPostResponsePage.handle,
-                          element: <NewForumPostResponsePage />,
+                          lazy: async () => {
+                            const NewForumPostResponsePage = (
+                              await import(
+                                /* webpackChunkName: 'NewForumPostResponsePage' */
+                                'course/assessment/question/forum-post-responses/NewForumPostResponsePage'
+                              )
+                            ).default;
+
+                            return {
+                              Component: NewForumPostResponsePage,
+                              handle: NewForumPostResponsePage.handle,
+                            };
+                          },
                         },
                         {
                           path: ':questionId/edit',
-                          element: <EditForumPostResponsePage />,
+                          lazy: async () => ({
+                            Component: (
+                              await import(
+                                /* webpackChunkName: 'EditForumPostResponsePage' */
+                                'course/assessment/question/forum-post-responses/EditForumPostResponsePage'
+                              )
+                            ).default,
+                          }),
                         },
                       ],
                     },
@@ -676,12 +1481,30 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
                       children: [
                         {
                           path: 'new',
-                          handle: NewTextResponse.handle,
-                          element: <NewTextResponse />,
+                          lazy: async () => {
+                            const NewTextResponse = (
+                              await import(
+                                /* webpackChunkName: 'NewTextResponsePage' */
+                                'course/assessment/question/text-responses/NewTextResponsePage'
+                              )
+                            ).default;
+
+                            return {
+                              Component: NewTextResponse,
+                              handle: NewTextResponse.handle,
+                            };
+                          },
                         },
                         {
                           path: ':questionId/edit',
-                          element: <EditTextResponse />,
+                          lazy: async () => ({
+                            Component: (
+                              await import(
+                                /* webpackChunkName: 'EditTextResponsePage' */
+                                'course/assessment/question/text-responses/EditTextResponsePage'
+                              )
+                            ).default,
+                          }),
                         },
                       ],
                     },
@@ -690,12 +1513,30 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
                       children: [
                         {
                           path: 'new',
-                          handle: NewVoicePage.handle,
-                          element: <NewVoicePage />,
+                          lazy: async () => {
+                            const NewVoicePage = (
+                              await import(
+                                /* webpackChunkName: 'NewVoicePage' */
+                                'course/assessment/question/voice-responses/NewVoicePage'
+                              )
+                            ).default;
+
+                            return {
+                              Component: NewVoicePage,
+                              handle: NewVoicePage.handle,
+                            };
+                          },
                         },
                         {
                           path: ':questionId/edit',
-                          element: <EditVoicePage />,
+                          lazy: async () => ({
+                            Component: (
+                              await import(
+                                /* webpackChunkName: 'EditVoicePage' */
+                                'course/assessment/question/voice-responses/EditVoicePage'
+                              )
+                            ).default,
+                          }),
                         },
                       ],
                     },
@@ -704,12 +1545,30 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
                       children: [
                         {
                           path: 'new',
-                          handle: NewMcqMrqPage.handle,
-                          element: <NewMcqMrqPage />,
+                          lazy: async () => {
+                            const NewMcqMrqPage = (
+                              await import(
+                                /* webpackChunkName: 'NewMcqMrqPage' */
+                                'course/assessment/question/multiple-responses/NewMcqMrqPage'
+                              )
+                            ).default;
+
+                            return {
+                              Component: NewMcqMrqPage,
+                              handle: NewMcqMrqPage.handle,
+                            };
+                          },
                         },
                         {
                           path: ':questionId/edit',
-                          element: <EditMcqMrqPage />,
+                          lazy: async () => ({
+                            Component: (
+                              await import(
+                                /* webpackChunkName: 'EditMcqMrqPage' */
+                                'course/assessment/question/multiple-responses/EditMcqMrqPage'
+                              )
+                            ).default,
+                          }),
                         },
                       ],
                     },
@@ -718,12 +1577,30 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
                       children: [
                         {
                           path: 'new',
-                          handle: ScribingQuestion.handle,
-                          element: <ScribingQuestion />,
+                          lazy: async () => {
+                            const ScribingQuestion = (
+                              await import(
+                                /* webpackChunkName: 'ScribingQuestion' */
+                                'course/assessment/question/scribing/ScribingQuestion'
+                              )
+                            ).default;
+
+                            return {
+                              Component: ScribingQuestion,
+                              handle: ScribingQuestion.handle,
+                            };
+                          },
                         },
                         {
                           path: ':questionId/edit',
-                          element: <ScribingQuestion />,
+                          lazy: async () => ({
+                            Component: (
+                              await import(
+                                /* webpackChunkName: 'ScribingQuestion' */
+                                'course/assessment/question/scribing/ScribingQuestion'
+                              )
+                            ).default,
+                          }),
                         },
                       ],
                     },
@@ -732,17 +1609,46 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
                       children: [
                         {
                           path: 'new',
-                          handle: NewProgrammingQuestionPage.handle,
-                          element: <NewProgrammingQuestionPage />,
+                          lazy: async () => {
+                            const NewProgrammingQuestionPage = (
+                              await import(
+                                /* webpackChunkName: 'NewProgrammingQuestionPage' */
+                                'course/assessment/question/programming/NewProgrammingQuestionPage'
+                              )
+                            ).default;
+
+                            return {
+                              Component: NewProgrammingQuestionPage,
+                              handle: NewProgrammingQuestionPage.handle,
+                            };
+                          },
                         },
                         {
                           path: 'generate',
-                          handle: GenerateProgrammingQuestionPage.handle,
-                          element: <GenerateProgrammingQuestionPage />,
+                          lazy: async () => {
+                            const GenerateProgrammingQuestionPage = (
+                              await import(
+                                /* webpackChunkName: 'GenerateProgrammingQuestionPage' */
+                                'course/assessment/pages/AssessmentGenerate/GenerateProgrammingQuestionPage'
+                              )
+                            ).default;
+
+                            return {
+                              Component: GenerateProgrammingQuestionPage,
+                              handle: GenerateProgrammingQuestionPage.handle,
+                            };
+                          },
                         },
                         {
                           path: ':questionId/edit',
-                          element: <EditProgrammingQuestionPage />,
+                          lazy: async () => ({
+                            Component: (
+                              await import(
+                                /* webpackChunkName: 'EditProgrammingQuestionPage' */
+                                'course/assessment/question/programming/EditProgrammingQuestionPage'
+                              )
+                            ).default,
+                          }),
                         },
                       ],
                     },
@@ -756,23 +1662,64 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
     },
     {
       path: '/',
-      element: <CourselessContainer withGotoCoursesLink withUserMenu />,
+      lazy: async () => {
+        const CourselessContainer = (
+          await import(
+            /* webpackChunkName: 'CourselessContainer' */
+            'lib/containers/CourselessContainer'
+          )
+        ).default;
+
+        return {
+          element: <CourselessContainer withGotoCoursesLink withUserMenu />,
+        };
+      },
       children: [
         {
           index: true,
-          element: <DashboardPage />,
+          lazy: async () => ({
+            Component: (
+              await import(
+                /* webpackChunkName: 'DashboardPage' */
+                'bundles/common/DashboardPage'
+              )
+            ).default,
+          }),
         },
       ],
     },
     {
       path: '*',
-      element: <CourselessContainer withCourseSwitcher withUserMenu />,
+      lazy: async () => {
+        const CourselessContainer = (
+          await import(
+            /* webpackChunkName: 'CourselessContainer' */
+            'lib/containers/CourselessContainer'
+          )
+        ).default;
+
+        return {
+          element: <CourselessContainer withCourseSwitcher withUserMenu />,
+        };
+      },
+
       children: [
         reservedRoutes,
         {
           path: 'admin',
-          handle: AdminNavigator.handle,
-          element: <AdminNavigator />,
+          lazy: async () => {
+            const AdminNavigator = (
+              await import(
+                /* webpackChunkName: 'AdminNavigator' */
+                'bundles/system/admin/admin/AdminNavigator'
+              )
+            ).default;
+
+            return {
+              Component: AdminNavigator,
+              handle: AdminNavigator.handle,
+            };
+          },
           children: [
             {
               index: true,
@@ -780,26 +1727,65 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
             },
             {
               path: 'announcements',
-              element: <AnnouncementIndex />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'AnnouncementsIndex' */
+                    'bundles/system/admin/admin/pages/AnnouncementsIndex'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'users',
-              element: <UserIndex />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'UsersIndex' */
+                    'bundles/system/admin/admin/pages/UsersIndex'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'instances',
-              element: <InstancesIndex />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'InstancesIndex' */
+                    'bundles/system/admin/admin/pages/InstancesIndex'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'courses',
-              element: <CourseIndex />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'CoursesIndex' */
+                    'bundles/system/admin/admin/pages/CoursesIndex'
+                  )
+                ).default,
+              }),
             },
           ],
         },
         {
           path: 'admin/instance',
-          handle: InstanceAdminNavigator.handle,
-          element: <InstanceAdminNavigator />,
+          lazy: async () => {
+            const InstanceAdminNavigator = (
+              await import(
+                /* webpackChunkName: 'InstanceAdminNavigator' */
+                'bundles/system/admin/instance/instance/InstanceAdminNavigator'
+              )
+            ).default;
+
+            return {
+              Component: InstanceAdminNavigator,
+              handle: InstanceAdminNavigator.handle,
+            };
+          },
           children: [
             {
               index: true,
@@ -807,54 +1793,132 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
             },
             {
               path: 'announcements',
-              element: <InstanceAnnouncementsIndex />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'InstanceAnnouncementsIndex' */
+                    'bundles/system/admin/instance/instance/pages/InstanceAnnouncementsIndex'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'components',
-              element: <InstanceComponentsIndex />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'InstanceComponentsIndex' */
+                    'bundles/system/admin/instance/instance/pages/InstanceComponentsIndex'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'courses',
-              element: <InstanceCoursesIndex />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'InstanceCoursesIndex' */
+                    'bundles/system/admin/instance/instance/pages/InstanceCoursesIndex'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'users',
-              element: <InstanceUsersIndex />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'InstanceUsersIndex' */
+                    'bundles/system/admin/instance/instance/pages/InstanceUsersIndex'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'users/invite',
-              element: <InstanceUsersInvite />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'InstanceUsersInvite' */
+                    'bundles/system/admin/instance/instance/pages/InstanceUsersInvite'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'user_invitations',
-              element: <InstanceUsersInvitations />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'InstanceUsersInvitations' */
+                    'bundles/system/admin/instance/instance/pages/InstanceUsersInvitations'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'role_requests',
-              element: <InstanceUserRoleRequestsIndex />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'InstanceUserRoleRequestsIndex' */
+                    'bundles/system/admin/instance/instance/pages/InstanceUserRoleRequestsIndex'
+                  )
+                ).default,
+              }),
             },
           ],
         },
         {
           path: 'announcements',
-          handle: GlobalAnnouncementIndex.handle,
-          element: <GlobalAnnouncementIndex />,
+          lazy: async () => {
+            const GlobalAnnouncementIndex = (
+              await import(
+                /* webpackChunkName: 'GlobalAnnouncementIndex' */
+                'bundles/announcements/GlobalAnnouncementIndex'
+              )
+            ).default;
+
+            return {
+              Component: GlobalAnnouncementIndex,
+              handle: GlobalAnnouncementIndex.handle,
+            };
+          },
         },
         {
           path: 'users',
           children: [
             {
               path: ':userId',
-              element: <UserShow />,
+              lazy: async () => ({
+                Component: (
+                  await import(
+                    /* webpackChunkName: 'UserShow' */
+                    'bundles/users/pages/UserShow'
+                  )
+                ).default,
+              }),
             },
             {
               path: 'confirmation',
               children: [
                 {
                   index: true,
-                  loader: ConfirmEmailPage.loader,
-                  element: <Navigate to="/" />,
-                  errorElement: <ConfirmEmailPage.InvalidRedirect />,
+                  lazy: async () => {
+                    const ConfirmEmailPage = (
+                      await import(
+                        /* webpackChunkName: 'ConfirmEmailPage' */
+                        'bundles/users/pages/ConfirmEmailPage'
+                      )
+                    ).default;
+
+                    return {
+                      element: <Navigate to="/" />,
+                      errorElement: <ConfirmEmailPage.InvalidRedirect />,
+                      loader: ConfirmEmailPage.loader,
+                    };
+                  },
                 },
               ],
             },
@@ -862,8 +1926,19 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
         },
         {
           path: 'user/profile/edit',
-          handle: AccountSettings.handle,
-          element: <AccountSettings />,
+          lazy: async () => {
+            const AccountSettings = (
+              await import(
+                /* webpackChunkName: 'AccountSettings' */
+                'bundles/user/AccountSettings'
+              )
+            ).default;
+
+            return {
+              Component: AccountSettings,
+              handle: AccountSettings.handle,
+            };
+          },
         },
         {
           path: 'role_requests',

From 4730f44279e2f5ef3781fc82c06736e9542550e6 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:41:18 +0800
Subject: [PATCH 08/36] perf(router): lazy load all routes

---
 .../PrivacyPolicyPage/PrivacyPolicyPage.tsx   |   9 --
 .../common/PrivacyPolicyPage/index.tsx        |  16 +--
 .../TermsOfServicePage/TermsOfServicePage.tsx |   9 --
 .../common/TermsOfServicePage/index.tsx       |  16 +--
 client/app/routers/router.tsx                 | 111 ++++++++++++++----
 5 files changed, 103 insertions(+), 58 deletions(-)
 delete mode 100644 client/app/bundles/common/PrivacyPolicyPage/PrivacyPolicyPage.tsx
 delete mode 100644 client/app/bundles/common/TermsOfServicePage/TermsOfServicePage.tsx

diff --git a/client/app/bundles/common/PrivacyPolicyPage/PrivacyPolicyPage.tsx b/client/app/bundles/common/PrivacyPolicyPage/PrivacyPolicyPage.tsx
deleted file mode 100644
index 4d655be2330..00000000000
--- a/client/app/bundles/common/PrivacyPolicyPage/PrivacyPolicyPage.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import MarkdownPage from 'lib/components/core/layouts/MarkdownPage';
-
-import privacyPolicy from './privacy-policy.md';
-
-const PrivacyPolicyPage = (): JSX.Element => (
-  <MarkdownPage className="m-auto max-w-7xl" markdown={privacyPolicy} />
-);
-
-export default PrivacyPolicyPage;
diff --git a/client/app/bundles/common/PrivacyPolicyPage/index.tsx b/client/app/bundles/common/PrivacyPolicyPage/index.tsx
index 58ce9822021..d9e6bce2ab1 100644
--- a/client/app/bundles/common/PrivacyPolicyPage/index.tsx
+++ b/client/app/bundles/common/PrivacyPolicyPage/index.tsx
@@ -1,10 +1,8 @@
-import { lazy, Suspense } from 'react';
 import { defineMessages } from 'react-intl';
 
-const PrivacyPolicyPage = lazy(
-  () =>
-    import(/* webpackChunkName: "PrivacyPolicyPage" */ './PrivacyPolicyPage'),
-);
+import MarkdownPage from 'lib/components/core/layouts/MarkdownPage';
+
+import privacyPolicy from './privacy-policy.md';
 
 const translations = defineMessages({
   privacyPolicy: {
@@ -13,12 +11,10 @@ const translations = defineMessages({
   },
 });
 
-const SuspensedPrivacyPolicyPage = (): JSX.Element => (
-  <Suspense>
-    <PrivacyPolicyPage />
-  </Suspense>
+const PrivacyPolicyPage = (): JSX.Element => (
+  <MarkdownPage className="m-auto max-w-7xl" markdown={privacyPolicy} />
 );
 
 const handle = translations.privacyPolicy;
 
-export default Object.assign(SuspensedPrivacyPolicyPage, { handle });
+export default Object.assign(PrivacyPolicyPage, { handle });
diff --git a/client/app/bundles/common/TermsOfServicePage/TermsOfServicePage.tsx b/client/app/bundles/common/TermsOfServicePage/TermsOfServicePage.tsx
deleted file mode 100644
index 938510a6efb..00000000000
--- a/client/app/bundles/common/TermsOfServicePage/TermsOfServicePage.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import MarkdownPage from 'lib/components/core/layouts/MarkdownPage';
-
-import termsOfService from './terms-of-service.md';
-
-const TermsOfServicePage = (): JSX.Element => (
-  <MarkdownPage className="m-auto max-w-7xl" markdown={termsOfService} />
-);
-
-export default TermsOfServicePage;
diff --git a/client/app/bundles/common/TermsOfServicePage/index.tsx b/client/app/bundles/common/TermsOfServicePage/index.tsx
index 594e2c2c111..b92d2dc089c 100644
--- a/client/app/bundles/common/TermsOfServicePage/index.tsx
+++ b/client/app/bundles/common/TermsOfServicePage/index.tsx
@@ -1,10 +1,8 @@
-import { lazy, Suspense } from 'react';
 import { defineMessages } from 'react-intl';
 
-const TermsOfServicePage = lazy(
-  () =>
-    import(/* webpackChunkName: "TermsOfServicePage" */ './TermsOfServicePage'),
-);
+import MarkdownPage from 'lib/components/core/layouts/MarkdownPage';
+
+import termsOfService from './terms-of-service.md';
 
 const translations = defineMessages({
   termsOfService: {
@@ -13,12 +11,10 @@ const translations = defineMessages({
   },
 });
 
-const SuspensedTermsOfServicePage = (): JSX.Element => (
-  <Suspense>
-    <TermsOfServicePage />
-  </Suspense>
+const TermsOfServicePage = (): JSX.Element => (
+  <MarkdownPage className="m-auto max-w-7xl" markdown={termsOfService} />
 );
 
 const handle = translations.termsOfService;
 
-export default Object.assign(SuspensedTermsOfServicePage, { handle });
+export default Object.assign(TermsOfServicePage, { handle });
diff --git a/client/app/routers/router.tsx b/client/app/routers/router.tsx
index 5f3e57d556c..f9b3b1a7d1b 100644
--- a/client/app/routers/router.tsx
+++ b/client/app/routers/router.tsx
@@ -1,19 +1,24 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { RouteObject } from 'react-router-dom';
 import { resetStore } from 'store';
 
-import ErrorPage from 'bundles/common/ErrorPage';
-import PrivacyPolicyPage from 'bundles/common/PrivacyPolicyPage';
-import TermsOfServicePage from 'bundles/common/TermsOfServicePage';
-import CoursesIndex from 'bundles/course/courses/pages/CoursesIndex';
-import AppContainer from 'lib/containers/AppContainer';
-import CourselessContainer from 'lib/containers/CourselessContainer';
-
 const createAppRouter = (router: RouteObject[]): RouteObject[] => [
   {
     path: '/',
-    element: <AppContainer />,
-    loader: AppContainer.loader,
-    errorElement: <AppContainer.ErrorBoundary />,
+    lazy: async () => {
+      const AppContainer = (
+        await import(
+          /* webpackChunkName: "AppContainer" */
+          'lib/containers/AppContainer'
+        )
+      ).default;
+
+      return {
+        Component: AppContainer,
+        loader: AppContainer.loader,
+        errorElement: <AppContainer.ErrorBoundary />,
+      };
+    },
     shouldRevalidate: (props): boolean => {
       const isChangingCourse =
         props.currentParams.courseId !== props.nextParams.courseId;
@@ -35,36 +40,102 @@ const createAppRouter = (router: RouteObject[]): RouteObject[] => [
       ...router,
       {
         path: '*',
-        element: <CourselessContainer withCourseSwitcher withUserMenu />,
+        lazy: async () => {
+          const CourselessContainer = (
+            await import(
+              /* webpackChunkName: "CourselessContainer" */
+              'lib/containers/CourselessContainer'
+            )
+          ).default;
+
+          return {
+            element: <CourselessContainer withCourseSwitcher withUserMenu />,
+          };
+        },
         children: [
           {
             path: 'courses',
-            handle: CoursesIndex.handle,
-            element: <CoursesIndex />,
+            lazy: async () => {
+              const CoursesIndex = (
+                await import(
+                  /* webpackChunkName: "CoursesIndex" */
+                  'bundles/course/courses/pages/CoursesIndex'
+                )
+              ).default;
+
+              return {
+                Component: CoursesIndex,
+                handle: CoursesIndex.handle,
+              };
+            },
           },
           {
             path: 'pages',
             children: [
               {
                 path: 'terms_of_service',
-                handle: TermsOfServicePage.handle,
-                element: <TermsOfServicePage />,
+                lazy: async () => {
+                  const TermsOfServicePage = (
+                    await import(
+                      /* webpackChunkName: "TermsOfServicePage" */
+                      'bundles/common/TermsOfServicePage'
+                    )
+                  ).default;
+
+                  return {
+                    Component: TermsOfServicePage,
+                    handle: TermsOfServicePage.handle,
+                  };
+                },
               },
               {
                 path: 'privacy_policy',
-                handle: PrivacyPolicyPage.handle,
-                element: <PrivacyPolicyPage />,
+                lazy: async () => {
+                  const PrivacyPolicyPage = (
+                    await import(
+                      /* webpackChunkName: "PrivacyPolicyPage" */
+                      'bundles/common/PrivacyPolicyPage'
+                    )
+                  ).default;
+
+                  return {
+                    Component: PrivacyPolicyPage,
+                    handle: PrivacyPolicyPage.handle,
+                  };
+                },
               },
             ],
           },
           {
             path: 'forbidden',
-            loader: ErrorPage.Forbidden.loader,
-            element: <ErrorPage.Forbidden />,
+            lazy: async () => {
+              const ErrorPage = (
+                await import(
+                  /* webpackChunkName: "ErrorPage" */
+                  'bundles/common/ErrorPage'
+                )
+              ).default;
+
+              return {
+                Component: ErrorPage.Forbidden,
+                loader: ErrorPage.Forbidden.loader,
+              };
+            },
           },
           {
             path: '*',
-            element: <ErrorPage.NotFound />,
+            lazy: async () => {
+              const ErrorPage = (
+                await import(
+                  /* webpackChunkName: "ErrorPage" */
+                  'bundles/common/ErrorPage'
+                )
+              ).default;
+
+              return {
+                Component: ErrorPage.NotFound,
+              };
+            },
           },
         ],
       },

From 733681adcb68de9b8b7b5ab9902ae7f6a43294b1 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:41:25 +0800
Subject: [PATCH 09/36] perf(UnauthenticatedApp): lazy load all routes

---
 client/app/routers/UnauthenticatedApp.tsx | 157 +++++++++++++++++-----
 1 file changed, 126 insertions(+), 31 deletions(-)

diff --git a/client/app/routers/UnauthenticatedApp.tsx b/client/app/routers/UnauthenticatedApp.tsx
index 07cecff985f..59afe4ef940 100644
--- a/client/app/routers/UnauthenticatedApp.tsx
+++ b/client/app/routers/UnauthenticatedApp.tsx
@@ -1,18 +1,6 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
-import AuthenticationRedirection from 'bundles/authentication/pages/AuthenticationRedirection';
-import LandingPage from 'bundles/common/LandingPage';
-import ConfirmEmailPage from 'bundles/users/pages/ConfirmEmailPage';
-import ForgotPasswordLandingPage from 'bundles/users/pages/ForgotPasswordLandingPage';
-import ForgotPasswordPage from 'bundles/users/pages/ForgotPasswordPage';
-import ResendConfirmationEmailLandingPage from 'bundles/users/pages/ResendConfirmationEmailLandingPage';
-import ResendConfirmationEmailPage from 'bundles/users/pages/ResendConfirmationEmailPage';
-import ResetPasswordPage from 'bundles/users/pages/ResetPasswordPage';
-import SignUpLandingPage from 'bundles/users/pages/SignUpLandingPage';
-import SignUpPage from 'bundles/users/pages/SignUpPage';
-import AuthPagesContainer from 'lib/containers/AuthPagesContainer';
-import CourselessContainer from 'lib/containers/CourselessContainer';
-
 import { protectedRoutes } from './redirects';
 import createAppRouter from './router';
 
@@ -20,37 +8,94 @@ const unauthenticatedRouter = createAppRouter([
   protectedRoutes,
   {
     path: '*',
-    element: <CourselessContainer withGotoCoursesLink />,
+    lazy: async () => {
+      const CourselessContainer = (
+        await import(
+          /* webpackChunkName: "CourselessContainer" */
+          'lib/containers/CourselessContainer'
+        )
+      ).default;
+
+      return {
+        element: <CourselessContainer withGotoCoursesLink />,
+      };
+    },
     children: [
       {
         index: true,
-        element: <LandingPage />,
+        lazy: async () => ({
+          Component: (
+            await import(
+              /* webpackChunkName: "LandingPage" */
+              'bundles/common/LandingPage'
+            )
+          ).default,
+        }),
       },
       {
         index: true,
         path: 'auth',
-        element: <AuthenticationRedirection />,
+        lazy: async () => ({
+          Component: (
+            await import(
+              /* webpackChunkName: "AuthenticationRedirection" */
+              'bundles/authentication/pages/AuthenticationRedirection'
+            )
+          ).default,
+        }),
       },
       {
         path: 'users',
-        element: <AuthPagesContainer />,
+        lazy: async () => ({
+          Component: (
+            await import(
+              /* webpackChunkName: "AuthPagesContainer" */
+              'lib/containers/AuthPagesContainer'
+            )
+          ).default,
+        }),
         children: [
           {
             index: true,
             path: 'sign_in',
-            element: <AuthenticationRedirection />,
+            lazy: async () => ({
+              Component: (
+                await import(
+                  /* webpackChunkName: "AuthenticationRedirection" */
+                  'bundles/authentication/pages/AuthenticationRedirection'
+                )
+              ).default,
+            }),
           },
           {
             path: 'sign_up',
             children: [
               {
                 index: true,
-                loader: SignUpPage.loader,
-                element: <SignUpPage />,
+                lazy: async () => {
+                  const SignUpPage = (
+                    await import(
+                      /* webpackChunkName: "SignUpPage" */
+                      'bundles/users/pages/SignUpPage'
+                    )
+                  ).default;
+
+                  return {
+                    Component: SignUpPage,
+                    loader: SignUpPage.loader,
+                  };
+                },
               },
               {
                 path: 'completed',
-                element: <SignUpLandingPage />,
+                lazy: async () => ({
+                  Component: (
+                    await import(
+                      /* webpackChunkName: "SignUpLandingPage" */
+                      'bundles/users/pages/SignUpLandingPage'
+                    )
+                  ).default,
+                }),
               },
             ],
           },
@@ -59,20 +104,45 @@ const unauthenticatedRouter = createAppRouter([
             children: [
               {
                 index: true,
-                loader: ConfirmEmailPage.loader,
-                element: <ConfirmEmailPage />,
-                errorElement: <ConfirmEmailPage.InvalidRedirect />,
+                lazy: async () => {
+                  const ConfirmEmailPage = (
+                    await import(
+                      /* webpackChunkName: "ConfirmEmailPage" */
+                      'bundles/users/pages/ConfirmEmailPage'
+                    )
+                  ).default;
+
+                  return {
+                    Component: ConfirmEmailPage,
+                    loader: ConfirmEmailPage.loader,
+                    errorElement: <ConfirmEmailPage.InvalidRedirect />,
+                  };
+                },
               },
               {
                 path: 'new',
                 children: [
                   {
                     index: true,
-                    element: <ResendConfirmationEmailPage />,
+                    lazy: async () => ({
+                      Component: (
+                        await import(
+                          /* webpackChunkName: "ResendConfirmationEmailPage" */
+                          'bundles/users/pages/ResendConfirmationEmailPage'
+                        )
+                      ).default,
+                    }),
                   },
                   {
                     path: 'completed',
-                    element: <ResendConfirmationEmailLandingPage />,
+                    lazy: async () => ({
+                      Component: (
+                        await import(
+                          /* webpackChunkName: "ResendConfirmationEmailLandingPage" */
+                          'bundles/users/pages/ResendConfirmationEmailLandingPage'
+                        )
+                      ).default,
+                    }),
                   },
                 ],
               },
@@ -86,19 +156,44 @@ const unauthenticatedRouter = createAppRouter([
                 children: [
                   {
                     index: true,
-                    element: <ForgotPasswordPage />,
+                    lazy: async () => ({
+                      Component: (
+                        await import(
+                          /* webpackChunkName: "ForgotPasswordPage" */
+                          'bundles/users/pages/ForgotPasswordPage'
+                        )
+                      ).default,
+                    }),
                   },
                   {
                     path: 'completed',
-                    element: <ForgotPasswordLandingPage />,
+                    lazy: async () => ({
+                      Component: (
+                        await import(
+                          /* webpackChunkName: "ForgotPasswordLandingPage" */
+                          'bundles/users/pages/ForgotPasswordLandingPage'
+                        )
+                      ).default,
+                    }),
                   },
                 ],
               },
               {
                 path: 'edit',
-                loader: ResetPasswordPage.loader,
-                errorElement: <ResetPasswordPage.InvalidRedirect />,
-                element: <ResetPasswordPage />,
+                lazy: async () => {
+                  const ResetPasswordPage = (
+                    await import(
+                      /* webpackChunkName: "ResetPasswordPage" */
+                      'bundles/users/pages/ResetPasswordPage'
+                    )
+                  ).default;
+
+                  return {
+                    Component: ResetPasswordPage,
+                    loader: ResetPasswordPage.loader,
+                    errorElement: <ResetPasswordPage.InvalidRedirect />,
+                  };
+                },
               },
             ],
           },

From d325e82a7310b9fb670bac70c4491498409bad5d Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:42:56 +0800
Subject: [PATCH 10/36] perf(SubmissionEditIndex): lazy load all question type
 answer components

---
 .../submission/components/answers/Answer.tsx  | 302 ++++++------------
 .../answers/AnswerNotImplemented.tsx          |  21 ++
 .../answers/adapters/FileUploadAdapter.tsx    |  17 +
 .../adapters/ForumPostResponseAdapter.tsx     |  20 ++
 .../adapters/MultipleChoiceAdapter.tsx        |  26 ++
 .../adapters/MultipleResponseAdapter.tsx      |  26 ++
 .../answers/adapters/ProgrammingAdapter.tsx   |  18 ++
 .../answers/adapters/ScribingAdapter.tsx      |   9 +
 .../answers/adapters/TextResponseAdapter.tsx  |  26 ++
 .../answers/adapters/VoiceResponseAdapter.tsx |  18 ++
 10 files changed, 272 insertions(+), 211 deletions(-)
 create mode 100644 client/app/bundles/course/assessment/submission/components/answers/AnswerNotImplemented.tsx
 create mode 100644 client/app/bundles/course/assessment/submission/components/answers/adapters/FileUploadAdapter.tsx
 create mode 100644 client/app/bundles/course/assessment/submission/components/answers/adapters/ForumPostResponseAdapter.tsx
 create mode 100644 client/app/bundles/course/assessment/submission/components/answers/adapters/MultipleChoiceAdapter.tsx
 create mode 100644 client/app/bundles/course/assessment/submission/components/answers/adapters/MultipleResponseAdapter.tsx
 create mode 100644 client/app/bundles/course/assessment/submission/components/answers/adapters/ProgrammingAdapter.tsx
 create mode 100644 client/app/bundles/course/assessment/submission/components/answers/adapters/ScribingAdapter.tsx
 create mode 100644 client/app/bundles/course/assessment/submission/components/answers/adapters/TextResponseAdapter.tsx
 create mode 100644 client/app/bundles/course/assessment/submission/components/answers/adapters/VoiceResponseAdapter.tsx

diff --git a/client/app/bundles/course/assessment/submission/components/answers/Answer.tsx b/client/app/bundles/course/assessment/submission/components/answers/Answer.tsx
index 4a758bd2b12..d6791cb2299 100644
--- a/client/app/bundles/course/assessment/submission/components/answers/Answer.tsx
+++ b/client/app/bundles/course/assessment/submission/components/answers/Answer.tsx
@@ -1,209 +1,83 @@
-import { defineMessages } from 'react-intl';
-import { Alert, Card, CardContent } from '@mui/material';
+import { lazy, LazyExoticComponent, Suspense } from 'react';
+import { Alert } from '@mui/material';
 import { QuestionType } from 'types/course/assessment/question';
 import { SubmissionQuestionData } from 'types/course/assessment/submission/question/types';
 
+import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import useTranslation from 'lib/hooks/useTranslation';
 
 import PastAnswers from '../../containers/PastAnswers';
-import ScribingView from '../../containers/ScribingView';
-import VoiceResponseAnswer from '../../containers/VoiceResponseAnswer';
 
-import FileUploadAnswer from './FileUpload';
-import ForumPostResponseAnswer from './ForumPostResponse';
-import MultipleChoiceAnswer from './MultipleChoice';
-import MultipleResponseAnswer from './MultipleResponse';
-import ProgrammingAnswer from './Programming';
-import TextResponseAnswer from './TextResponse';
-import {
-  AnswerPropsMap,
-  FileUploadAnswerProps,
-  ForumPostResponseAnswerProps,
-  McqAnswerProps,
-  MrqAnswerProps,
-  ProgrammingAnswerProps,
-  ScribingAnswerProps,
-  TextResponseAnswerProps,
-  VoiceResponseAnswerProps,
-} from './types';
+import type { AnswerPropsMap } from './types';
 
-const translations = defineMessages({
-  rendererNotImplemented: {
-    id: 'course.assessment.submission.Answer.rendererNotImplemented',
-    defaultMessage:
-      'The display for this question type has not been implemented yet.',
-  },
-  missingAnswer: {
-    id: 'course.assessment.submission.Answer.missingAnswer',
-    defaultMessage:
-      'There is no answer submitted for this question - this might be caused by \
-                    the addition of this question after the submission is submitted.',
-  },
-});
+const AnswerNotImplemented = lazy(
+  () =>
+    import(
+      /* webpackChunkName: "AnswerNotImplemented" */
+      './AnswerNotImplemented'
+    ),
+);
 
-const MultipleChoice = (props: McqAnswerProps): JSX.Element => {
-  const {
-    question,
-    answerId,
-    readOnly,
-    graderView,
-    showMcqMrqSolution,
-    saveAnswerAndUpdateClientVersion,
-  } = props;
-  return (
-    <MultipleChoiceAnswer
-      key={`question_${question.id}`}
-      answerId={answerId!}
-      graderView={graderView}
-      question={question}
-      readOnly={readOnly}
-      saveAnswerAndUpdateClientVersion={saveAnswerAndUpdateClientVersion}
-      showMcqMrqSolution={showMcqMrqSolution}
-    />
-  );
-};
-
-const MultipleResponse = (props: MrqAnswerProps): JSX.Element => {
-  const {
-    question,
-    answerId,
-    readOnly,
-    graderView,
-    showMcqMrqSolution,
-    saveAnswerAndUpdateClientVersion,
-  } = props;
-  return (
-    <MultipleResponseAnswer
-      key={`question_${question.id}`}
-      answerId={answerId!}
-      graderView={graderView}
-      question={question}
-      readOnly={readOnly}
-      saveAnswerAndUpdateClientVersion={saveAnswerAndUpdateClientVersion}
-      showMcqMrqSolution={showMcqMrqSolution}
-    />
-  );
-};
-
-const Programming = (props: ProgrammingAnswerProps): JSX.Element => {
-  const { question, answerId, readOnly, saveAnswerAndUpdateClientVersion } =
-    props;
-  return (
-    <ProgrammingAnswer
-      key={`question_${question.id}`}
-      answerId={answerId!}
-      question={question}
-      readOnly={readOnly}
-      saveAnswerAndUpdateClientVersion={saveAnswerAndUpdateClientVersion}
-    />
-  );
-};
-
-const TextResponse = (props: TextResponseAnswerProps): JSX.Element => {
-  const {
-    question,
-    answerId,
-    readOnly,
-    graderView,
-    saveAnswerAndUpdateClientVersion,
-    handleUploadTextResponseFiles,
-  } = props;
-  return (
-    <TextResponseAnswer
-      key={`question_${question.id}`}
-      answerId={answerId!}
-      graderView={graderView}
-      handleUploadTextResponseFiles={handleUploadTextResponseFiles}
-      question={question}
-      readOnly={readOnly}
-      saveAnswerAndUpdateClientVersion={saveAnswerAndUpdateClientVersion}
-    />
-  );
-};
-
-const FileUpload = (props: FileUploadAnswerProps): JSX.Element => {
-  const { question, answerId, readOnly, handleUploadTextResponseFiles } = props;
-  return (
-    <FileUploadAnswer
-      key={`question_${question.id}`}
-      answerId={answerId!}
-      handleUploadTextResponseFiles={handleUploadTextResponseFiles}
-      question={question}
-      readOnly={readOnly}
-    />
-  );
-};
-
-const Scribing = (props: ScribingAnswerProps): JSX.Element => {
-  const { question, answerId } = props;
-  return <ScribingView key={`question_${question.id}`} answerId={answerId!} />;
-};
-
-const VoiceResponse = (props: VoiceResponseAnswerProps): JSX.Element => {
-  const { question, answerId, readOnly, saveAnswerAndUpdateClientVersion } =
-    props;
-  return (
-    <VoiceResponseAnswer
-      key={`question_${question.id}`}
-      answerId={answerId!}
-      question={question}
-      readOnly={readOnly}
-      saveAnswerAndUpdateClientVersion={saveAnswerAndUpdateClientVersion}
-    />
-  );
-};
-
-const ForumPostResponse = (
-  props: ForumPostResponseAnswerProps,
-): JSX.Element => {
-  const { question, answerId, readOnly, saveAnswerAndUpdateClientVersion } =
-    props;
-  return (
-    <ForumPostResponseAnswer
-      key={`question_${question.id}`}
-      answerId={answerId!}
-      question={question}
-      readOnly={readOnly}
-      saveAnswerAndUpdateClientVersion={saveAnswerAndUpdateClientVersion}
-    />
-  );
-};
-
-const AnswerNotImplemented = (): JSX.Element => {
-  const { t } = useTranslation();
-
-  return (
-    <Card className="bg-yellow-100">
-      <CardContent>{t(translations.rendererNotImplemented)}</CardContent>
-    </Card>
-  );
-};
-
-export const AnswerMapper = {
-  MultipleChoice: (props: McqAnswerProps): JSX.Element => (
-    <MultipleChoice {...props} />
+const answerComponents: Record<
+  Exclude<keyof typeof QuestionType, 'Comprehension'>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  LazyExoticComponent<any>
+> = {
+  MultipleChoice: lazy(
+    () =>
+      import(
+        /* webpackChunkName: "MultipleChoiceAdapter" */
+        './adapters/MultipleChoiceAdapter'
+      ),
   ),
-  MultipleResponse: (props: MrqAnswerProps): JSX.Element => (
-    <MultipleResponse {...props} />
+  MultipleResponse: lazy(
+    () =>
+      import(
+        /* webpackChunkName: "MultipleResponseAdapter" */
+        './adapters/MultipleResponseAdapter'
+      ),
   ),
-  Programming: (props: ProgrammingAnswerProps): JSX.Element => (
-    <Programming {...props} />
+  Programming: lazy(
+    () =>
+      import(
+        /* webpackChunkName: "ProgrammingAdapter" */
+        './adapters/ProgrammingAdapter'
+      ),
   ),
-  TextResponse: (props: TextResponseAnswerProps): JSX.Element => (
-    <TextResponse {...props} />
+  TextResponse: lazy(
+    () =>
+      import(
+        /* webpackChunkName: "TextResponseAdapter" */
+        './adapters/TextResponseAdapter'
+      ),
   ),
-  FileUpload: (props: FileUploadAnswerProps): JSX.Element => (
-    <FileUpload {...props} />
+  FileUpload: lazy(
+    () =>
+      import(
+        /* webpackChunkName: "FileUploadAdapter" */
+        './adapters/FileUploadAdapter'
+      ),
   ),
-  Comprehension: (): JSX.Element => <AnswerNotImplemented />,
-  Scribing: (props: ScribingAnswerProps): JSX.Element => (
-    <Scribing {...props} />
+  Scribing: lazy(
+    () =>
+      import(
+        /* webpackChunkName: "ScribingAdapter" */
+        './adapters/ScribingAdapter'
+      ),
   ),
-  VoiceResponse: (props: VoiceResponseAnswerProps): JSX.Element => (
-    <VoiceResponse {...props} />
+  VoiceResponse: lazy(
+    () =>
+      import(
+        /* webpackChunkName: "VoiceResponseAdapter" */
+        './adapters/VoiceResponseAdapter'
+      ),
   ),
-  ForumPostResponse: (props: ForumPostResponseAnswerProps): JSX.Element => (
-    <ForumPostResponse {...props} />
+  ForumPostResponse: lazy(
+    () =>
+      import(
+        /* webpackChunkName: "ForumPostResponseAdapter" */
+        './adapters/ForumPostResponseAdapter'
+      ),
   ),
 };
 
@@ -214,32 +88,38 @@ interface AnswerComponentProps<T extends keyof typeof QuestionType> {
   answerProps: AnswerPropsMap[T];
 }
 
-const Answer = <T extends keyof typeof QuestionType>(
-  props: AnswerComponentProps<T>,
-): JSX.Element => {
-  const { answerId, questionType, question, answerProps } = props;
+const SuspensefulAnswer = <T extends keyof typeof QuestionType>({
+  answerId,
+  questionType,
+  question,
+  answerProps,
+}: AnswerComponentProps<T>): JSX.Element => {
   const { t } = useTranslation();
 
-  if (!answerId) {
-    return <Alert severity="warning">{t(translations.missingAnswer)}</Alert>;
-  }
-
-  if (question.viewHistory) {
-    return <PastAnswers question={question} />;
-  }
+  if (!answerId)
+    return (
+      <Alert severity="warning">
+        {t({
+          id: 'course.assessment.submission.Answer.missingAnswer',
+          defaultMessage:
+            'There is no answer submitted for this question - this might be caused by the addition of this question after the submission is submitted.',
+        })}
+      </Alert>
+    );
 
-  const Component = AnswerMapper[questionType];
+  if (question.viewHistory) return <PastAnswers question={question} />;
 
-  if (!Component) {
-    return <AnswerNotImplemented />;
-  }
+  // @ts-expect-error
+  const Adapter = answerComponents[questionType];
+  if (!Adapter) return <AnswerNotImplemented />;
 
-  // "Any" type is used here as the props are dynamically generated
-  // depending on the different answer type and typescript
-  // does not support union typing for the elements.
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return Component(answerProps as any);
+  return <Adapter {...answerProps} />;
 };
 
+const Answer: typeof SuspensefulAnswer = (props) => (
+  <Suspense fallback={<LoadingIndicator />}>
+    <SuspensefulAnswer {...props} />
+  </Suspense>
+);
+
 export default Answer;
diff --git a/client/app/bundles/course/assessment/submission/components/answers/AnswerNotImplemented.tsx b/client/app/bundles/course/assessment/submission/components/answers/AnswerNotImplemented.tsx
new file mode 100644
index 00000000000..30b35151d16
--- /dev/null
+++ b/client/app/bundles/course/assessment/submission/components/answers/AnswerNotImplemented.tsx
@@ -0,0 +1,21 @@
+import { Card, CardContent } from '@mui/material';
+
+import useTranslation from 'lib/hooks/useTranslation';
+
+const AnswerNotImplemented = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  return (
+    <Card className="bg-yellow-100">
+      <CardContent>
+        {t({
+          id: 'course.assessment.submission.Answer.rendererNotImplemented',
+          defaultMessage:
+            'The display for this question type has not been implemented yet.',
+        })}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default AnswerNotImplemented;
diff --git a/client/app/bundles/course/assessment/submission/components/answers/adapters/FileUploadAdapter.tsx b/client/app/bundles/course/assessment/submission/components/answers/adapters/FileUploadAdapter.tsx
new file mode 100644
index 00000000000..09cc52f2064
--- /dev/null
+++ b/client/app/bundles/course/assessment/submission/components/answers/adapters/FileUploadAdapter.tsx
@@ -0,0 +1,17 @@
+import FileUploadAnswer from '../FileUpload';
+import type { FileUploadAnswerProps } from '../types';
+
+const FileUploadAdapter = (props: FileUploadAnswerProps): JSX.Element => {
+  const { question, answerId, readOnly, handleUploadTextResponseFiles } = props;
+  return (
+    <FileUploadAnswer
+      key={`question_${question.id}`}
+      answerId={answerId!}
+      handleUploadTextResponseFiles={handleUploadTextResponseFiles}
+      question={question}
+      readOnly={readOnly}
+    />
+  );
+};
+
+export default FileUploadAdapter;
diff --git a/client/app/bundles/course/assessment/submission/components/answers/adapters/ForumPostResponseAdapter.tsx b/client/app/bundles/course/assessment/submission/components/answers/adapters/ForumPostResponseAdapter.tsx
new file mode 100644
index 00000000000..82bccc54a88
--- /dev/null
+++ b/client/app/bundles/course/assessment/submission/components/answers/adapters/ForumPostResponseAdapter.tsx
@@ -0,0 +1,20 @@
+import ForumPostResponseAnswer from '../ForumPostResponse';
+import type { ForumPostResponseAnswerProps } from '../types';
+
+const ForumPostResponseAdapter = (
+  props: ForumPostResponseAnswerProps,
+): JSX.Element => {
+  const { question, answerId, readOnly, saveAnswerAndUpdateClientVersion } =
+    props;
+  return (
+    <ForumPostResponseAnswer
+      key={`question_${question.id}`}
+      answerId={answerId!}
+      question={question}
+      readOnly={readOnly}
+      saveAnswerAndUpdateClientVersion={saveAnswerAndUpdateClientVersion}
+    />
+  );
+};
+
+export default ForumPostResponseAdapter;
diff --git a/client/app/bundles/course/assessment/submission/components/answers/adapters/MultipleChoiceAdapter.tsx b/client/app/bundles/course/assessment/submission/components/answers/adapters/MultipleChoiceAdapter.tsx
new file mode 100644
index 00000000000..f26bb95dddf
--- /dev/null
+++ b/client/app/bundles/course/assessment/submission/components/answers/adapters/MultipleChoiceAdapter.tsx
@@ -0,0 +1,26 @@
+import MultipleChoiceAnswer from '../MultipleChoice';
+import type { McqAnswerProps } from '../types';
+
+const MultipleChoiceAdapter = (props: McqAnswerProps): JSX.Element => {
+  const {
+    question,
+    answerId,
+    readOnly,
+    graderView,
+    showMcqMrqSolution,
+    saveAnswerAndUpdateClientVersion,
+  } = props;
+  return (
+    <MultipleChoiceAnswer
+      key={`question_${question.id}`}
+      answerId={answerId!}
+      graderView={graderView}
+      question={question}
+      readOnly={readOnly}
+      saveAnswerAndUpdateClientVersion={saveAnswerAndUpdateClientVersion}
+      showMcqMrqSolution={showMcqMrqSolution}
+    />
+  );
+};
+
+export default MultipleChoiceAdapter;
diff --git a/client/app/bundles/course/assessment/submission/components/answers/adapters/MultipleResponseAdapter.tsx b/client/app/bundles/course/assessment/submission/components/answers/adapters/MultipleResponseAdapter.tsx
new file mode 100644
index 00000000000..01877b712e1
--- /dev/null
+++ b/client/app/bundles/course/assessment/submission/components/answers/adapters/MultipleResponseAdapter.tsx
@@ -0,0 +1,26 @@
+import MultipleResponseAnswer from '../MultipleResponse';
+import type { MrqAnswerProps } from '../types';
+
+const MultipleResponseAdapter = (props: MrqAnswerProps): JSX.Element => {
+  const {
+    question,
+    answerId,
+    readOnly,
+    graderView,
+    showMcqMrqSolution,
+    saveAnswerAndUpdateClientVersion,
+  } = props;
+  return (
+    <MultipleResponseAnswer
+      key={`question_${question.id}`}
+      answerId={answerId!}
+      graderView={graderView}
+      question={question}
+      readOnly={readOnly}
+      saveAnswerAndUpdateClientVersion={saveAnswerAndUpdateClientVersion}
+      showMcqMrqSolution={showMcqMrqSolution}
+    />
+  );
+};
+
+export default MultipleResponseAdapter;
diff --git a/client/app/bundles/course/assessment/submission/components/answers/adapters/ProgrammingAdapter.tsx b/client/app/bundles/course/assessment/submission/components/answers/adapters/ProgrammingAdapter.tsx
new file mode 100644
index 00000000000..8b3170fdf30
--- /dev/null
+++ b/client/app/bundles/course/assessment/submission/components/answers/adapters/ProgrammingAdapter.tsx
@@ -0,0 +1,18 @@
+import ProgrammingAnswer from '../Programming';
+import type { ProgrammingAnswerProps } from '../types';
+
+const ProgrammingAdapter = (props: ProgrammingAnswerProps): JSX.Element => {
+  const { question, answerId, readOnly, saveAnswerAndUpdateClientVersion } =
+    props;
+  return (
+    <ProgrammingAnswer
+      key={`question_${question.id}`}
+      answerId={answerId!}
+      question={question}
+      readOnly={readOnly}
+      saveAnswerAndUpdateClientVersion={saveAnswerAndUpdateClientVersion}
+    />
+  );
+};
+
+export default ProgrammingAdapter;
diff --git a/client/app/bundles/course/assessment/submission/components/answers/adapters/ScribingAdapter.tsx b/client/app/bundles/course/assessment/submission/components/answers/adapters/ScribingAdapter.tsx
new file mode 100644
index 00000000000..3bbc73aeb5b
--- /dev/null
+++ b/client/app/bundles/course/assessment/submission/components/answers/adapters/ScribingAdapter.tsx
@@ -0,0 +1,9 @@
+import ScribingView from '../../../containers/ScribingView';
+import type { ScribingAnswerProps } from '../types';
+
+const ScribingAdapter = (props: ScribingAnswerProps): JSX.Element => {
+  const { question, answerId } = props;
+  return <ScribingView key={`question_${question.id}`} answerId={answerId!} />;
+};
+
+export default ScribingAdapter;
diff --git a/client/app/bundles/course/assessment/submission/components/answers/adapters/TextResponseAdapter.tsx b/client/app/bundles/course/assessment/submission/components/answers/adapters/TextResponseAdapter.tsx
new file mode 100644
index 00000000000..5b14509e4ff
--- /dev/null
+++ b/client/app/bundles/course/assessment/submission/components/answers/adapters/TextResponseAdapter.tsx
@@ -0,0 +1,26 @@
+import TextResponseAnswer from '../TextResponse';
+import type { TextResponseAnswerProps } from '../types';
+
+const TextResponseAdapter = (props: TextResponseAnswerProps): JSX.Element => {
+  const {
+    question,
+    answerId,
+    readOnly,
+    graderView,
+    saveAnswerAndUpdateClientVersion,
+    handleUploadTextResponseFiles,
+  } = props;
+  return (
+    <TextResponseAnswer
+      key={`question_${question.id}`}
+      answerId={answerId!}
+      graderView={graderView}
+      handleUploadTextResponseFiles={handleUploadTextResponseFiles}
+      question={question}
+      readOnly={readOnly}
+      saveAnswerAndUpdateClientVersion={saveAnswerAndUpdateClientVersion}
+    />
+  );
+};
+
+export default TextResponseAdapter;
diff --git a/client/app/bundles/course/assessment/submission/components/answers/adapters/VoiceResponseAdapter.tsx b/client/app/bundles/course/assessment/submission/components/answers/adapters/VoiceResponseAdapter.tsx
new file mode 100644
index 00000000000..15109b3b536
--- /dev/null
+++ b/client/app/bundles/course/assessment/submission/components/answers/adapters/VoiceResponseAdapter.tsx
@@ -0,0 +1,18 @@
+import VoiceResponseAnswer from '../../../containers/VoiceResponseAnswer';
+import type { VoiceResponseAnswerProps } from '../types';
+
+const VoiceResponseAdapter = (props: VoiceResponseAnswerProps): JSX.Element => {
+  const { question, answerId, readOnly, saveAnswerAndUpdateClientVersion } =
+    props;
+  return (
+    <VoiceResponseAnswer
+      key={`question_${question.id}`}
+      answerId={answerId!}
+      question={question}
+      readOnly={readOnly}
+      saveAnswerAndUpdateClientVersion={saveAnswerAndUpdateClientVersion}
+    />
+  );
+};
+
+export default VoiceResponseAdapter;

From c2eb7d558d186586f276f9176ab513be53a1ce68 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:44:35 +0800
Subject: [PATCH 11/36] perf(index): remove initializers, webfontloader -> CSS
 `@import`

---
 client/app/index.tsx                   |  2 --
 client/app/initializers.js             | 22 ----------------------
 client/app/lib/initializers/webfont.js | 12 ------------
 client/app/theme/index.css             |  2 ++
 client/package.json                    |  2 --
 client/yarn.lock                       | 10 ----------
 6 files changed, 2 insertions(+), 48 deletions(-)
 delete mode 100644 client/app/initializers.js
 delete mode 100644 client/app/lib/initializers/webfont.js

diff --git a/client/app/index.tsx b/client/app/index.tsx
index 4f9a06b92d1..193c778ab48 100644
--- a/client/app/index.tsx
+++ b/client/app/index.tsx
@@ -1,8 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import './initializers';
-
 import App from './App';
 import 'theme/index.css';
 
diff --git a/client/app/initializers.js b/client/app/initializers.js
deleted file mode 100644
index 264d98d39d0..00000000000
--- a/client/app/initializers.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/* eslint-disable global-require */
-
-function loadModules() {
-  // Require web font last so that it doesn't block the load of current module.
-  require('lib/initializers/webfont');
-}
-
-if (!global.Intl) {
-  Promise.all([
-    import(/* webpackChunkName: "intl" */ 'intl'),
-    import(/* webpackChunkName: "intl" */ 'intl/locale-data/jsonp/en'),
-    import(/* webpackChunkName: "intl" */ 'intl/locale-data/jsonp/zh'),
-  ])
-    .then(() => {
-      loadModules();
-    })
-    .catch((e) => {
-      throw e;
-    });
-} else {
-  loadModules();
-}
diff --git a/client/app/lib/initializers/webfont.js b/client/app/lib/initializers/webfont.js
deleted file mode 100644
index 4aa0a11b776..00000000000
--- a/client/app/lib/initializers/webfont.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- *  Load the google fonts.
- *  See https://github.com/typekit/webfontloader
- */
-import WebFont from 'webfontloader';
-
-WebFont.load({
-  google: {
-    families: ['Inter:400,500,600,700,800,i4'],
-  },
-  timeout: 1500,
-});
diff --git a/client/app/theme/index.css b/client/app/theme/index.css
index 076bddc4918..1d1dfb5dd2d 100644
--- a/client/app/theme/index.css
+++ b/client/app/theme/index.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/client/package.json b/client/package.json
index da4c7900aa6..cc35fc7df66 100644
--- a/client/package.json
+++ b/client/package.json
@@ -60,7 +60,6 @@
     "idb": "^8.0.0",
     "immer": "^10.0.4",
     "immutable": "^3.8.2",
-    "intl": "^1.2.5",
     "jquery": "^3.7.1",
     "jquery-ui": "^1.13.3",
     "js-cookie": "^3.0.5",
@@ -105,7 +104,6 @@
     "redux-thunk": "^2.4.2",
     "resize-observer-polyfill": "^1.5.1",
     "rollbar": "^2.26.3",
-    "webfontloader": "^1.6.28",
     "yup": "^0.32.11"
   },
   "devDependencies": {
diff --git a/client/yarn.lock b/client/yarn.lock
index 1da56906603..8e1447ef6af 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -6370,11 +6370,6 @@ intl-messageformat@10.5.11:
     "@formatjs/icu-messageformat-parser" "2.7.6"
     tslib "^2.4.0"
 
-intl@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/intl/-/intl-1.2.5.tgz#82244a2190c4e419f8371f5aa34daa3420e2abde"
-  integrity sha512-rK0KcPHeBFBcqsErKSpvZnrOmWOj+EmDkyJ57e90YWaQNqbcivcqmKDlHEeNprDWOsKzPsh1BfSpPQdDvclHVw==
-
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@@ -11218,11 +11213,6 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
-webfontloader@^1.6.28:
-  version "1.6.28"
-  resolved "https://registry.yarnpkg.com/webfontloader/-/webfontloader-1.6.28.tgz#db786129253cb6e8eae54c2fb05f870af6675bae"
-  integrity sha512-Egb0oFEga6f+nSgasH3E0M405Pzn6y3/9tOVanv/DLfa1YBIgcv90L18YyWnvXkRbIM17v5Kv6IT2N6g1x5tvQ==
-
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"

From 76778ad1217a723f0616e8bc6876b89f62c6b04c Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:45:09 +0800
Subject: [PATCH 12/36] fix(store): suppress legacy `onSubmit`, `onConfirm`
 console errors

---
 client/app/store.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/client/app/store.ts b/client/app/store.ts
index 9b612953ae5..bc0d260f8aa 100644
--- a/client/app/store.ts
+++ b/client/app/store.ts
@@ -108,6 +108,12 @@ const purgeableRootReducer: Reducer<AppState> = (state, action) => {
 
 export const store = configureStore({
   reducer: purgeableRootReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredPaths: [/\.onSubmit$/, /\.onConfirm$/],
+      },
+    }),
 });
 
 export type AppState = ReturnType<typeof rootReducer>;

From 09ff8c82a4baf5d6003b9c2b55be18bffcbf586d Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:46:03 +0800
Subject: [PATCH 13/36] perf: replace lodash with lodash-es absolute imports

---
 client/.babelrc                                      |  8 --------
 .../course/assessment/question/commons/utils.ts      |  2 +-
 .../submission/reducers/liveFeedbackChats/index.ts   |  2 +-
 .../assessment/submission/reducers/scribing.js       |  2 +-
 .../conditions/conditions/AssessmentCondition.tsx    |  2 +-
 client/app/lib/components/form/Form.tsx              |  2 +-
 .../TanStackTableBuilder/useTanStackTableBuilder.tsx |  2 +-
 client/app/lib/containers/AuthPagesContainer.tsx     |  2 +-
 client/app/lib/hooks/useDebounce.ts                  |  3 +--
 client/package.json                                  |  3 ++-
 client/yarn.lock                                     | 12 ++++++++++++
 11 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/client/.babelrc b/client/.babelrc
index 91b03cadc80..ad46cff5b3f 100644
--- a/client/.babelrc
+++ b/client/.babelrc
@@ -14,14 +14,6 @@
         "ast": true
       }
     ],
-    [
-      "babel-plugin-import",
-      {
-        "libraryName": "lodash",
-        "libraryDirectory": "",
-        "camel2DashComponentName": false
-      }
-    ],
     [
       "babel-plugin-import",
       {
diff --git a/client/app/bundles/course/assessment/question/commons/utils.ts b/client/app/bundles/course/assessment/question/commons/utils.ts
index 6fafe7ade33..1bc2dadb851 100644
--- a/client/app/bundles/course/assessment/question/commons/utils.ts
+++ b/client/app/bundles/course/assessment/question/commons/utils.ts
@@ -1,4 +1,4 @@
-import { isNumber } from 'lodash';
+import isNumber from 'lodash-es/isNumber';
 
 const getNumberBetweenTwoSquareBrackets = (str: string): number | undefined => {
   const match = str.match(/\[(\d+)\]/);
diff --git a/client/app/bundles/course/assessment/submission/reducers/liveFeedbackChats/index.ts b/client/app/bundles/course/assessment/submission/reducers/liveFeedbackChats/index.ts
index b5e115df408..bcdd7d98d7e 100644
--- a/client/app/bundles/course/assessment/submission/reducers/liveFeedbackChats/index.ts
+++ b/client/app/bundles/course/assessment/submission/reducers/liveFeedbackChats/index.ts
@@ -4,7 +4,7 @@ import {
   type EntityState,
   PayloadAction,
 } from '@reduxjs/toolkit';
-import { shuffle } from 'lodash';
+import shuffle from 'lodash-es/shuffle';
 
 import moment, { SHORT_TIME_FORMAT } from 'lib/moment';
 
diff --git a/client/app/bundles/course/assessment/submission/reducers/scribing.js b/client/app/bundles/course/assessment/submission/reducers/scribing.js
index beffdc744cf..73572c8f9e2 100644
--- a/client/app/bundles/course/assessment/submission/reducers/scribing.js
+++ b/client/app/bundles/course/assessment/submission/reducers/scribing.js
@@ -1,5 +1,5 @@
 import { produce } from 'immer';
-import { isNumber } from 'lodash';
+import isNumber from 'lodash-es/isNumber';
 
 import actions, {
   canvasActionTypes,
diff --git a/client/app/lib/components/extensions/conditions/conditions/AssessmentCondition.tsx b/client/app/lib/components/extensions/conditions/conditions/AssessmentCondition.tsx
index 0d9c8dae133..5496f575108 100644
--- a/client/app/lib/components/extensions/conditions/conditions/AssessmentCondition.tsx
+++ b/client/app/lib/components/extensions/conditions/conditions/AssessmentCondition.tsx
@@ -3,7 +3,7 @@ import { Controller, useForm } from 'react-hook-form';
 import { Launch } from '@mui/icons-material';
 import { Alert, Autocomplete, Box, Typography } from '@mui/material';
 import { produce } from 'immer';
-import { isNumber } from 'lodash';
+import isNumber from 'lodash-es/isNumber';
 import {
   AssessmentConditionData,
   AvailableAssessments,
diff --git a/client/app/lib/components/form/Form.tsx b/client/app/lib/components/form/Form.tsx
index d76cd8483ed..76496cda426 100644
--- a/client/app/lib/components/form/Form.tsx
+++ b/client/app/lib/components/form/Form.tsx
@@ -20,7 +20,7 @@ import {
 } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { Button, Slide, Typography } from '@mui/material';
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash-es/isEmpty';
 import { AnyObjectSchema } from 'yup';
 
 import { setReactHookFormError } from 'lib/helpers/react-hook-form-helper';
diff --git a/client/app/lib/components/table/TanStackTableBuilder/useTanStackTableBuilder.tsx b/client/app/lib/components/table/TanStackTableBuilder/useTanStackTableBuilder.tsx
index ae1d1ae7f95..e9e264b4b77 100644
--- a/client/app/lib/components/table/TanStackTableBuilder/useTanStackTableBuilder.tsx
+++ b/client/app/lib/components/table/TanStackTableBuilder/useTanStackTableBuilder.tsx
@@ -11,7 +11,7 @@ import {
   Row,
   useReactTable,
 } from '@tanstack/react-table';
-import { isEmpty } from 'lodash';
+import isEmpty from 'lodash-es/isEmpty';
 
 import { RowEqualityData, TableProps } from '../adapters';
 import { TableTemplate } from '../builder';
diff --git a/client/app/lib/containers/AuthPagesContainer.tsx b/client/app/lib/containers/AuthPagesContainer.tsx
index 17bfdc1cb78..9a683756b69 100644
--- a/client/app/lib/containers/AuthPagesContainer.tsx
+++ b/client/app/lib/containers/AuthPagesContainer.tsx
@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, useState } from 'react';
 import { Outlet, useLocation, useOutletContext } from 'react-router-dom';
-import { isString } from 'lodash';
+import isString from 'lodash-es/isString';
 
 import Page from 'lib/components/core/layouts/Page';
 
diff --git a/client/app/lib/hooks/useDebounce.ts b/client/app/lib/hooks/useDebounce.ts
index 610ef95e62e..9aaca0fe97b 100644
--- a/client/app/lib/hooks/useDebounce.ts
+++ b/client/app/lib/hooks/useDebounce.ts
@@ -1,6 +1,5 @@
 import { DependencyList, useCallback, useEffect } from 'react';
-import type { DebouncedFunc } from 'lodash';
-import { debounce } from 'lodash';
+import debounce, { type DebouncedFunc } from 'lodash-es/debounce';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const useDebounce = <T extends (...args: any[]) => any>(
diff --git a/client/package.json b/client/package.json
index cc35fc7df66..b3a4ceb2020 100644
--- a/client/package.json
+++ b/client/package.json
@@ -63,7 +63,7 @@
     "jquery": "^3.7.1",
     "jquery-ui": "^1.13.3",
     "js-cookie": "^3.0.5",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "mirror-creator": "1.1.0",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.44",
@@ -125,6 +125,7 @@
     "@types/enzyme": "^3.10.18",
     "@types/jest": "^29.5.12",
     "@types/jquery": "^3.5.29",
+    "@types/lodash-es": "^4.17.12",
     "@types/papaparse": "^5.3.14",
     "@types/rails__actioncable": "^6.1.10",
     "@types/react": "^18.2.67",
diff --git a/client/yarn.lock b/client/yarn.lock
index 8e1447ef6af..95030702c04 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2425,6 +2425,18 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/lodash-es@^4.17.12":
+  version "4.17.12"
+  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.12.tgz#65f6d1e5f80539aa7cfbfc962de5def0cf4f341b"
+  integrity sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.17.16"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.16.tgz#94ae78fab4a38d73086e962d0b65c30d816bfb0a"
+  integrity sha512-HX7Em5NYQAXKW+1T+FiuG27NGwzJfCX3s1GjOa7ujxZa52kjJLOr4FUxT+giF6Tgxv1e+/czV/iTtBw27WTU9g==
+
 "@types/lodash@^4.14.175":
   version "4.14.182"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"

From c57ed142a9deec029b536b171430728020ddc908 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:49:49 +0800
Subject: [PATCH 14/36] feat(webpack): allow configuring client port

---
 client/webpack.dev.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/webpack.dev.js b/client/webpack.dev.js
index 1e6c32f175c..f435cd3db17 100644
--- a/client/webpack.dev.js
+++ b/client/webpack.dev.js
@@ -5,6 +5,7 @@ const common = require('./webpack.common');
 const packageJSON = require('./package.json');
 
 const SERVER_PORT = packageJSON.devServer.serverPort;
+const CLIENT_PORT = packageJSON.devServer.clientPort;
 const APP_HOST = packageJSON.devServer.appHost;
 
 const BLUE_ANSI = '\x1b[36m%s\x1b[0m';
@@ -24,6 +25,7 @@ module.exports = merge(common, {
   mode: 'development',
   devtool: 'eval-cheap-module-source-map',
   devServer: {
+    port: CLIENT_PORT,
     allowedHosts: [`.${APP_HOST}`],
     historyApiFallback: true,
     devMiddleware: {

From 3acdce4fac852ea046fc2824c96efd715ef50bbf Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:50:34 +0800
Subject: [PATCH 15/36] chore(webpack): add webpack config types

---
 client/webpack.common.js | 3 +++
 client/webpack.dev.js    | 3 +++
 client/webpack.prod.js   | 3 +++
 3 files changed, 9 insertions(+)

diff --git a/client/webpack.common.js b/client/webpack.common.js
index 5b96da75f32..70becf8ab2b 100644
--- a/client/webpack.common.js
+++ b/client/webpack.common.js
@@ -14,6 +14,9 @@ const packageJSON = require('./package.json');
 
 const ENV_DIR = process.env.BABEL_ENV === 'e2e-test' ? './.env.test' : './.env';
 
+/**
+ * @type {import('webpack').Configuration}
+ */
 module.exports = {
   entry: {
     coursemology: [
diff --git a/client/webpack.dev.js b/client/webpack.dev.js
index f435cd3db17..1e3d8799ddd 100644
--- a/client/webpack.dev.js
+++ b/client/webpack.dev.js
@@ -21,6 +21,9 @@ const bypassProxyIf = [
   (request) => request.url.startsWith('/oauth'),
 ];
 
+/**
+ * @type {import('webpack').Configuration}
+ */
 module.exports = merge(common, {
   mode: 'development',
   devtool: 'eval-cheap-module-source-map',
diff --git a/client/webpack.prod.js b/client/webpack.prod.js
index 84d484a03c3..b67e2636cae 100644
--- a/client/webpack.prod.js
+++ b/client/webpack.prod.js
@@ -5,6 +5,9 @@ const common = require('./webpack.common');
 
 const AVAILABLE_CPUS = +process.env.AVAILABLE_CPUS;
 
+/**
+ * @type {import('webpack').Configuration}
+ */
 module.exports = merge(common, {
   mode: 'production',
   devtool: 'source-map',

From 19d0adedae8d23bacd0f8e7f7c51331030123ecc Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:51:07 +0800
Subject: [PATCH 16/36] perf(webpack): remove unused entry points

---
 client/app/__test__/setup.js |  2 --
 client/package.json          |  2 --
 client/webpack.common.js     |  9 +--------
 client/yarn.lock             | 20 +-------------------
 4 files changed, 2 insertions(+), 31 deletions(-)

diff --git a/client/app/__test__/setup.js b/client/app/__test__/setup.js
index 0fcb817bfdd..ce09d53127a 100644
--- a/client/app/__test__/setup.js
+++ b/client/app/__test__/setup.js
@@ -14,8 +14,6 @@ import './mocks/matchMedia';
 
 Enzyme.configure({ adapter: new Adapter() });
 
-require('@babel/polyfill');
-
 const timeZone = 'Asia/Singapore';
 const intlCache = createIntlCache();
 const intl = createIntl({ locale: 'en', timeZone }, intlCache);
diff --git a/client/package.json b/client/package.json
index b3a4ceb2020..f2c6892eb57 100644
--- a/client/package.json
+++ b/client/package.json
@@ -30,8 +30,6 @@
     "extends": "react-app"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.12.1",
-    "@babel/runtime": "^7.26.10",
     "@ckeditor/ckeditor5-build-custom": "github:Coursemology/CKEditor5-build-coursemology#0.3.0",
     "@ckeditor/ckeditor5-react": "^6.2.0",
     "@emotion/react": "^11.11.4",
diff --git a/client/webpack.common.js b/client/webpack.common.js
index 70becf8ab2b..80d83dbc2e3 100644
--- a/client/webpack.common.js
+++ b/client/webpack.common.js
@@ -18,14 +18,7 @@ const ENV_DIR = process.env.BABEL_ENV === 'e2e-test' ? './.env.test' : './.env';
  * @type {import('webpack').Configuration}
  */
 module.exports = {
-  entry: {
-    coursemology: [
-      '@babel/polyfill',
-      'jquery',
-      './app/index',
-      './app/lib/moment-timezone',
-    ],
-  },
+  entry: './app/index.tsx',
   output: {
     path: join(__dirname, 'build'),
     publicPath: '/',
diff --git a/client/yarn.lock b/client/yarn.lock
index 95030702c04..84e3af58a2f 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -957,14 +957,6 @@
     "@babel/helper-create-regexp-features-plugin" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.24.0"
 
-"@babel/polyfill@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.12.1.tgz#1f2d6371d1261bbd961f3c5d5909150e12d0bd96"
-  integrity sha512-X0pi0V6gxLi6lFZpGmeNa4zxtwEmCs42isWLNjZZDE0Y8yVfgu0T2OAHlzBbdYlqbW/YXVvoBHpATEM+goCj8g==
-  dependencies:
-    core-js "^2.6.5"
-    regenerator-runtime "^0.13.4"
-
 "@babel/preset-env@^7.20.2", "@babel/preset-env@^7.24.3":
   version "7.24.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.24.3.tgz#f3f138c844ffeeac372597b29c51b5259e8323a3"
@@ -1107,7 +1099,7 @@
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.1", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.24.0", "@babel/runtime@^7.24.1", "@babel/runtime@^7.26.10", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.1", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.24.0", "@babel/runtime@^7.24.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.26.10"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.10.tgz#a07b4d8fa27af131a633d7b3524db803eb4764c2"
   integrity sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw==
@@ -4148,11 +4140,6 @@ core-js-pure@^3.30.2:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.41.0.tgz#349fecad168d60807a31e83c99d73d786fe80811"
   integrity sha512-71Gzp96T9YPk63aUvE5Q5qP+DryB4ZloUZPSOebGM88VNw8VNfvdA7z6kGA8iGOTEzAomsRidp4jXSmUIJsL+Q==
 
-core-js@^2.6.5:
-  version "2.6.12"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
-  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
-
 core-js@^3.30.2:
   version "3.30.2"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.30.2.tgz#6528abfda65e5ad728143ea23f7a14f0dcf503fc"
@@ -9692,11 +9679,6 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
-regenerator-runtime@^0.13.4:
-  version "0.13.11"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
-  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
-
 regenerator-runtime@^0.14.0:
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz#5e19d68eb12d486f797e15a3c6a918f7cec5eb45"

From 9b3a80c39bc57db0a1ccdbcb2da0a38742b07de1 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:51:34 +0800
Subject: [PATCH 17/36] perf(webpack): remove unused expose-loader

---
 client/app/lib/moment-timezone.js | 2 --
 client/package.json               | 1 -
 client/webpack.common.js          | 7 -------
 client/yarn.lock                  | 5 -----
 4 files changed, 15 deletions(-)
 delete mode 100644 client/app/lib/moment-timezone.js

diff --git a/client/app/lib/moment-timezone.js b/client/app/lib/moment-timezone.js
deleted file mode 100644
index eecb46ced8c..00000000000
--- a/client/app/lib/moment-timezone.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// Intermediate module for loading as a global in Webpack
-module.exports = require('lib/moment').default;
diff --git a/client/package.json b/client/package.json
index f2c6892eb57..84060cd46dc 100644
--- a/client/package.json
+++ b/client/package.json
@@ -167,7 +167,6 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-simple-import-sort": "^12.1.0",
     "eslint-plugin-sonarjs": "^0.24.0",
-    "expose-loader": "^5.0.0",
     "favicons": "^7.1.4",
     "favicons-webpack-plugin": "^6.0.1",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
diff --git a/client/webpack.common.js b/client/webpack.common.js
index 80d83dbc2e3..4162225f374 100644
--- a/client/webpack.common.js
+++ b/client/webpack.common.js
@@ -160,13 +160,6 @@ module.exports = {
         ],
         exclude: /node_modules/,
       },
-      {
-        test: require.resolve('./app/lib/moment-timezone'),
-        loader: 'expose-loader',
-        options: {
-          exposes: 'moment',
-        },
-      },
       {
         test: /\.md$/,
         type: 'asset/source',
diff --git a/client/yarn.lock b/client/yarn.lock
index 84e3af58a2f..2e89aca8ffa 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -5411,11 +5411,6 @@ expect@^29.0.0, expect@^29.7.0:
     jest-message-util "^29.7.0"
     jest-util "^29.7.0"
 
-expose-loader@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/expose-loader/-/expose-loader-5.0.0.tgz#41368903eb1246b7c09fecf32c5cb3f67d0260e6"
-  integrity sha512-BtUqYRmvx1bEY5HN6eK2I9URUZgNmN0x5UANuocaNjXSgfoDlkXt+wyEMe7i5DzDNh2BKJHPc5F4rBwEdSQX6w==
-
 express@^4.17.3:
   version "4.21.1"
   resolved "https://registry.yarnpkg.com/express/-/express-4.21.1.tgz#9dae5dda832f16b4eec941a4e44aa89ec481b281"

From 619ae49b42b674aa0f669c90d93ff6aac15d56fe Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:51:56 +0800
Subject: [PATCH 18/36] perf(webpack): remove unused webpack-manifest-plugin

---
 client/package.json      |  1 -
 client/webpack.common.js |  5 -----
 client/yarn.lock         | 21 ---------------------
 3 files changed, 27 deletions(-)

diff --git a/client/package.json b/client/package.json
index 84060cd46dc..7623266fb5c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -193,7 +193,6 @@
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.0.4",
-    "webpack-manifest-plugin": "^5.0.0",
     "webpack-merge": "^5.10.0"
   },
   "resolutions": {
diff --git a/client/webpack.common.js b/client/webpack.common.js
index 4162225f374..faefadfa34e 100644
--- a/client/webpack.common.js
+++ b/client/webpack.common.js
@@ -4,7 +4,6 @@ const {
   ContextReplacementPlugin,
   DefinePlugin,
 } = require('webpack');
-const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const DotenvPlugin = require('dotenv-webpack');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
@@ -70,10 +69,6 @@ module.exports = {
   plugins: [
     new DotenvPlugin({ path: ENV_DIR }),
     new IgnorePlugin({ resourceRegExp: /__test__/ }),
-    new WebpackManifestPlugin({
-      publicPath: '/webpack/',
-      writeToFileEmit: true,
-    }),
     new HtmlWebpackPlugin({ template: './public/index.html' }),
     new FaviconsWebpackPlugin({ logo: './favicon.svg', inject: true }),
     // Do not require all locales in moment
diff --git a/client/yarn.lock b/client/yarn.lock
index 2e89aca8ffa..dd3776cd9fb 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -10254,11 +10254,6 @@ sockjs@^0.3.24:
     uuid "^8.3.2"
     websocket-driver "^0.7.4"
 
-source-list-map@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
-  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
-
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
@@ -11279,14 +11274,6 @@ webpack-dev-server@^5.0.4:
     webpack-dev-middleware "^7.1.0"
     ws "^8.16.0"
 
-webpack-manifest-plugin@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-5.0.0.tgz#084246c1f295d1b3222d36e955546433ca8df803"
-  integrity sha512-8RQfMAdc5Uw3QbCQ/CBV/AXqOR8mt03B6GJmRbhWopE8GzRfEpn+k0ZuWywxW+5QZsffhmFDY1J6ohqJo+eMuw==
-  dependencies:
-    tapable "^2.0.0"
-    webpack-sources "^2.2.0"
-
 webpack-merge@^5.10.0, webpack-merge@^5.7.3:
   version "5.10.0"
   resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.10.0.tgz#a3ad5d773241e9c682803abf628d4cd62b8a4177"
@@ -11296,14 +11283,6 @@ webpack-merge@^5.10.0, webpack-merge@^5.7.3:
     flat "^5.0.2"
     wildcard "^2.0.0"
 
-webpack-sources@^2.2.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-2.3.1.tgz#570de0af163949fe272233c2cefe1b56f74511fd"
-  integrity sha512-y9EI9AO42JjEcrTJFOYmVywVZdKVUfOvDUPsJea5GIr1JOEGFVqwlY2K098fFoIjOkDzHn2AjRvM8dsBZu+gCA==
-  dependencies:
-    source-list-map "^2.0.1"
-    source-map "^0.6.1"
-
 webpack-sources@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"

From 35f22305ac3c1ad5d02c4f106f865b41df8b84c2 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:54:29 +0800
Subject: [PATCH 19/36] perf(webpack): improve CSS, Sass/SCSS compilations

---
 client/css-includes.json |  8 ++++++++
 client/postcss.config.js |  1 +
 client/webpack.common.js | 35 +++++++++--------------------------
 3 files changed, 18 insertions(+), 26 deletions(-)
 create mode 100644 client/css-includes.json

diff --git a/client/css-includes.json b/client/css-includes.json
new file mode 100644
index 00000000000..54796f124d0
--- /dev/null
+++ b/client/css-includes.json
@@ -0,0 +1,8 @@
+[
+  "app/theme/index.css",
+  "node_modules/rc-slider/assets",
+  "node_modules/react-image-crop/dist/ReactCrop.css",
+  "node_modules/react-tooltip/dist/react-tooltip.min.css",
+  "app/lib/components/core/fields/CKEditor.css",
+  "app/lib/components/core/fields/AceEditor.css"
+]
diff --git a/client/postcss.config.js b/client/postcss.config.js
index 63cef2d77b2..71774a1208c 100644
--- a/client/postcss.config.js
+++ b/client/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
     ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
diff --git a/client/webpack.common.js b/client/webpack.common.js
index faefadfa34e..9fa28fbe583 100644
--- a/client/webpack.common.js
+++ b/client/webpack.common.js
@@ -10,6 +10,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 
 const packageJSON = require('./package.json');
+const cssIncludes = require('./css-includes.json');
 
 const ENV_DIR = process.env.BABEL_ENV === 'e2e-test' ? './.env.test' : './.env';
 
@@ -91,31 +92,12 @@ module.exports = {
     rules: [
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-        include: [
-          resolve(__dirname, 'node_modules/rc-slider/assets'),
-          resolve(
-            __dirname,
-            'node_modules/react-image-crop/dist/ReactCrop.css',
-          ),
-          resolve(
-            __dirname,
-            'node_modules/react-tooltip/dist/react-tooltip.min.css',
-          ),
-          resolve(__dirname, 'app/lib/components/core/fields/CKEditor.css'),
-          resolve(__dirname, 'app/lib/components/core/fields/AceEditor.css'),
+        use: [
+          'style-loader',
+          { loader: 'css-loader', options: { sourceMap: false } },
+          'postcss-loader',
         ],
-      },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader', 'postcss-loader'],
-        include: [resolve(__dirname, 'app/theme/index.css')],
-      },
-      {
-        test: /\.scss$/,
-        use: ['style-loader', 'css-loader', 'sass-loader'],
-        include: [resolve(__dirname, 'app/lib/styles')],
-        exclude: /node_modules/,
+        include: cssIncludes.map((path) => resolve(__dirname, path)),
       },
       {
         test: /\.scss$/,
@@ -124,15 +106,16 @@ module.exports = {
           {
             loader: 'css-loader',
             options: {
-              importLoaders: 1,
+              sourceMap: false,
               modules: {
                 localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
               },
             },
           },
+          'postcss-loader',
           'sass-loader',
         ],
-        exclude: [/node_modules/, resolve(__dirname, 'app/lib/styles')],
+        exclude: [/node_modules/],
       },
       {
         test: /\.(csv|png|svg)$/i,

From 8ed1e4b9b11fe3bd934b82d1db1268e171d8ac52 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:55:45 +0800
Subject: [PATCH 20/36] fix(webpack): favicon-webpack-plugin warnings in
 development mode

---
 client/webpack.common.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/webpack.common.js b/client/webpack.common.js
index 9fa28fbe583..c42e5f7ece8 100644
--- a/client/webpack.common.js
+++ b/client/webpack.common.js
@@ -71,7 +71,11 @@ module.exports = {
     new DotenvPlugin({ path: ENV_DIR }),
     new IgnorePlugin({ resourceRegExp: /__test__/ }),
     new HtmlWebpackPlugin({ template: './public/index.html' }),
-    new FaviconsWebpackPlugin({ logo: './favicon.svg', inject: true }),
+    new FaviconsWebpackPlugin({
+      logo: './favicon.svg',
+      inject: true,
+      mode: 'auto',
+    }),
     // Do not require all locales in moment
     new ContextReplacementPlugin(/moment\/locale$/, /^\.\/(en-.*|zh-.*)$/),
     new ForkTsCheckerWebpackPlugin({

From 236160691b4d11f3042ef0aca465abafc9096b7b Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:56:36 +0800
Subject: [PATCH 21/36] fix(webpack): ENAMETOOLONG error due to too many chunks

---
 client/webpack.common.js | 22 ----------------------
 1 file changed, 22 deletions(-)

diff --git a/client/webpack.common.js b/client/webpack.common.js
index c42e5f7ece8..8d5741d506e 100644
--- a/client/webpack.common.js
+++ b/client/webpack.common.js
@@ -42,28 +42,6 @@ module.exports = {
   optimization: {
     splitChunks: {
       chunks: 'all',
-      name: (_, chunks, cacheGroupKey) => {
-        /**
-         * Workers are not part of the `coursemology` runtime, so their dependencies
-         * are packed in a separate chunk. This chunk has `name` set to `undefined`.
-         * When simply `Array.prototype.join`ed, we will get weird chunk names like
-         * `vendors~coursemology~.js` or `vendors~.js` that `application_helper.rb`
-         * should inject. Normally, this isn't an issue with `HtmlWebpackPlugin`, but
-         * since we don't have that and are manually injecting webpack assets in
-         * `layouts/default.html.slim`, we combine these `undefined` chunks into
-         * `coursemology`'s runtime. So, we have one `vendors~coursemology.js`.
-         */
-        const allChunksNames =
-          chunks
-            .map((chunk) => chunk.name)
-            .filter((name) => Boolean(name))
-            .join('~') || 'coursemology';
-
-        const prefix =
-          cacheGroupKey === 'defaultVendors' ? 'vendors' : cacheGroupKey;
-
-        return `${prefix}~${allChunksNames}`;
-      },
     },
     moduleIds: 'deterministic',
   },

From d5e548497e74005bda7c5a9191efcd94f1e1b225 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:57:12 +0800
Subject: [PATCH 22/36] perf: partially remove PropTypes in production

---
 client/.babelrc     | 9 ++++++++-
 client/package.json | 1 +
 client/yarn.lock    | 5 +++++
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/client/.babelrc b/client/.babelrc
index ad46cff5b3f..1c9ea75a9bb 100644
--- a/client/.babelrc
+++ b/client/.babelrc
@@ -36,7 +36,14 @@
   "env": {
     "production": {
       "plugins": [
-        ["react-remove-properties", { "properties": ["data-testid"] }]
+        ["react-remove-properties", { "properties": ["data-testid"] }],
+        [
+          "transform-react-remove-prop-types",
+          {
+            "mode": "remove",
+            "removeImport": true
+          }
+        ]
       ]
     },
     "test": {
diff --git a/client/package.json b/client/package.json
index 7623266fb5c..3b4f0f9c2b8 100644
--- a/client/package.json
+++ b/client/package.json
@@ -146,6 +146,7 @@
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-react-remove-properties": "^0.3.0",
     "babel-plugin-transform-import-meta": "^2.2.1",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "css-loader": "^6.11.0",
     "cssnano": "^6.1.2",
     "dotenv-webpack": "^8.0.1",
diff --git a/client/yarn.lock b/client/yarn.lock
index dd3776cd9fb..80d115948e3 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -3503,6 +3503,11 @@ babel-plugin-transform-import-meta@^2.2.1:
     "@babel/template" "^7.4.4"
     tslib "^2.4.0"
 
+babel-plugin-transform-react-remove-prop-types@^0.4.24:
+  version "0.4.24"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
+  integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==
+
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"

From 678dee10c5215d3987021a441b8e17680e7d78c9 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:58:25 +0800
Subject: [PATCH 23/36] feat(webpack): always clean build folder before
 building

---
 client/webpack.prod.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/webpack.prod.js b/client/webpack.prod.js
index b67e2636cae..22bb6db533b 100644
--- a/client/webpack.prod.js
+++ b/client/webpack.prod.js
@@ -14,6 +14,7 @@ module.exports = merge(common, {
   output: {
     filename: '[name]-[contenthash].js',
     publicPath: '/static/',
+    clean: true,
   },
   optimization: {
     usedExports: true,

From 4db8dbeb8bd57e9f6f4c6955a8a6ee38cf0d8aa0 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:58:37 +0800
Subject: [PATCH 24/36] perf(webpack): enable caching for production builds

---
 client/webpack.prod.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/webpack.prod.js b/client/webpack.prod.js
index 22bb6db533b..077df2f23ea 100644
--- a/client/webpack.prod.js
+++ b/client/webpack.prod.js
@@ -16,6 +16,9 @@ module.exports = merge(common, {
     publicPath: '/static/',
     clean: true,
   },
+  cache: {
+    type: 'filesystem',
+  },
   optimization: {
     usedExports: true,
     minimizer: [

From 05d54a42fd8b2accbd89cf92752b1db8f7732478 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 00:59:17 +0800
Subject: [PATCH 25/36] perf(webpack): use SWC for faster & more aggressive
 minification

---
 client/package.json    |  1 +
 client/webpack.prod.js |  7 ++++
 client/yarn.lock       | 81 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 89 insertions(+)

diff --git a/client/package.json b/client/package.json
index 3b4f0f9c2b8..ff73ac2d44d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -117,6 +117,7 @@
     "@formatjs/cli": "^6.2.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@svgr/webpack": "^8.1.0",
+    "@swc/core": "^1.11.21",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
diff --git a/client/webpack.prod.js b/client/webpack.prod.js
index 077df2f23ea..9ea7350bf47 100644
--- a/client/webpack.prod.js
+++ b/client/webpack.prod.js
@@ -24,6 +24,13 @@ module.exports = merge(common, {
     minimizer: [
       new TerserPlugin({
         parallel: AVAILABLE_CPUS || true,
+        minify: TerserPlugin.swcMinify,
+        extractComments: false,
+        terserOptions: {
+          compress: true,
+          mangle: true,
+          format: { comments: false },
+        },
       }),
     ],
   },
diff --git a/client/yarn.lock b/client/yarn.lock
index 80d115948e3..7522c61e3d4 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2129,6 +2129,87 @@
     "@svgr/plugin-jsx" "8.1.0"
     "@svgr/plugin-svgo" "8.1.0"
 
+"@swc/core-darwin-arm64@1.11.21":
+  version "1.11.21"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.11.21.tgz#8bae966479e96481ff4b6ac285d6684cb7e31995"
+  integrity sha512-v6gjw9YFWvKulCw3ZA1dY+LGMafYzJksm1mD4UZFZ9b36CyHFowYVYug1ajYRIRqEvvfIhHUNV660zTLoVFR8g==
+
+"@swc/core-darwin-x64@1.11.21":
+  version "1.11.21"
+  resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.11.21.tgz#231ba71b64ddac14e9ca97f4622c9d2fb681f602"
+  integrity sha512-CUiTiqKlzskwswrx9Ve5NhNoab30L1/ScOfQwr1duvNlFvarC8fvQSgdtpw2Zh3MfnfNPpyLZnYg7ah4kbT9JQ==
+
+"@swc/core-linux-arm-gnueabihf@1.11.21":
+  version "1.11.21"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.11.21.tgz#0c73e3a3751898895db103bee5bad342da23d2ca"
+  integrity sha512-YyBTAFM/QPqt1PscD8hDmCLnqPGKmUZpqeE25HXY8OLjl2MUs8+O4KjwPZZ+OGxpdTbwuWFyMoxjcLy80JODvg==
+
+"@swc/core-linux-arm64-gnu@1.11.21":
+  version "1.11.21"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.11.21.tgz#678a6aaba5aa42d62fa3fdfa0b0e28a77ebc18d1"
+  integrity sha512-DQD+ooJmwpNsh4acrftdkuwl5LNxxg8U4+C/RJNDd7m5FP9Wo4c0URi5U0a9Vk/6sQNh9aSGcYChDpqCDWEcBw==
+
+"@swc/core-linux-arm64-musl@1.11.21":
+  version "1.11.21"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.11.21.tgz#f1b66df0a9f0a81c3a574f4b3e560deee56012bc"
+  integrity sha512-y1L49+snt1a1gLTYPY641slqy55QotPdtRK9Y6jMi4JBQyZwxC8swWYlQWb+MyILwxA614fi62SCNZNznB3XSA==
+
+"@swc/core-linux-x64-gnu@1.11.21":
+  version "1.11.21"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.11.21.tgz#5d3d83763cebc686cc0ef9fa6b3461118a3bfb6c"
+  integrity sha512-NesdBXv4CvVEaFUlqKj+GA4jJMNUzK2NtKOrUNEtTbXaVyNiXjFCSaDajMTedEB0jTAd9ybB0aBvwhgkJUWkWA==
+
+"@swc/core-linux-x64-musl@1.11.21":
+  version "1.11.21"
+  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.11.21.tgz#5e0cc95bf89b74ba913afeb66cc93f35d59abea0"
+  integrity sha512-qFV60pwpKVOdmX67wqQzgtSrUGWX9Cibnp1CXyqZ9Mmt8UyYGvmGu7p6PMbTyX7vdpVUvWVRf8DzrW2//wmVHg==
+
+"@swc/core-win32-arm64-msvc@1.11.21":
+  version "1.11.21"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.11.21.tgz#070c70f5684b6f96e3d51f7ca3c70d7f971cffa9"
+  integrity sha512-DJJe9k6gXR/15ZZVLv1SKhXkFst8lYCeZRNHH99SlBodvu4slhh/MKQ6YCixINRhCwliHrpXPym8/5fOq8b7Ig==
+
+"@swc/core-win32-ia32-msvc@1.11.21":
+  version "1.11.21"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.11.21.tgz#e72ad415d18d7e4660a9ebb8529ffd68c02c61da"
+  integrity sha512-TqEXuy6wedId7bMwLIr9byds+mKsaXVHctTN88R1UIBPwJA92Pdk0uxDgip0pEFzHB/ugU27g6d8cwUH3h2eIw==
+
+"@swc/core-win32-x64-msvc@1.11.21":
+  version "1.11.21"
+  resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.11.21.tgz#7ff6dd290b36c013a98aea877cda288251e48119"
+  integrity sha512-BT9BNNbMxdpUM1PPAkYtviaV0A8QcXttjs2MDtOeSqqvSJaPtyM+Fof2/+xSwQDmDEFzbGCcn75M5+xy3lGqpA==
+
+"@swc/core@^1.11.21":
+  version "1.11.21"
+  resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.11.21.tgz#012dc73111e6ecea96cc30b522a50355eca4b35c"
+  integrity sha512-/Y3BJLcwd40pExmdar8MH2UGGvCBrqNN7hauOMckrEX2Ivcbv3IMhrbGX4od1dnF880Ed8y/E9aStZCIQi0EGw==
+  dependencies:
+    "@swc/counter" "^0.1.3"
+    "@swc/types" "^0.1.21"
+  optionalDependencies:
+    "@swc/core-darwin-arm64" "1.11.21"
+    "@swc/core-darwin-x64" "1.11.21"
+    "@swc/core-linux-arm-gnueabihf" "1.11.21"
+    "@swc/core-linux-arm64-gnu" "1.11.21"
+    "@swc/core-linux-arm64-musl" "1.11.21"
+    "@swc/core-linux-x64-gnu" "1.11.21"
+    "@swc/core-linux-x64-musl" "1.11.21"
+    "@swc/core-win32-arm64-msvc" "1.11.21"
+    "@swc/core-win32-ia32-msvc" "1.11.21"
+    "@swc/core-win32-x64-msvc" "1.11.21"
+
+"@swc/counter@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@swc/counter/-/counter-0.1.3.tgz#cc7463bd02949611c6329596fccd2b0ec782b0e9"
+  integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
+
+"@swc/types@^0.1.21":
+  version "0.1.21"
+  resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.21.tgz#6fcadbeca1d8bc89e1ab3de4948cef12344a38c0"
+  integrity sha512-2YEtj5HJVbKivud9N4bpPBAyZhj4S2Ipe5LkUG94alTpr7in/GU/EARgPAd3BwU+YOmFVJC2+kjqhGRi3r0ZpQ==
+  dependencies:
+    "@swc/counter" "^0.1.3"
+
 "@tailwindcss/container-queries@^0.1.1":
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/@tailwindcss/container-queries/-/container-queries-0.1.1.tgz#9a759ce2cb8736a4c6a0cb93aeb740573a731974"

From 3d74ef2143586aa92876222f88a146cee4538c9b Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 01:00:06 +0800
Subject: [PATCH 26/36] perf(webpack): trim moment-timezone data to only from
 2014

---
 client/package.json    |  1 +
 client/webpack.prod.js |  4 ++++
 client/yarn.lock       | 10 +++++++++-
 3 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/client/package.json b/client/package.json
index ff73ac2d44d..e80464afe83 100644
--- a/client/package.json
+++ b/client/package.json
@@ -179,6 +179,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-localstorage-mock": "^2.4.26",
     "mkdirp": "^3.0.1",
+    "moment-timezone-data-webpack-plugin": "^1.5.1",
     "postcss": "^8.4.38",
     "postcss-loader": "^8.1.1",
     "prettier": "^3.2.5",
diff --git a/client/webpack.prod.js b/client/webpack.prod.js
index 9ea7350bf47..c63d899caff 100644
--- a/client/webpack.prod.js
+++ b/client/webpack.prod.js
@@ -1,5 +1,6 @@
 const { merge } = require('webpack-merge');
 const TerserPlugin = require('terser-webpack-plugin');
+const MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin');
 
 const common = require('./webpack.common');
 
@@ -43,4 +44,7 @@ module.exports = merge(common, {
       },
     ],
   },
+  plugins: [
+    new MomentTimezoneDataPlugin({ startYear: 2014 }),
+  ],
 });
diff --git a/client/yarn.lock b/client/yarn.lock
index 7522c61e3d4..a6ed60cde6c 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -5672,7 +5672,7 @@ find-cache-dir@^2.0.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
-find-cache-dir@^3.3.2:
+find-cache-dir@^3.0.0, find-cache-dir@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
   integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
@@ -8079,6 +8079,14 @@ mkdirp@^3.0.1:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-3.0.1.tgz#e44e4c5607fb279c168241713cc6e0fea9adcb50"
   integrity sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==
 
+moment-timezone-data-webpack-plugin@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/moment-timezone-data-webpack-plugin/-/moment-timezone-data-webpack-plugin-1.5.1.tgz#9d35dfd3768db55058e1e809d77a2b64bd6d03a4"
+  integrity sha512-1le6a35GgYdWMVYFzrfpE/F6Pk4bj0M3QKD6Iv6ba9LqWGoVqHQRHyCTLvLis5E1J98Sz40ET6yhZzMVakwpjg==
+  dependencies:
+    find-cache-dir "^3.0.0"
+    make-dir "^3.0.0"
+
 moment-timezone@^0.5.44:
   version "0.5.44"
   resolved "https://registry.yarnpkg.com/moment-timezone/-/moment-timezone-0.5.44.tgz#a64a4e47b68a43deeab5ae4eb4f82da77cdf595f"

From 8a5bb3a3404618092028381d0b0eb2de8ab18124 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 01:00:45 +0800
Subject: [PATCH 27/36] perf(webpack): optimise images, SVGs

---
 client/package.json    |   3 +
 client/webpack.prod.js |  21 +++++
 client/yarn.lock       | 188 ++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 211 insertions(+), 1 deletion(-)

diff --git a/client/package.json b/client/package.json
index e80464afe83..b1c15d89963 100644
--- a/client/package.json
+++ b/client/package.json
@@ -174,6 +174,7 @@
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "glob": "^10.3.7",
     "html-webpack-plugin": "^5.6.0",
+    "image-minimizer-webpack-plugin": "^4.1.3",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
@@ -188,7 +189,9 @@
     "redux-logger": "^3.0.6",
     "sass": "^1.76.0",
     "sass-loader": "^14.1.0",
+    "sharp": "^0.34.1",
     "style-loader": "^3.3.4",
+    "svgo": "^3.3.2",
     "tailwindcss": "^3.4.1",
     "terser-webpack-plugin": "^5.3.10",
     "ts-jest": "^29.1.2",
diff --git a/client/webpack.prod.js b/client/webpack.prod.js
index c63d899caff..1d8692aa37a 100644
--- a/client/webpack.prod.js
+++ b/client/webpack.prod.js
@@ -1,6 +1,7 @@
 const { merge } = require('webpack-merge');
 const TerserPlugin = require('terser-webpack-plugin');
 const MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin');
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
 
 const common = require('./webpack.common');
 
@@ -46,5 +47,25 @@ module.exports = merge(common, {
   },
   plugins: [
     new MomentTimezoneDataPlugin({ startYear: 2014 }),
+    new ImageMinimizerPlugin({
+      test: /\.(jpe?g|png|gif)$/i,
+      minimizer: {
+        implementation: ImageMinimizerPlugin.sharpMinify,
+        options: {
+          encodeOptions: {
+            png: {
+              quality: 90,
+              compressionLevel: 9,
+            },
+          },
+        },
+      },
+    }),
+    new ImageMinimizerPlugin({
+      test: /\.svg$/i,
+      minimizer: {
+        implementation: ImageMinimizerPlugin.svgoMinify,
+      },
+    }),
   ],
 });
diff --git a/client/yarn.lock b/client/yarn.lock
index a6ed60cde6c..097bc15fe4d 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1178,6 +1178,13 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
+"@emnapi/runtime@^1.4.0":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@emnapi/runtime/-/runtime-1.4.3.tgz#c0564665c80dc81c448adac23f9dfbed6c838f7d"
+  integrity sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==
+  dependencies:
+    tslib "^2.4.0"
+
 "@emotion/babel-plugin@^11.11.0":
   version "11.11.0"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c"
@@ -1474,6 +1481,124 @@
   resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
   integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
 
+"@img/sharp-darwin-arm64@0.34.1":
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.1.tgz#e79a4756bea9a06a7aadb4391ee53cb154a4968c"
+  integrity sha512-pn44xgBtgpEbZsu+lWf2KNb6OAf70X68k+yk69Ic2Xz11zHR/w24/U49XT7AeRwJ0Px+mhALhU5LPci1Aymk7A==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-arm64" "1.1.0"
+
+"@img/sharp-darwin-x64@0.34.1":
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.1.tgz#f1f1d386719f6933796415d84937502b7199a744"
+  integrity sha512-VfuYgG2r8BpYiOUN+BfYeFo69nP/MIwAtSJ7/Zpxc5QF3KS22z8Pvg3FkrSFJBPNQ7mmcUcYQFBmEQp7eu1F8Q==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-x64" "1.1.0"
+
+"@img/sharp-libvips-darwin-arm64@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.1.0.tgz#843f7c09c7245dc0d3cfec2b3c83bb08799a704f"
+  integrity sha512-HZ/JUmPwrJSoM4DIQPv/BfNh9yrOA8tlBbqbLz4JZ5uew2+o22Ik+tHQJcih7QJuSa0zo5coHTfD5J8inqj9DA==
+
+"@img/sharp-libvips-darwin-x64@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.1.0.tgz#1239c24426c06a8e833815562f78047a3bfbaaf8"
+  integrity sha512-Xzc2ToEmHN+hfvsl9wja0RlnXEgpKNmftriQp6XzY/RaSfwD9th+MSh0WQKzUreLKKINb3afirxW7A0fz2YWuQ==
+
+"@img/sharp-libvips-linux-arm64@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.1.0.tgz#20d276cefd903ee483f0441ba35961679c286315"
+  integrity sha512-IVfGJa7gjChDET1dK9SekxFFdflarnUB8PwW8aGwEoF3oAsSDuNUTYS+SKDOyOJxQyDC1aPFMuRYLoDInyV9Ew==
+
+"@img/sharp-libvips-linux-arm@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.1.0.tgz#067c0b566eae8063738cf1b1db8f8a8573b5465c"
+  integrity sha512-s8BAd0lwUIvYCJyRdFqvsj+BJIpDBSxs6ivrOPm/R7piTs5UIwY5OjXrP2bqXC9/moGsyRa37eYWYCOGVXxVrA==
+
+"@img/sharp-libvips-linux-ppc64@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.1.0.tgz#682334595f2ca00e0a07a675ba170af165162802"
+  integrity sha512-tiXxFZFbhnkWE2LA8oQj7KYR+bWBkiV2nilRldT7bqoEZ4HiDOcePr9wVDAZPi/Id5fT1oY9iGnDq20cwUz8lQ==
+
+"@img/sharp-libvips-linux-s390x@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.1.0.tgz#82fcd68444b3666384235279c145c2b28d8ee302"
+  integrity sha512-xukSwvhguw7COyzvmjydRb3x/09+21HykyapcZchiCUkTThEQEOMtBj9UhkaBRLuBrgLFzQ2wbxdeCCJW/jgJA==
+
+"@img/sharp-libvips-linux-x64@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.1.0.tgz#65b2b908bf47156b0724fde9095676c83a18cf5a"
+  integrity sha512-yRj2+reB8iMg9W5sULM3S74jVS7zqSzHG3Ol/twnAAkAhnGQnpjj6e4ayUz7V+FpKypwgs82xbRdYtchTTUB+Q==
+
+"@img/sharp-libvips-linuxmusl-arm64@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.1.0.tgz#72accf924e80b081c8db83b900b444a67c203f01"
+  integrity sha512-jYZdG+whg0MDK+q2COKbYidaqW/WTz0cc1E+tMAusiDygrM4ypmSCjOJPmFTvHHJ8j/6cAGyeDWZOsK06tP33w==
+
+"@img/sharp-libvips-linuxmusl-x64@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.1.0.tgz#1fa052737e203f46bf44192acd01f9faf11522d7"
+  integrity sha512-wK7SBdwrAiycjXdkPnGCPLjYb9lD4l6Ze2gSdAGVZrEL05AOUJESWU2lhlC+Ffn5/G+VKuSm6zzbQSzFX/P65A==
+
+"@img/sharp-linux-arm64@0.34.1":
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.1.tgz#c36ef964499b8cfc2d2ed88fe68f27ce41522c80"
+  integrity sha512-kX2c+vbvaXC6vly1RDf/IWNXxrlxLNpBVWkdpRq5Ka7OOKj6nr66etKy2IENf6FtOgklkg9ZdGpEu9kwdlcwOQ==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm64" "1.1.0"
+
+"@img/sharp-linux-arm@0.34.1":
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.1.tgz#c96e38ff028d645912bb0aa132a7178b96997866"
+  integrity sha512-anKiszvACti2sGy9CirTlNyk7BjjZPiML1jt2ZkTdcvpLU1YH6CXwRAZCA2UmRXnhiIftXQ7+Oh62Ji25W72jA==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-arm" "1.1.0"
+
+"@img/sharp-linux-s390x@0.34.1":
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.1.tgz#8ac58d9a49dcb08215e76c8d450717979b7815c3"
+  integrity sha512-7s0KX2tI9mZI2buRipKIw2X1ufdTeaRgwmRabt5bi9chYfhur+/C1OXg3TKg/eag1W+6CCWLVmSauV1owmRPxA==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-s390x" "1.1.0"
+
+"@img/sharp-linux-x64@0.34.1":
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.1.tgz#3d8652efac635f0dba39d5e3b8b49515a2b2dee1"
+  integrity sha512-wExv7SH9nmoBW3Wr2gvQopX1k8q2g5V5Iag8Zk6AVENsjwd+3adjwxtp3Dcu2QhOXr8W9NusBU6XcQUohBZ5MA==
+  optionalDependencies:
+    "@img/sharp-libvips-linux-x64" "1.1.0"
+
+"@img/sharp-linuxmusl-arm64@0.34.1":
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.1.tgz#b267e6a3e06f9e4d345cde471e5480c5c39e6969"
+  integrity sha512-DfvyxzHxw4WGdPiTF0SOHnm11Xv4aQexvqhRDAoD00MzHekAj9a/jADXeXYCDFH/DzYruwHbXU7uz+H+nWmSOQ==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-arm64" "1.1.0"
+
+"@img/sharp-linuxmusl-x64@0.34.1":
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.1.tgz#a8dee4b6227f348c4bbacaa6ac3dc584a1a80391"
+  integrity sha512-pax/kTR407vNb9qaSIiWVnQplPcGU8LRIJpDT5o8PdAx5aAA7AS3X9PS8Isw1/WfqgQorPotjrZL3Pqh6C5EBg==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-x64" "1.1.0"
+
+"@img/sharp-wasm32@0.34.1":
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-wasm32/-/sharp-wasm32-0.34.1.tgz#f7dfd66b6c231269042d3d8750c90f28b9ddcba1"
+  integrity sha512-YDybQnYrLQfEpzGOQe7OKcyLUCML4YOXl428gOOzBgN6Gw0rv8dpsJ7PqTHxBnXnwXr8S1mYFSLSa727tpz0xg==
+  dependencies:
+    "@emnapi/runtime" "^1.4.0"
+
+"@img/sharp-win32-ia32@0.34.1":
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.1.tgz#4bc293705df76a5f0a02df66ca3dc12e88f61332"
+  integrity sha512-WKf/NAZITnonBf3U1LfdjoMgNO5JYRSlhovhRhMxXVdvWYveM4kM3L8m35onYIdh75cOMCo1BexgVQcCDzyoWw==
+
+"@img/sharp-win32-x64@0.34.1":
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.1.tgz#8a7922fec949f037c204c79f6b83238d2482384b"
+  integrity sha512-hw1iIAHpNE8q3uMIRCgGOeDoz9KtFNarFLQclLxr/LK1VBkj8nby18RjFvr6aP7USRYAjTZW6yisnBWMX571Tw==
+
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
@@ -4649,6 +4774,11 @@ detect-libc@^2.0.0, detect-libc@^2.0.2:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.2.tgz#8ccf2ba9315350e1241b88d0ac3b0e1fbd99605d"
   integrity sha512-UX6sGumvvqSaXgdKGUsgZWqcUyIXZ/vZTrlRT/iobiKhGL0zL4d3osHj3uqllWJK+i+sixDS/3COVEOFbupFyw==
 
+detect-libc@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
+  integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
+
 detect-newline@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
@@ -6342,6 +6472,14 @@ ignore@^5.0.5, ignore@^5.2.0, ignore@^5.2.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
+image-minimizer-webpack-plugin@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/image-minimizer-webpack-plugin/-/image-minimizer-webpack-plugin-4.1.3.tgz#728e89d153978f49396fe1881aa11fe6cef57f83"
+  integrity sha512-yJvYlLAZosu2iqlGF81BEUHfUiWRPD05krtoax9Ffst3Yzbn3X7p04VXambwlx3uhbSwH/BeyM5+bJHQksnuyw==
+  dependencies:
+    schema-utils "^4.2.0"
+    serialize-javascript "^6.0.2"
+
 immer@^10.0.4:
   version "10.0.4"
   resolved "https://registry.yarnpkg.com/immer/-/immer-10.0.4.tgz#09af41477236b99449f9d705369a4daaf780362b"
@@ -10119,6 +10257,11 @@ semver@^7.3.5, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.7.1:
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.7.1.tgz#abd5098d82b18c6c81f6074ff2647fd3e7220c9f"
+  integrity sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==
+
 send@0.19.0:
   version "0.19.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
@@ -10138,7 +10281,7 @@ send@0.19.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-serialize-javascript@^6.0.1:
+serialize-javascript@^6.0.1, serialize-javascript@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz#defa1e055c83bf6d59ea805d8da862254eb6a6c2"
   integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
@@ -10240,6 +10383,36 @@ sharp@^0.32.4:
     tar-fs "^3.0.4"
     tunnel-agent "^0.6.0"
 
+sharp@^0.34.1:
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.34.1.tgz#e5922894b0cc7ddf159eeabc6d5668e4e8b11d61"
+  integrity sha512-1j0w61+eVxu7DawFJtnfYcvSv6qPFvfTaqzTQ2BLknVhHTwGS8sc63ZBF4rzkWMBVKybo4S5OBtDdZahh2A1xg==
+  dependencies:
+    color "^4.2.3"
+    detect-libc "^2.0.3"
+    semver "^7.7.1"
+  optionalDependencies:
+    "@img/sharp-darwin-arm64" "0.34.1"
+    "@img/sharp-darwin-x64" "0.34.1"
+    "@img/sharp-libvips-darwin-arm64" "1.1.0"
+    "@img/sharp-libvips-darwin-x64" "1.1.0"
+    "@img/sharp-libvips-linux-arm" "1.1.0"
+    "@img/sharp-libvips-linux-arm64" "1.1.0"
+    "@img/sharp-libvips-linux-ppc64" "1.1.0"
+    "@img/sharp-libvips-linux-s390x" "1.1.0"
+    "@img/sharp-libvips-linux-x64" "1.1.0"
+    "@img/sharp-libvips-linuxmusl-arm64" "1.1.0"
+    "@img/sharp-libvips-linuxmusl-x64" "1.1.0"
+    "@img/sharp-linux-arm" "0.34.1"
+    "@img/sharp-linux-arm64" "0.34.1"
+    "@img/sharp-linux-s390x" "0.34.1"
+    "@img/sharp-linux-x64" "0.34.1"
+    "@img/sharp-linuxmusl-arm64" "0.34.1"
+    "@img/sharp-linuxmusl-x64" "0.34.1"
+    "@img/sharp-wasm32" "0.34.1"
+    "@img/sharp-win32-ia32" "0.34.1"
+    "@img/sharp-win32-x64" "0.34.1"
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
@@ -10677,6 +10850,19 @@ svgo@^3.0.2, svgo@^3.2.0:
     csso "^5.0.5"
     picocolors "^1.0.0"
 
+svgo@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-3.3.2.tgz#ad58002652dffbb5986fc9716afe52d869ecbda8"
+  integrity sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==
+  dependencies:
+    "@trysound/sax" "0.2.0"
+    commander "^7.2.0"
+    css-select "^5.1.0"
+    css-tree "^2.3.1"
+    css-what "^6.1.0"
+    csso "^5.0.5"
+    picocolors "^1.0.0"
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"

From 17840d1df8ab98d8aa0f6ab99a6d6820a5ad6df2 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 01:01:17 +0800
Subject: [PATCH 28/36] perf(webpack): generate gzip, brotli compressed bundles

---
 client/package.json    |  1 +
 client/webpack.prod.js | 16 ++++++++++++++++
 client/yarn.lock       |  8 ++++++++
 3 files changed, 25 insertions(+)

diff --git a/client/package.json b/client/package.json
index b1c15d89963..c6ab93cd0a6 100644
--- a/client/package.json
+++ b/client/package.json
@@ -148,6 +148,7 @@
     "babel-plugin-react-remove-properties": "^0.3.0",
     "babel-plugin-transform-import-meta": "^2.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "compression-webpack-plugin": "^11.1.0",
     "css-loader": "^6.11.0",
     "cssnano": "^6.1.2",
     "dotenv-webpack": "^8.0.1",
diff --git a/client/webpack.prod.js b/client/webpack.prod.js
index 1d8692aa37a..0f3e442aa08 100644
--- a/client/webpack.prod.js
+++ b/client/webpack.prod.js
@@ -2,6 +2,8 @@ const { merge } = require('webpack-merge');
 const TerserPlugin = require('terser-webpack-plugin');
 const MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin');
 const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
+const zlib = require('zlib');
 
 const common = require('./webpack.common');
 
@@ -67,5 +69,19 @@ module.exports = merge(common, {
         implementation: ImageMinimizerPlugin.svgoMinify,
       },
     }),
+    new CompressionPlugin({
+      test: /\.(js|css|html|svg|png)$/,
+      algorithm: 'gzip',
+    }),
+    new CompressionPlugin({
+      algorithm: 'brotliCompress',
+      test: /\.(js|css|html|svg|png)$/,
+      compressionOptions: {
+        params: {
+          [zlib.constants.BROTLI_PARAM_QUALITY]: 11,
+        },
+      },
+      threshold: 10240,
+    }),
   ],
 });
diff --git a/client/yarn.lock b/client/yarn.lock
index 097bc15fe4d..3c1f640c390 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -4262,6 +4262,14 @@ compressible@~2.0.16:
   dependencies:
     mime-db ">= 1.43.0 < 2"
 
+compression-webpack-plugin@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/compression-webpack-plugin/-/compression-webpack-plugin-11.1.0.tgz#ee340d2029cf99ccecdea9ad1410b377d15b48b3"
+  integrity sha512-zDOQYp10+upzLxW+VRSjEpRRwBXJdsb5lBMlRxx1g8hckIFBpe3DTI0en2w7h+beuq89576RVzfiXrkdPGrHhA==
+  dependencies:
+    schema-utils "^4.2.0"
+    serialize-javascript "^6.0.2"
+
 compression@^1.7.4:
   version "1.7.4"
   resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.4.tgz#95523eff170ca57c29a0ca41e6fe131f41e5bb8f"

From 66afa777c0ef5dce6c163f93b6bccee0a7c2be2c Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 01:02:58 +0800
Subject: [PATCH 29/36] perf(i18n): lazy load translations

---
 .gitignore                                    |  2 +
 .../lib/components/wrappers/I18nProvider.tsx  | 57 +++++++++++++++----
 client/package.json                           |  4 +-
 client/scripts/aggregate-translations.js      | 28 ---------
 client/yarn.lock                              |  5 --
 5 files changed, 49 insertions(+), 47 deletions(-)
 delete mode 100644 client/scripts/aggregate-translations.js

diff --git a/.gitignore b/.gitignore
index f759f0926d2..7e41de355a5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -72,3 +72,5 @@ playwright/.cache/
 coverage/
 
 dump.rdb
+
+compiled-locales
diff --git a/client/app/lib/components/wrappers/I18nProvider.tsx b/client/app/lib/components/wrappers/I18nProvider.tsx
index 368c9cd044c..b85c279869b 100644
--- a/client/app/lib/components/wrappers/I18nProvider.tsx
+++ b/client/app/lib/components/wrappers/I18nProvider.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useEffect } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import { IntlProvider } from 'react-intl';
 
 import {
@@ -8,7 +8,7 @@ import {
 import { useI18nConfig } from 'lib/hooks/session';
 import moment from 'lib/moment';
 
-import translations from '../../../../build/locales/locales.json';
+import LoadingIndicator from '../core/LoadingIndicator';
 
 interface I18nProviderProps {
   children: ReactNode;
@@ -17,26 +17,61 @@ interface I18nProviderProps {
 const getLocaleWithoutRegionCode = (locale: string): string =>
   locale.toLowerCase().split(/[_-]+/)[0];
 
-const getMessages = (locale: string): Record<string, string> | undefined => {
-  const localeWithoutRegionCode = getLocaleWithoutRegionCode(locale);
-
-  return localeWithoutRegionCode !== DEFAULT_LOCALE
-    ? translations[localeWithoutRegionCode] || translations[locale]
-    : undefined;
-};
-
 const I18nProvider = (props: I18nProviderProps): JSX.Element => {
   const { locale, timeZone } = useI18nConfig();
+  const [messages, setMessages] = useState<Record<string, string>>();
 
   useEffect(() => {
     moment.tz.setDefault(timeZone?.trim() || DEFAULT_TIME_ZONE);
   }, [timeZone]);
 
+  const localeWithoutRegionCode = getLocaleWithoutRegionCode(locale);
+
+  useEffect(() => {
+    setMessages(undefined);
+
+    let ignore = false;
+
+    (async (): Promise<void> => {
+      let loadedMessages: Record<string, string>;
+
+      try {
+        loadedMessages = await import(
+          /* webpackChunkName: "locale-[request]" */
+          `../../../../compiled-locales/${localeWithoutRegionCode}.json`
+        );
+      } catch (error) {
+        if (
+          !(
+            error instanceof Error &&
+            error.message.includes('Cannot find module')
+          )
+        )
+          throw error;
+
+        loadedMessages = await import(
+          /* webpackChunkName: "locale-[request]" */
+          `../../../../compiled-locales/${DEFAULT_LOCALE}.json`
+        );
+      }
+
+      if (ignore) return;
+
+      setMessages(loadedMessages);
+    })();
+
+    return () => {
+      ignore = true;
+    };
+  }, [localeWithoutRegionCode]);
+
+  if (!messages) return <LoadingIndicator />;
+
   return (
     <IntlProvider
       defaultLocale={DEFAULT_LOCALE}
       locale={locale}
-      messages={getMessages(locale)}
+      messages={messages}
       textComponent="span"
     >
       {props.children}
diff --git a/client/package.json b/client/package.json
index c6ab93cd0a6..59f4eb7e28d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -13,7 +13,7 @@
     "build:production": "export NODE_ENV=production && yarn run build:translations && webpack --node-env=production --config webpack.prod.js",
     "build:development": "yarn run build:translations && webpack serve --config webpack.dev.js",
     "build:profile": "yarn run build:translations && webpack serve --config webpack.profile.js --progress=profile",
-    "build:translations": "babel-node scripts/aggregate-translations.js",
+    "build:translations": "formatjs compile-folder --ast locales compiled-locales",
     "extract-translations": "formatjs extract \"app/**/*.{js,jsx,ts,tsx}\" --ignore='**/*.d.ts' --out-file ./locales/en.json",
     "lint-src": "eslint . --ext .js --ext .jsx --ext .ts --ext .tsx --cache --ignore-pattern '**/__test__/**' --ignore-pattern 'coverage/**'",
     "lint-tests": "eslint . --ext .test.js --ext .test.jsx --ext .test.ts --ext .test.tsx --cache",
@@ -173,14 +173,12 @@
     "favicons": "^7.1.4",
     "favicons-webpack-plugin": "^6.0.1",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
-    "glob": "^10.3.7",
     "html-webpack-plugin": "^5.6.0",
     "image-minimizer-webpack-plugin": "^4.1.3",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "jest-localstorage-mock": "^2.4.26",
-    "mkdirp": "^3.0.1",
     "moment-timezone-data-webpack-plugin": "^1.5.1",
     "postcss": "^8.4.38",
     "postcss-loader": "^8.1.1",
diff --git a/client/scripts/aggregate-translations.js b/client/scripts/aggregate-translations.js
deleted file mode 100644
index d672a933618..00000000000
--- a/client/scripts/aggregate-translations.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-const globSync = require('glob').sync;
-const { sync: mkdirpSync } = require('mkdirp').mkdirp;
-
-const OUTPUT_DIR = './build/locales/';
-
-// Excludes en as it is the default language
-const translations = globSync('./locales/[!en]*.json')
-  .map((filename) => [
-    path.basename(filename, '.json'),
-    fs.readFileSync(filename, 'utf8'),
-  ])
-  .map(([locale, file]) => [locale, JSON.parse(file)])
-  .reduce((collection, [locale, messages]) => {
-    const extractedMessages = {};
-    Object.keys(messages).forEach((key) => {
-      extractedMessages[key] = messages[key].defaultMessage;
-    });
-    return { ...collection, [locale]: { ...extractedMessages } };
-  }, {});
-
-// Write the messages to this directory
-mkdirpSync(OUTPUT_DIR);
-fs.writeFileSync(
-  `${OUTPUT_DIR}locales.json`,
-  JSON.stringify(translations, null, 2),
-);
diff --git a/client/yarn.lock b/client/yarn.lock
index 3c1f640c390..8f7e69bc3f3 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -8220,11 +8220,6 @@ mkdirp@^1.0.3:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-mkdirp@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-3.0.1.tgz#e44e4c5607fb279c168241713cc6e0fea9adcb50"
-  integrity sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==
-
 moment-timezone-data-webpack-plugin@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/moment-timezone-data-webpack-plugin/-/moment-timezone-data-webpack-plugin-1.5.1.tgz#9d35dfd3768db55058e1e809d77a2b64bd6d03a4"

From 8f40e0523f5f28ea1cd95321401096624a19f519 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 01:03:53 +0800
Subject: [PATCH 30/36] perf(CKEditorRichText): optimise build, upgrade to v45

---
 .../lib/components/core/fields/CKEditor.css   |    5 +-
 .../components/core/fields/CKEditorField.tsx  |   63 +
 .../core/fields/CKEditorRichText.tsx          |  171 +--
 client/css-includes.json                      |    1 +
 client/package.json                           |    5 +-
 client/yarn.lock                              | 1263 ++++++++++++++++-
 6 files changed, 1360 insertions(+), 148 deletions(-)
 create mode 100644 client/app/lib/components/core/fields/CKEditorField.tsx

diff --git a/client/app/lib/components/core/fields/CKEditor.css b/client/app/lib/components/core/fields/CKEditor.css
index cdec3ab717f..cb1f81e2c40 100644
--- a/client/app/lib/components/core/fields/CKEditor.css
+++ b/client/app/lib/components/core/fields/CKEditor.css
@@ -1,6 +1,5 @@
 /* Below are needed to ensure ckeditor popup (eg link)
 is rendered properly in MUI dialog */
-
 .ck-body-wrapper {
   position: absolute;
   z-index: 1500;
@@ -8,3 +7,7 @@ is rendered properly in MUI dialog */
     display: none;
   }
 }
+
+.ck-editor__editable {
+  max-height: 35rem;
+}
diff --git a/client/app/lib/components/core/fields/CKEditorField.tsx b/client/app/lib/components/core/fields/CKEditorField.tsx
new file mode 100644
index 00000000000..01c96b50d31
--- /dev/null
+++ b/client/app/lib/components/core/fields/CKEditorField.tsx
@@ -0,0 +1,63 @@
+import { CKEditor } from '@ckeditor/ckeditor5-react';
+import type { FileLoader, UploadAdapter, UploadResponse } from 'ckeditor5';
+import ClassicEditor from 'coursemology-ckeditor';
+
+import attachmentsAPI from 'api/Attachments';
+
+import 'coursemology-ckeditor/build/index.css';
+import './CKEditor.css';
+
+class SimpleUploadAdapter implements UploadAdapter {
+  private loader: FileLoader;
+
+  constructor(loader: FileLoader) {
+    this.loader = loader;
+  }
+
+  async upload(): Promise<UploadResponse> {
+    const file = await this.loader.file;
+    if (file === null) return {};
+
+    const data = (await attachmentsAPI.create(file)).data;
+    if (!data.success) return {};
+
+    return { default: `/attachments/${data.id}` };
+  }
+}
+
+const CKEditorField = ({
+  placeholder,
+  disabled,
+  value,
+  autoFocus,
+  onChange,
+  onBlur,
+  onFocus,
+}: {
+  placeholder?: string;
+  disabled?: boolean;
+  value?: string;
+  autoFocus?: boolean;
+  onChange?: (value: string) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
+}): JSX.Element => (
+  <CKEditor
+    config={{ placeholder }}
+    data={value}
+    disabled={disabled}
+    editor={ClassicEditor}
+    onBlur={onBlur}
+    onChange={(_, editor) => onChange?.(editor.getData())}
+    onFocus={onFocus}
+    onReady={(editor) => {
+      editor.plugins.get('FileRepository').createUploadAdapter = (
+        loader,
+      ): UploadAdapter => new SimpleUploadAdapter(loader);
+
+      if (autoFocus) editor.focus();
+    }}
+  />
+);
+
+export default CKEditorField;
diff --git a/client/app/lib/components/core/fields/CKEditorRichText.tsx b/client/app/lib/components/core/fields/CKEditorRichText.tsx
index 8f22ac841e9..383c92f9f73 100644
--- a/client/app/lib/components/core/fields/CKEditorRichText.tsx
+++ b/client/app/lib/components/core/fields/CKEditorRichText.tsx
@@ -1,15 +1,25 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { useState } from 'react';
-import CustomEditor from '@ckeditor/ckeditor5-build-custom';
-import { CKEditor } from '@ckeditor/ckeditor5-react';
-import { FormHelperText, InputLabel } from '@mui/material';
+import { lazy, Suspense, useState } from 'react';
+import { FormHelperText, InputLabel, Skeleton } from '@mui/material';
 import { cyan } from '@mui/material/colors';
 
-import attachmentsAPI from 'api/Attachments';
+const CKEditorField = lazy(
+  () => import(/* webpackChunkName: "CKEditorField" */ './CKEditorField'),
+);
 
-import './CKEditor.css';
-
-interface Props {
+const CKEditorRichText = ({
+  label,
+  value,
+  onChange,
+  disabled,
+  error,
+  field,
+  required,
+  name,
+  inputId,
+  disableMargins,
+  placeholder,
+  autofocus,
+}: {
   name: string;
   onChange: (text: string) => void;
   value: string;
@@ -22,57 +32,15 @@ interface Props {
   label?: string;
   placeholder?: string;
   required?: boolean | undefined;
-}
-
-const uploadAdapter = (loader) => {
-  return {
-    upload: () =>
-      new Promise((resolve, reject) => {
-        loader.file.then((file: File) => {
-          attachmentsAPI
-            .create(file)
-            .then((response) => response.data)
-            .then((data) => {
-              if (data.success) {
-                resolve({ default: `/attachments/${data.id}` });
-              }
-            })
-            .catch((err) => {
-              reject(err);
-            });
-        });
-      }),
-    abort: () => {},
-  };
-};
-
-const CKEditorRichText = (props: Props) => {
-  const {
-    label,
-    value,
-    onChange,
-    disabled,
-    error,
-    field,
-    required,
-    name,
-    inputId,
-    disableMargins,
-    placeholder,
-    autofocus,
-  } = props;
-
+}): JSX.Element => {
   const [isFocused, setIsFocused] = useState(false);
   const textFieldLabelColor = isFocused ? cyan[500] : undefined;
 
   return (
     <div
+      className="w-full inline-block bg-transparent relative"
       style={{
         fontSize: 16,
-        width: '100%',
-        display: 'inline-block',
-        position: 'relative',
-        backgroundColor: 'transparent',
         fontFamily: 'Roboto, sans-serif',
         paddingTop: !disableMargins && label ? '1em' : 0,
         paddingBottom: !disableMargins ? '1em' : 0,
@@ -80,102 +48,55 @@ const CKEditorRichText = (props: Props) => {
     >
       {label && (
         <InputLabel
+          className="pointer-events-none"
           disabled={disabled}
           error={!!error}
           htmlFor={field}
           required={required}
           shrink
           style={{
-            pointerEvents: 'none',
             color: disabled ? 'rgba(0, 0, 0, 0.3)' : textFieldLabelColor,
           }}
         >
           {label}
         </InputLabel>
       )}
+
       <textarea
+        aria-hidden
+        className="hidden"
         disabled={disabled}
         id={inputId}
         name={name}
-        onChange={(event) => {
-          onChange(event.target.value);
-        }}
+        onChange={(e) => onChange(e.target.value)}
         required={required}
-        style={{ display: 'none' }}
         value={value || ''}
       />
+
       <div className="react-ck">
-        <CKEditor
-          config={{
-            // To format <pre> properly (summernote compatability).
-            // CKEditor will change it to <pre><code> but on edit it will render properly
-            heading: {
-              options: [
-                { model: 'formatted', view: 'pre', title: 'Formatted' },
-              ],
-            },
-            // To add the default https protocol and
-            // an option to open the link in a new tab.
-            link: {
-              defaultProtocol: 'https://',
-              decorators: {
-                openInNewTab: {
-                  mode: 'manual',
-                  label: 'Open in a new tab',
-                  attributes: {
-                    target: '_blank',
-                    rel: 'noopener noreferrer',
-                  },
-                },
-              },
-            },
-            placeholder,
-            mediaEmbed: {
-              removeProviders: [
-                'spotify',
-                'instagram',
-                'twitter',
-                'googleMaps',
-                'flickr',
-                'facebook',
-              ],
-            },
-          }}
-          data={value}
-          disabled={disabled}
-          editor={CustomEditor}
-          onBlur={(_event, _editor) => {
-            setIsFocused(false);
-          }}
-          onChange={(_event, editor) => {
-            onChange(editor.getData());
-          }}
-          onFocus={(_event, _editor) => {
-            setIsFocused(true);
-          }}
-          onReady={(editor) => {
-            // Enable the following to set a max height for ckeditor
-            editor.editing.view.change((writer) => {
-              writer.setStyle(
-                'max-height',
-                '350px',
-                editor.editing.view.document.getRoot(),
-              );
-            });
-            editor.plugins.get('FileRepository').createUploadAdapter = (
-              loader,
-            ) => {
-              return uploadAdapter(loader);
-            };
-            if (autofocus) editor.focus();
-          }}
-        />
+        <Suspense
+          fallback={
+            <Skeleton
+              className="min-h-[94.2px] max-h-[35rem] w-full"
+              variant="rounded"
+            />
+          }
+        >
+          <CKEditorField
+            autoFocus={autofocus}
+            disabled={disabled}
+            onBlur={() => setIsFocused(false)}
+            onChange={onChange}
+            onFocus={() => setIsFocused(true)}
+            placeholder={placeholder}
+            value={value}
+          />
+        </Suspense>
       </div>
+
       {error && <FormHelperText error={!!error}>{error}</FormHelperText>}
     </div>
   );
 };
 
-CKEditorRichText.displayName = 'CKEditor';
-
 export default CKEditorRichText;
diff --git a/client/css-includes.json b/client/css-includes.json
index 54796f124d0..789e89bae3a 100644
--- a/client/css-includes.json
+++ b/client/css-includes.json
@@ -3,6 +3,7 @@
   "node_modules/rc-slider/assets",
   "node_modules/react-image-crop/dist/ReactCrop.css",
   "node_modules/react-tooltip/dist/react-tooltip.min.css",
+  "node_modules/coursemology-ckeditor/build/index.css",
   "app/lib/components/core/fields/CKEditor.css",
   "app/lib/components/core/fields/AceEditor.css"
 ]
diff --git a/client/package.json b/client/package.json
index 59f4eb7e28d..5721e2fe541 100644
--- a/client/package.json
+++ b/client/package.json
@@ -30,8 +30,7 @@
     "extends": "react-app"
   },
   "dependencies": {
-    "@ckeditor/ckeditor5-build-custom": "github:Coursemology/CKEditor5-build-coursemology#0.3.0",
-    "@ckeditor/ckeditor5-react": "^6.2.0",
+    "@ckeditor/ckeditor5-react": "^9.5.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@hello-pangea/dnd": "^16.6.0",
@@ -52,6 +51,7 @@
     "chart.js": "^3.8.2",
     "chartjs-adapter-moment": "^1.0.1",
     "chartjs-plugin-zoom": "^2.0.1",
+    "coursemology-ckeditor": "github:Coursemology/CKEditor5-build-coursemology#v1.0.0",
     "fabric": "^5.3.0",
     "fast-deep-equal": "^3.1.3",
     "history": "^5.2.0",
@@ -148,6 +148,7 @@
     "babel-plugin-react-remove-properties": "^0.3.0",
     "babel-plugin-transform-import-meta": "^2.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "ckeditor5": "^45.0.0",
     "compression-webpack-plugin": "^11.1.0",
     "css-loader": "^6.11.0",
     "cssnano": "^6.1.2",
diff --git a/client/yarn.lock b/client/yarn.lock
index 8f7e69bc3f3..1790025edeb 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1162,16 +1162,936 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@ckeditor/ckeditor5-build-custom@github:Coursemology/CKEditor5-build-coursemology#0.3.0":
-  version "0.3.0"
-  resolved "https://codeload.github.com/Coursemology/CKEditor5-build-coursemology/tar.gz/52d2d652d246530b139141f181540f1a5a901ab0"
-
-"@ckeditor/ckeditor5-react@^6.2.0":
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-react/-/ckeditor5-react-6.2.0.tgz#13e59d607f327eb11133e5b202440c6b119a4960"
-  integrity sha512-i/6OdxJ3iOCU7eiZXS8KYhK645PEAMISs9eFz60c0AFXZX5NTMvNWM68ac/J5sfg+IQ9U6mJ3flSykbJVlf0kA==
-  dependencies:
-    prop-types "^15.7.2"
+"@ckeditor/ckeditor-cloud-services-collaboration@52.7.0":
+  version "52.7.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor-cloud-services-collaboration/-/ckeditor-cloud-services-collaboration-52.7.0.tgz#7df594d5a40a0a7408d501ba7345f24ad621e6d8"
+  integrity sha512-e7VeippO5zybYjf2HS/ckHXqbQshu1UeWtplQwO9ix7vD6jRFYr4xtPAIXhjZ7FDODnH5M4ndiYivyZJdcIY1w==
+  dependencies:
+    protobufjs "7.4.0"
+    socket.io-client "4.7.0"
+    socket.io-parser "~4.2.3"
+    url-parse "1.5.10"
+    uuid "^9.0.1"
+
+"@ckeditor/ckeditor5-adapter-ckfinder@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-adapter-ckfinder/-/ckeditor5-adapter-ckfinder-45.0.0.tgz#7481ad3569d7e77a5875da38aa60668dba25f315"
+  integrity sha512-dv+BOds8K86QTEWETvEdbRyvP54z8v//pcBNq0ewHlUUU7dWiOYEiiRITYRO7T0x3HzzmYg+nL9nGU90w469sw==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-upload" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-alignment@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-alignment/-/ckeditor5-alignment-45.0.0.tgz#e5e36e053a48e727ec7d419b24ef89a98b381f97"
+  integrity sha512-5v93RZT9E5p1vRjPpsG80lYG4K+41uNxsUcBy5/gq5CVR7gWm6X12H2l8Z7RQaGlTe89JWhCscFi3MSXS4QRNg==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-autoformat@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-autoformat/-/ckeditor5-autoformat-45.0.0.tgz#df3976cb50610431eebfd8d05eaa6648abf28f9e"
+  integrity sha512-0duphMlUFDSqtNtI2PLsle4lpxDgH00znXA6hEaUuvvWCOAp8SyJ2fOFm19YmxEDcH8svYAE/sfoSn7o+Lm64w==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-heading" "45.0.0"
+    "@ckeditor/ckeditor5-typing" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-autosave@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-autosave/-/ckeditor5-autosave-45.0.0.tgz#a357340e50936d8e4f25575ee310df7a9da6cbbe"
+  integrity sha512-Byu86aceBmki0bxMFXtxq7M9iQB3pppuHq7YuTd7GsAbY7PjZdxs5vWLSFQ0pWL1L8lpEnmiwD2DxRhFjMeTpw==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-basic-styles@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-basic-styles/-/ckeditor5-basic-styles-45.0.0.tgz#ae13d8c341bcf766d7a8aba744d987d320e53646"
+  integrity sha512-eryGuvf6BXic7AHfBwrjrWCUvgDLNmHGiOZ29ZUtLr8ahNnG4e1LpJ7RkzadbRo8MCdvrY9vDk00hUxjEyfxVg==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-typing" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-block-quote@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-block-quote/-/ckeditor5-block-quote-45.0.0.tgz#fb8c5ef36493238f875b540bf93bf9745e151ddf"
+  integrity sha512-9QOOHMouSa9YfP/a+yIxeUZXsgDpBVd1kgDwE8XwoE+n1PY4KlWo5GErEoSfapueNOubRfFX+dSnksmwKABUqA==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-enter" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-typing" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-bookmark@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-bookmark/-/ckeditor5-bookmark-45.0.0.tgz#7de78ec4b175b9d62ef60f342109356440cb7b7d"
+  integrity sha512-l5CsvSWxfhMSQOOiU/S2g4ZiRtc79Vi6EZIGeKhBACdFTtoFTvQjU03Edi8gPa37o519/2cldE4rWKizILDXAw==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-link" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@ckeditor/ckeditor5-widget" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-ckbox@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-ckbox/-/ckeditor5-ckbox-45.0.0.tgz#d565d4e111038ec92a950973a60194b1e1de774e"
+  integrity sha512-BrB13JVOU/uPSSqQmxbd6LJP/PDtlvCBTrS9Erxa6//U2ZXvfgA+Dova4ghS3sB60w6eTr3JgGAhp2hAi9J/XQ==
+  dependencies:
+    "@ckeditor/ckeditor5-cloud-services" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-image" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-upload" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    blurhash "2.0.5"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-ckfinder@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-ckfinder/-/ckeditor5-ckfinder-45.0.0.tgz#517bd82ec2af4649b97c9e6c815f9062b1e52727"
+  integrity sha512-h/jHx49B4sKYt2uGBUTc4gihPRrk4BTK9mYjxbMhAx5tJzt6P5rtmRpQ6rAWXaqIHeZZit+geOk32GEd9fVDIw==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-image" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-clipboard@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-clipboard/-/ckeditor5-clipboard-45.0.0.tgz#899e5b745d066e0252887038c85c19c316124427"
+  integrity sha512-93iWIiMKY6OhhTNZUqCQVSy4MAWyWsdLWGKEn0AUMZpMOsP3CzCWE5Ot29Nool9IUzp1o1z54sWYPIDLliJvuw==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@ckeditor/ckeditor5-widget" "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-cloud-services@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-cloud-services/-/ckeditor5-cloud-services-45.0.0.tgz#3238323dddbac4e339ee403196c1e83d9774aaa7"
+  integrity sha512-udnFuhJjNjC30e7pqn3rsWwMhyLkhIK3AnwY2QmSUKsD0vfxyUKvhWyxM5KGGD/6zrbHZfOi4bOf2U1F6RYvKg==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-code-block@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-code-block/-/ckeditor5-code-block-45.0.0.tgz#4a66b20428e32bc61c4dae07a82fed867a14e9b8"
+  integrity sha512-SSQiVDjhZ+CulRaS8reCsa0ILq9TR0BnyNrGsHxESkKLqn9FiN3CKz63YHnutAk/ZCVcjW9zDozdfgaAKKPCAQ==
+  dependencies:
+    "@ckeditor/ckeditor5-clipboard" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-enter" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-collaboration-core@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-collaboration-core/-/ckeditor5-collaboration-core-45.0.0.tgz#fc8eda8f7a4aef338489ae6f03a31276f9bdfc42"
+  integrity sha512-p/v9M0Cr1YYBMZhTmcwhMksID5sVTUd5TRr6CnIlAgLdXJ8d9YBJPCPycMQbtBHKO2lejoVsNn74GhvdZLEo3Q==
+  dependencies:
+    "@ckeditor/ckeditor5-comments" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-theme-lark" "45.0.0"
+    "@ckeditor/ckeditor5-track-changes" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@types/luxon" "3.4.2"
+    ckeditor5 "45.0.0"
+    luxon "3.5.0"
+
+"@ckeditor/ckeditor5-comments@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-comments/-/ckeditor5-comments-45.0.0.tgz#a816f04e97d6b7486f7d47680bbf1e37995f773e"
+  integrity sha512-2spVMto4FvzruMEcxEpXetasOdpN8bSGLEENucEf+vLBrRZ4Ck2fWBwQQKEDyrLfgjrmnI1tXvJIVUQDXROTcA==
+  dependencies:
+    "@ckeditor/ckeditor5-clipboard" "45.0.0"
+    "@ckeditor/ckeditor5-collaboration-core" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-enter" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-paragraph" "45.0.0"
+    "@ckeditor/ckeditor5-select-all" "45.0.0"
+    "@ckeditor/ckeditor5-source-editing" "45.0.0"
+    "@ckeditor/ckeditor5-theme-lark" "45.0.0"
+    "@ckeditor/ckeditor5-typing" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-undo" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@ckeditor/ckeditor5-widget" "45.0.0"
+    ckeditor5 "45.0.0"
+    ckeditor5-collaboration "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-core@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-core/-/ckeditor5-core-45.0.0.tgz#a4ee0bb397fd016f8c07562f5d3efcaa6f26b6fd"
+  integrity sha512-+0RDW4ZpEnIEv6yLP3JJ3i0Jelcr71lSsVU7u9Wmnm/0jQF7u/QI4YrvOGBmlyLQ5Ji5d/SNCnOF8CXS+Amtrg==
+  dependencies:
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@ckeditor/ckeditor5-watchdog" "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-document-outline@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-document-outline/-/ckeditor5-document-outline-45.0.0.tgz#829b8903c959f12ea35c7a2522083b5a5632ddfb"
+  integrity sha512-c3uys8i42EhF9IfCJaDfMqcMCw7Ud28l2RDes5ru6BGr+tjY4eDP5MEardgt8IQbqNaTX/ZfoM6VosZFb+GKKg==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-heading" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@ckeditor/ckeditor5-widget" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-easy-image@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-easy-image/-/ckeditor5-easy-image-45.0.0.tgz#dcb54ccd8990f9e76f719b3709c41f4402144ade"
+  integrity sha512-KRZf/mcLGUYgmfwuBnCSW5DyVb9JpUjc+UCeFDdPtu0jWbVXgulV0xVpP6R/7NKdenS3PfkBvr1CzJR8GvBAaw==
+  dependencies:
+    "@ckeditor/ckeditor5-cloud-services" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-upload" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-editor-balloon@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-editor-balloon/-/ckeditor5-editor-balloon-45.0.0.tgz#1a87b259f1e4808237a8ff58d3189bc8614feadd"
+  integrity sha512-jE+64/8bhA3h/Tut8o4cJu4PHIq/EnhROZmcEdDwoPyon+oBKTPoyUEW5a3w4f/6OvNBA1OWaEo23lZeP2ka2g==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-editor-classic@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-editor-classic/-/ckeditor5-editor-classic-45.0.0.tgz#726ab86b043cf4e80e4cb9e4560ef1e68358f370"
+  integrity sha512-7AHVXI/ElCnaP6omdFNaKwaJimlIxKZ+UWV3Lk5VBwroTrqjJYQy4Mav2PRaCSE1INAlBMAdUWdUgaiXlmhOxQ==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-editor-decoupled@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-editor-decoupled/-/ckeditor5-editor-decoupled-45.0.0.tgz#0eae03623c2cfef8b7d925ed327700b5e9fd447e"
+  integrity sha512-SbIrts0JHj7hRg7SbNUrIyd7KLKgKEp/Cr3yoKA2+loMGT9clKUfhiB/ccs3yZ+dChGQk0Y4JIUV5D3YJqdSXw==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-editor-inline@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-editor-inline/-/ckeditor5-editor-inline-45.0.0.tgz#52fe076c088992575f1cc5e53099994c98d64141"
+  integrity sha512-B0Mh8Wm02OD+hWGZSeG9zpLrGBeBR9fsHApi+3wvc2u9FdpdCG2mJHGxtsHvyc1MnOFjn3JYl51kqFT8Cc5v4g==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-editor-multi-root@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-editor-multi-root/-/ckeditor5-editor-multi-root-45.0.0.tgz#6838763333734bd748487b7943706f88c4e17622"
+  integrity sha512-OJ15Rk90WE68DftCRO6IUA88pR6rdrh1jXH/vrCHru7Sk/9L+C09aysZpHj2wAaQ/dRUdJir9BOd60HCda0DRg==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-emoji@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-emoji/-/ckeditor5-emoji-45.0.0.tgz#d5c7ada833d1c75db2a9a197cf5ff651dcc08ea9"
+  integrity sha512-tz5aFp/1uHTYVULpES+5xv7u33A/D7lYmxVyPgydMYUFbrn9uMqioKtZ/1VVW6R7AORI50sayT0AkiaqqkD7Aw==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-mention" "45.0.0"
+    "@ckeditor/ckeditor5-typing" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+    fuzzysort "3.1.0"
+
+"@ckeditor/ckeditor5-engine@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-engine/-/ckeditor5-engine-45.0.0.tgz#e2fc3aceefc88a20822048c9d0edaeb926e9d685"
+  integrity sha512-vkCB1/Dmu5Xay4blb5UaLfy6w0QHTm7MFAa/9S3wjacfJyg7YK51o6tWq1UJspn0q66MjJNZYFXuFc488+xRyg==
+  dependencies:
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-enter@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-enter/-/ckeditor5-enter-45.0.0.tgz#93f95c9e0da882baf3989e039fe9c989f2c8448d"
+  integrity sha512-7wv/Y1egq6xG7/O8737zYh217QJS14Rc7wNfvP+y7Lsd+mqhETC4mTSY6iFpBaJqGQN1Ji5QuI+wm5rbwou80g==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+
+"@ckeditor/ckeditor5-essentials@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-essentials/-/ckeditor5-essentials-45.0.0.tgz#9888a1cf9a2991b19a0971572e66afe5917aaa94"
+  integrity sha512-5YLX+hQrSUz+hsMJ5zozdYxEUMXinR1K6rnrz0l9WxCi12UoYIcUbPuqi1LmlkgZEJk5IcbatnM3TJN9Kef4Hw==
+  dependencies:
+    "@ckeditor/ckeditor5-clipboard" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-enter" "45.0.0"
+    "@ckeditor/ckeditor5-select-all" "45.0.0"
+    "@ckeditor/ckeditor5-typing" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-undo" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-find-and-replace@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-find-and-replace/-/ckeditor5-find-and-replace-45.0.0.tgz#4c8b195654ed7d67bd4ae73d98911afb05ac7dbe"
+  integrity sha512-Hqnn5aLvmfDmdpMccKXbr+Huzw05RzT7WFYZyNv17Cv7KIS4MYHedrHX45PMTLIh/hkIZIUPPU1t5khbIXsBlw==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-font@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-font/-/ckeditor5-font-45.0.0.tgz#8b514bb0e43e3a0ab45c730dc39849f4b9337350"
+  integrity sha512-MX7srmuCJjUeUiDDcPu3MlNn3tJpDnDpyvMU9LtvS2/fKFwoBxv92eAfxoiQuCHgNogjySGxXUtroFSgkEcraA==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-fullscreen@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-fullscreen/-/ckeditor5-fullscreen-45.0.0.tgz#4e266ed8f09591b5dccd14b567784279e8d6b1d2"
+  integrity sha512-KvGY64OQqcZUvsXgO440uvLvJar++0DLEG7zPqrrnKz9soNVils+DLuiRhlUi2QY9xyyWYjA1e8cyPUSHIxuYg==
+  dependencies:
+    "@ckeditor/ckeditor5-comments" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-document-outline" "45.0.0"
+    "@ckeditor/ckeditor5-editor-classic" "45.0.0"
+    "@ckeditor/ckeditor5-editor-decoupled" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-pagination" "45.0.0"
+    "@ckeditor/ckeditor5-real-time-collaboration" "45.0.0"
+    "@ckeditor/ckeditor5-revision-history" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-heading@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-heading/-/ckeditor5-heading-45.0.0.tgz#f4236907ddf26b2a46fd778914a68d47c28af82e"
+  integrity sha512-xOc7Qu25q4Ih9Dit3YrlwqN087sPzuzGam6F3kUzF3L3Bb1334BzlzwZI0gJLreDeyN0yrvDMxuNzhMD6g114A==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-paragraph" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-highlight@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-highlight/-/ckeditor5-highlight-45.0.0.tgz#557582a096fe4a31e41d01900a854d63e3e39eab"
+  integrity sha512-NN4AWohrIlu4lCtwfgSOusqjkt6L47LHz/4tXvgPMuGuZwbVGq67yD16G85EiUoCV7ClI9fJDFW58gYOZhPD1w==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-horizontal-line@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-horizontal-line/-/ckeditor5-horizontal-line-45.0.0.tgz#ff71b3db5e8a87ec9cf1c5a2dc210ff9b1029693"
+  integrity sha512-YyLh5qcQ5jUT65jv2Bv+26hEf/3yXu2EUBj7yjW4arWKGFxwl6mnTnpEsnKPh7HPD75Yo45wdG1Ldyp++q22/w==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@ckeditor/ckeditor5-widget" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-html-embed@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-html-embed/-/ckeditor5-html-embed-45.0.0.tgz#893be4cf7f0db84a75683fed3c3e177ae1386efb"
+  integrity sha512-r6NcNfuAbask61h+4aA5ZHFi+dDZyXvxDwdyT0h8REBB+ltV/WYeiVpKjKtDlNq6iOmsw3LLSyOssObCi0A0lg==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@ckeditor/ckeditor5-widget" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-html-support@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-html-support/-/ckeditor5-html-support-45.0.0.tgz#9d4cc6a79f63587b38ede827b8f7a3e855bdec6b"
+  integrity sha512-6RaqoRsIp37TN7VyqCdoF0sVdy+8TD+slndtgJ2RWM4+ncfJcnqWiw+r2cKlcnZPU6oqkxLtdJ5aU60MGJ0p8Q==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-enter" "45.0.0"
+    "@ckeditor/ckeditor5-heading" "45.0.0"
+    "@ckeditor/ckeditor5-image" "45.0.0"
+    "@ckeditor/ckeditor5-list" "45.0.0"
+    "@ckeditor/ckeditor5-table" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@ckeditor/ckeditor5-widget" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-icons@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-icons/-/ckeditor5-icons-45.0.0.tgz#3d0128c8d14487c35523b411196aa8904bb9897c"
+  integrity sha512-DYLH/Qpy2lPkqrZ1f4R6ruqRwgKzGJbzYuq0wXf1cwrcU2QeK3Q1kToUw8wIZvZayiQj9gKbVOHGQHCfbhfmVQ==
+
+"@ckeditor/ckeditor5-image@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-image/-/ckeditor5-image-45.0.0.tgz#f66d06ddc14a12fb7c032b2ef21f20c61176df20"
+  integrity sha512-WhFuZxNDl9ZhN5/C3DLevmR3jpYNOnaaTtzwr+DOxR3YW/qd5XCHEhapZ6vjz5xpjX+0wySwocy+sAW2bfgFjw==
+  dependencies:
+    "@ckeditor/ckeditor5-clipboard" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-typing" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-undo" "45.0.0"
+    "@ckeditor/ckeditor5-upload" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@ckeditor/ckeditor5-widget" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-indent@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-indent/-/ckeditor5-indent-45.0.0.tgz#6666d3edea9f6a728d1610175314650e6de5b1c3"
+  integrity sha512-fTaNB0ji9Nxl27+m1QBFlDloObSZp+z+aGdkfw8Xlk33DEv5WWwqv12F3vUeckc8ASUC8Sr0dRd5kfsDSd497g==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-heading" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-list" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-integrations-common@^2.2.2":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-integrations-common/-/ckeditor5-integrations-common-2.2.3.tgz#41c9fdb25f29b2f1c60bd85bd4a9a0b68fd51100"
+  integrity sha512-92kQWQj1wiABF7bY1+J79Ze+WHr7pwVBufn1eeJLWcTXbPQq4sAolfKv8Y8Ka9g69mdyE9+GPWmGFYDeQJVPDg==
+
+"@ckeditor/ckeditor5-language@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-language/-/ckeditor5-language-45.0.0.tgz#675942e513a812a850dfa8df671e616331468e5b"
+  integrity sha512-7mgZxProZqKW2aHrJk3keXcgnv+MI+NPHhSIjn7aPZKVfSupMY6dRaE1pZfy9gIfS+dgp/wzkwTEpCuVvdnZfw==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-link@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-link/-/ckeditor5-link-45.0.0.tgz#f1ae128dd9c03a41377478a7ebc156a6498a05e2"
+  integrity sha512-pdu0y/+E3iR38iSGINYLop3cOZ/hzghHhE2KtRBXxvlNhuUT5MXi+hQKhXEvs08IiEo+J8KS6CkCIxupyJLymA==
+  dependencies:
+    "@ckeditor/ckeditor5-clipboard" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-image" "45.0.0"
+    "@ckeditor/ckeditor5-typing" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@ckeditor/ckeditor5-widget" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-list@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-list/-/ckeditor5-list-45.0.0.tgz#32a1b8ce6d242668873850032c29c94fde8aad08"
+  integrity sha512-ZKKIOQTU+nSExrc7/pVx2DHRUH/r1HvVD2VzfEXVm7l67kQ/+ZRbsLoN4Ae8OKiN88UkvFEk0/z51Ck6sf/jIw==
+  dependencies:
+    "@ckeditor/ckeditor5-clipboard" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-enter" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-typing" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-markdown-gfm@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-markdown-gfm/-/ckeditor5-markdown-gfm-45.0.0.tgz#e542e38fed6369d3b6232a9782c6c8271c08b060"
+  integrity sha512-DoXul5fiNqBrGuG8WAnJBd9Rwq/t5j6MLD7kyxVRp43c8vTXFeyXS8/dsvaAU99a0cw+zQlweoBAaGuyKd63bg==
+  dependencies:
+    "@ckeditor/ckeditor5-clipboard" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@types/marked" "4.3.2"
+    "@types/turndown" "5.0.5"
+    ckeditor5 "45.0.0"
+    marked "4.0.12"
+    turndown "7.2.0"
+    turndown-plugin-gfm "1.0.2"
+
+"@ckeditor/ckeditor5-media-embed@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-media-embed/-/ckeditor5-media-embed-45.0.0.tgz#99d0ce3326d0cbe70161c6237f5747f07b889536"
+  integrity sha512-IFPsG26+WIyBPMHVCXzfgkfPjEFqR7Lc9m5sR2gbQY0H34EjaoSJ7bxocktSxly/z0Hgoe9oMhMFIzZ5sa2r6A==
+  dependencies:
+    "@ckeditor/ckeditor5-clipboard" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-typing" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-undo" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@ckeditor/ckeditor5-widget" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-mention@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-mention/-/ckeditor5-mention-45.0.0.tgz#096aa5b4767ae88410fbda8f817b2134d64fb35e"
+  integrity sha512-ReTMWF6cUgFeB/ZRdxSy6vIoLJlDi2OREPZAsomS1n/7xL0qRsIUeAw3Vb9+CuidP0jepQa6dDicW9RolfFJHQ==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-typing" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-merge-fields@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-merge-fields/-/ckeditor5-merge-fields-45.0.0.tgz#f99118fff7085bedd3ed85bcfefbe1949f6f39cc"
+  integrity sha512-nQc8GLwFQEungjMSBX7vbT2jkA03jp9v0Aq66Ecx3n1YxqJkq7Qv8rUWr/ot+5MJk6Isly2uwBKchndK+aUP4w==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-image" "45.0.0"
+    "@ckeditor/ckeditor5-mention" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@ckeditor/ckeditor5-widget" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-minimap@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-minimap/-/ckeditor5-minimap-45.0.0.tgz#7b35702e924c865f6487c0e8cd8af7de18411d05"
+  integrity sha512-xEPctHxG3XgxVXdVg6hmn/9pN1nGBqZHZ0XugWUbROopfy9yCgSGX0sUXad4C8eQQk612B5HFaaXd8L9tQ2d0g==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-operations-compressor@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-operations-compressor/-/ckeditor5-operations-compressor-45.0.0.tgz#f05b67e0bfe9dd2c16b441554f76e52a2a7d8130"
+  integrity sha512-NwXvgXRXLfoM359LirW3Xf8Hmu8dst3bgxxX9EBJrNdXGTAtLfPRRQ7c5vJa3AZpbfAQAG4DJg9OPrcPdbTN4w==
+  dependencies:
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+    protobufjs "7.4.0"
+
+"@ckeditor/ckeditor5-page-break@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-page-break/-/ckeditor5-page-break-45.0.0.tgz#8a0f4ce3b62ec71716b8d82dc30150c90417d05e"
+  integrity sha512-SO/so8ACSw50zp/LxDJz0iOnbWfFLpkvjUaUrvX88+rp03NMxFUXQKeuRV+tgI0puKNq2dvl8dfc+bLKZFgNAw==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@ckeditor/ckeditor5-widget" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-pagination@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-pagination/-/ckeditor5-pagination-45.0.0.tgz#a4f59ee961778f46951033d2373c4fb3bfb36d48"
+  integrity sha512-xim17YZdW8rizVBuqKc2OE5DhDTAxYxtQxZJU4GuCvih2JUT9bsmsksUI6VrloH/cDJ1mUy/aAQpo6ivZLqqzQ==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-theme-lark" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-paragraph@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-paragraph/-/ckeditor5-paragraph-45.0.0.tgz#df8c6d5319b6847f2a608992d331fdc5b3ff5299"
+  integrity sha512-0/zTnYNXfp7HTh40MRPPz0hLJu/+SBa0mHFCkpvzU7pFsuvTib5K35NVcEPEVt84aEoyC3EMkMdTAene0P1LMA==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+
+"@ckeditor/ckeditor5-paste-from-office@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-paste-from-office/-/ckeditor5-paste-from-office-45.0.0.tgz#8e3815043b639c369d4dd464ef6d7d3c41714faa"
+  integrity sha512-rRyXjpFGzknQa+0g5vQ8ufvOUI1YViuHzW1ReXMqYnLU3ubrfwOV0kPOH343ahitGjrHqSciZQ5wdbezroL1gQ==
+  dependencies:
+    "@ckeditor/ckeditor5-clipboard" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-react@^9.5.0":
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-react/-/ckeditor5-react-9.5.0.tgz#c539b8d2013573254619b62b9ccbcbf870abeebf"
+  integrity sha512-0NEBg3EDQaQDwj9xswC34qspDiNgXMIn41lZ3pjNx915NWRabqQDnR5a8TisPaOlx3gHnIdOXJ0BH1wRHsJxhQ==
+  dependencies:
+    "@ckeditor/ckeditor5-integrations-common" "^2.2.2"
+
+"@ckeditor/ckeditor5-real-time-collaboration@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-real-time-collaboration/-/ckeditor5-real-time-collaboration-45.0.0.tgz#5e7dac124a97032f4bb5215d1ea93b39e039343e"
+  integrity sha512-WaNQDJgTdl1s+sML0pyFmCs6IvQdG7ra8F2jAdxWIk1WA1YkbdFEKwFkJR/UW5zS0cdvN21SWnWpfoeuzKYyMw==
+  dependencies:
+    "@ckeditor/ckeditor-cloud-services-collaboration" "52.7.0"
+    "@ckeditor/ckeditor5-cloud-services" "45.0.0"
+    "@ckeditor/ckeditor5-comments" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-editor-multi-root" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-operations-compressor" "45.0.0"
+    "@ckeditor/ckeditor5-revision-history" "45.0.0"
+    "@ckeditor/ckeditor5-theme-lark" "45.0.0"
+    "@ckeditor/ckeditor5-track-changes" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+    ckeditor5-collaboration "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-remove-format@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-remove-format/-/ckeditor5-remove-format-45.0.0.tgz#d30a4487f64c25636ec26af8f1166c11372c49a1"
+  integrity sha512-HWVO26OpxDGf9WNmck3TgDZsQc7Rcxzstuu9lwzJc9D1kJlPgNTRuYNwEPEn2ijdNdgDOPCo6PgUvZcmuTkw1g==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-restricted-editing@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-restricted-editing/-/ckeditor5-restricted-editing-45.0.0.tgz#8054155cd266a98e655596ae19fe036c107efbc4"
+  integrity sha512-pYQJxuVTuJvHOvu0DR9D+AVi6OUIYSoOkGdoaak3OULn5pQz2QDzXVfdIOlQA6ooLBkvg4bYcY3V4lWEkrNYQw==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-revision-history@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-revision-history/-/ckeditor5-revision-history-45.0.0.tgz#355418ac4c1dbfab37d43c2bc4399a98a6721a06"
+  integrity sha512-zTKb7UFEh7e5U6G8o2+PbG6huheZQ1hAj33jMuJ+ZA83cSh2bwVOUL4NBfvzPaQm5W+R41G7o1eOf5NcRFDHdA==
+  dependencies:
+    "@ckeditor/ckeditor5-autosave" "45.0.0"
+    "@ckeditor/ckeditor5-comments" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-editor-classic" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@types/luxon" "3.4.2"
+    ckeditor5 "45.0.0"
+    ckeditor5-collaboration "45.0.0"
+    es-toolkit "1.32.0"
+    luxon "3.5.0"
+
+"@ckeditor/ckeditor5-select-all@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-select-all/-/ckeditor5-select-all-45.0.0.tgz#623474647f8e9cba4bd8830326480a96aa21e322"
+  integrity sha512-rOQEZ5BpGbEXqV3YLPvDrtGImM8c0Gy7AMDPH8OlSFHIasQnhdRCj91DhgAiSs3BNvG2xVwpf5TFWvHcOFi4oQ==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+
+"@ckeditor/ckeditor5-show-blocks@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-show-blocks/-/ckeditor5-show-blocks-45.0.0.tgz#18e1c8760d1455325b3803f2ce868b17a73ee615"
+  integrity sha512-HqnyWEoORir9zh6EcoIrBCpnpPVGQhM7N2kXPaWPek1mJKC77tEEXavGwGN/KdYkw6jRc7vnG5slJZYz1LPAbQ==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-source-editing@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-source-editing/-/ckeditor5-source-editing-45.0.0.tgz#810e5497f33b6b00b92c5fd7ef80fa3551a2eec8"
+  integrity sha512-es6kx14NnHew/GYVWBCvdXP0mvRLSwq/WEL4R/rGDkvTyxFICea2bEoGCEeiw47BMYu/5G6b+7GjDBiYJgJSPw==
+  dependencies:
+    "@ckeditor/ckeditor5-comments" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-document-outline" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-theme-lark" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-special-characters@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-special-characters/-/ckeditor5-special-characters-45.0.0.tgz#0f7883f4e6831a82ab83ea0256b68ed51d02f26f"
+  integrity sha512-T/ELE3gpvKne9cfQNRsP4aZl84DFMknsQp6G6lFrk/1QZOnsWRp3uDvYiHhpjtGKw+R/2FXbgA18OVOEFvNC7Q==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-typing" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+
+"@ckeditor/ckeditor5-style@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-style/-/ckeditor5-style-45.0.0.tgz#1ac3398c578ed1151e5a25892931483e1ad1c25e"
+  integrity sha512-Chhx4CFTDYgmcLBNtMXPNNyzh/xejMOuJ9eOTjHQ7EJDdF7+hMK5cK5Yk+noeHhLMeyxCQe7hmOQNmkE1f9Nbg==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-html-support" "45.0.0"
+    "@ckeditor/ckeditor5-list" "45.0.0"
+    "@ckeditor/ckeditor5-table" "45.0.0"
+    "@ckeditor/ckeditor5-typing" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-table@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-table/-/ckeditor5-table-45.0.0.tgz#be41187272b6eb76bf246bda12f863be3a50aa7f"
+  integrity sha512-LgF5AF9x9epul0UogXBpK9UUE4iamwTyL6niWyGd/qUEl3LQbX0aSBnHTfrATcHhbo+DmIaDQDEsU7IVrDLkDw==
+  dependencies:
+    "@ckeditor/ckeditor5-clipboard" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@ckeditor/ckeditor5-widget" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-theme-lark@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-theme-lark/-/ckeditor5-theme-lark-45.0.0.tgz#59d55c45fc96944ee8ab23fdb15aea108a73b3af"
+  integrity sha512-PLtgUsE0mV2HfbBzLLW+BxUrtPQDEbumfIb8RlOVEd1yg6aTp3qNBQWDfiKL3eBJRFlh3qWYVouwu1S35JYn5w==
+  dependencies:
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+
+"@ckeditor/ckeditor5-track-changes@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-track-changes/-/ckeditor5-track-changes-45.0.0.tgz#db5bae1a9420b384d72d44f0f13161fb761d9ece"
+  integrity sha512-2i6H5pB55l1D+BihDT9kUUWcGF8he1IBSMBrQ3uvbEdo3OLd9sgw0ZrREo84Z5S0r5dsdaJA97/JatW2Q3KZXg==
+  dependencies:
+    "@ckeditor/ckeditor5-clipboard" "45.0.0"
+    "@ckeditor/ckeditor5-code-block" "45.0.0"
+    "@ckeditor/ckeditor5-comments" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-editor-multi-root" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-enter" "45.0.0"
+    "@ckeditor/ckeditor5-find-and-replace" "45.0.0"
+    "@ckeditor/ckeditor5-font" "45.0.0"
+    "@ckeditor/ckeditor5-heading" "45.0.0"
+    "@ckeditor/ckeditor5-highlight" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-image" "45.0.0"
+    "@ckeditor/ckeditor5-link" "45.0.0"
+    "@ckeditor/ckeditor5-list" "45.0.0"
+    "@ckeditor/ckeditor5-media-embed" "45.0.0"
+    "@ckeditor/ckeditor5-merge-fields" "45.0.0"
+    "@ckeditor/ckeditor5-restricted-editing" "45.0.0"
+    "@ckeditor/ckeditor5-style" "45.0.0"
+    "@ckeditor/ckeditor5-table" "45.0.0"
+    "@ckeditor/ckeditor5-typing" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@ckeditor/ckeditor5-widget" "45.0.0"
+    ckeditor5 "45.0.0"
+    ckeditor5-collaboration "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-typing@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-typing/-/ckeditor5-typing-45.0.0.tgz#3e3f8866f141968e283956bb39dbede99ab483d8"
+  integrity sha512-sQonahw1LdeOoXgfeKZ//seh066sBJ7ABK1kyXfI5a7rPVZ1K28G4mOyvVBMwXq4Vot0Gffc5V8sW9CmcOr/5A==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-ui@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-ui/-/ckeditor5-ui-45.0.0.tgz#89fb62e54cdf717446383eca827b83ebd2a018d0"
+  integrity sha512-kbZ02pu9xBl7OAf5Reou/9VsQwsOChw4n7xMWTqL4SzDpCweULpUugtiGW1n/zpF956PN6hAaWAbpSgXFBjAAw==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-editor-multi-root" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@types/color-convert" "2.0.4"
+    color-convert "2.0.1"
+    color-parse "1.4.2"
+    es-toolkit "1.32.0"
+    vanilla-colorful "0.7.2"
+
+"@ckeditor/ckeditor5-undo@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-undo/-/ckeditor5-undo-45.0.0.tgz#aecb9af6164b7915a1764246d765f17476baedbb"
+  integrity sha512-b3ZGzUM4kN6rgNboUxLMhPW0ChvmlmC82I/Up/LAAImUO4BQSKIBc9wxSPnd9raMHFi28v1q3v6g6y041VpKgQ==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+
+"@ckeditor/ckeditor5-upload@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-upload/-/ckeditor5-upload-45.0.0.tgz#23178faf5a6f1a45b4265e8d03f3191c88f2693d"
+  integrity sha512-yZI8FNoxJV1CANYuafX8d2LNZD2OvMSiKOoqpRIuqZcRuzxQVOmsnCc+Mbd+MGGRePFZ+izeaxfD1d+YwUBs9Q==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+
+"@ckeditor/ckeditor5-utils@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-utils/-/ckeditor5-utils-45.0.0.tgz#ae192f10f4f0d0f9bbf441a2274ee92b21f76bc2"
+  integrity sha512-U/1uPk/dcrO2uzRUzuzmXM+YCm7Tjfwfi49MNgC2zdSSWzhT+HTeGGXgLSAFMOptfzKYmxmYj5cadfDs13p4eA==
+  dependencies:
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-watchdog@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-watchdog/-/ckeditor5-watchdog-45.0.0.tgz#f26d750ed6b9a279bfc48d8a532c0f444a329fef"
+  integrity sha512-rjZVYQPXM7Scqrheh2gblVWb0GsuH5JRV3rn4e+3+MOcI/UfepmLFifIVzuBIYm1uhrMx9M14THFVyceDbNkCQ==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-editor-multi-root" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-widget@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-widget/-/ckeditor5-widget-45.0.0.tgz#aa374dc4ffa2fa13874cf0d98208f02dba3e2774"
+  integrity sha512-yANcyKsyniJrcGsAdV3FD+Oz/OWLTezMf83jXaVzaxYU/gImukpGG/62sDWp2OaNMxqc+Qr64vSoi8lXA17LTg==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-enter" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-typing" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    es-toolkit "1.32.0"
+
+"@ckeditor/ckeditor5-word-count@45.0.0":
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-word-count/-/ckeditor5-word-count-45.0.0.tgz#068850c077c895d53eb75fd63cf6a948536a5cef"
+  integrity sha512-72Fd2mUKN8dXRMKGKLPhUiQHhoGnp0ZyPwP8Ezcpbwfn/mh5SBxP3LyQGg35sKy1xJgDYywHlWvjVhw95LgIjg==
+  dependencies:
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    ckeditor5 "45.0.0"
+    es-toolkit "1.32.0"
 
 "@discoveryjs/json-ext@^0.5.0":
   version "0.5.7"
@@ -1887,6 +2807,11 @@
     semver "^7.3.5"
     tar "^6.1.11"
 
+"@mixmark-io/domino@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@mixmark-io/domino/-/domino-2.2.0.tgz#4e8ec69bf1afeb7a14f0628b7e2c0f35bdb336c3"
+  integrity sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw==
+
 "@mui/base@5.0.0-beta.40", "@mui/base@^5.0.0-beta.40":
   version "5.0.0-beta.40"
   resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.40.tgz#1f8a782f1fbf3f84a961e954c8176b187de3dae2"
@@ -2075,6 +3000,59 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@protobufjs/aspromise/-/aspromise-1.1.2.tgz#9b8b0cc663d669a7d8f6f5d0893a14d348f30fbf"
+  integrity sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==
+
+"@protobufjs/base64@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@protobufjs/base64/-/base64-1.1.2.tgz#4c85730e59b9a1f1f349047dbf24296034bb2735"
+  integrity sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==
+
+"@protobufjs/codegen@^2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@protobufjs/codegen/-/codegen-2.0.4.tgz#7ef37f0d010fb028ad1ad59722e506d9262815cb"
+  integrity sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==
+
+"@protobufjs/eventemitter@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz#355cbc98bafad5978f9ed095f397621f1d066b70"
+  integrity sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==
+
+"@protobufjs/fetch@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/fetch/-/fetch-1.1.0.tgz#ba99fb598614af65700c1619ff06d454b0d84c45"
+  integrity sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==
+  dependencies:
+    "@protobufjs/aspromise" "^1.1.1"
+    "@protobufjs/inquire" "^1.1.0"
+
+"@protobufjs/float@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@protobufjs/float/-/float-1.0.2.tgz#5e9e1abdcb73fc0a7cb8b291df78c8cbd97b87d1"
+  integrity sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==
+
+"@protobufjs/inquire@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/inquire/-/inquire-1.1.0.tgz#ff200e3e7cf2429e2dcafc1140828e8cc638f089"
+  integrity sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==
+
+"@protobufjs/path@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@protobufjs/path/-/path-1.1.2.tgz#6cc2b20c5c9ad6ad0dccfd21ca7673d8d7fbf68d"
+  integrity sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==
+
+"@protobufjs/pool@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/pool/-/pool-1.1.0.tgz#09fd15f2d6d3abfa9b65bc366506d6ad7846ff54"
+  integrity sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==
+
+"@protobufjs/utf8@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
+  integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
+
 "@rails/actioncable@^7.1.3":
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/@rails/actioncable/-/actioncable-7.1.3.tgz#4db480347775aeecd4dde2405659eef74a458881"
@@ -2148,6 +3126,11 @@
   dependencies:
     "@sinonjs/commons" "^2.0.0"
 
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz#821f8442f4175d8f0467b9daf26e3a18e2d02af2"
+  integrity sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==
+
 "@svgr/babel-plugin-add-jsx-attribute@8.0.0":
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz#4001f5d5dd87fa13303e36ee106e3ff3a7eb8b22"
@@ -2471,6 +3454,18 @@
   dependencies:
     "@types/node" "*"
 
+"@types/color-convert@2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/color-convert/-/color-convert-2.0.4.tgz#843398ae71e951dc5415d202dfd5e43108823eeb"
+  integrity sha512-Ub1MmDdyZ7mX//g25uBAoH/mWGd9swVbt8BseymnaE18SU4po/PjmCrHxqIIRjBo3hV/vh1KGr0eMxUhp+t+dQ==
+  dependencies:
+    "@types/color-name" "^1.1.0"
+
+"@types/color-name@^1.1.0":
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.5.tgz#3a3510c4e3661f7707c5ae9c67d726986e6e147d"
+  integrity sha512-j2K5UJqGTxeesj6oQuGpMgifpT5k9HprgQd8D1Y0lOFqKHl3PJu5GMeS4Y5EgjS55AE6OQxf8mPED9uaGbf4Cg==
+
 "@types/connect-history-api-fallback@^1.5.4":
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz#7de71645a103056b48ac3ce07b3520b819c1d5b3"
@@ -2640,6 +3635,16 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
   integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
 
+"@types/luxon@3.4.2":
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.4.2.tgz#e4fc7214a420173cea47739c33cdf10874694db7"
+  integrity sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA==
+
+"@types/marked@4.3.2":
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.3.2.tgz#e2e0ad02ebf5626bd215c5bae2aff6aff0ce9eac"
+  integrity sha512-a79Yc3TOk6dGdituy8hmTTJXjOkZ7zsFYV10L337ttq/rec8lRMDBpV7fL3uLx6TgbFCa5DU/h8FmIBQPSbU0w==
+
 "@types/mdast@^4.0.0":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-4.0.1.tgz#9c45e60a04e79f160dcefe6545d28ae536a6ed22"
@@ -2679,6 +3684,13 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.45.tgz#2c0fafd78705e7a18b7906b5201a522719dc5190"
   integrity sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==
 
+"@types/node@>=13.7.0":
+  version "22.14.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.14.1.tgz#53b54585cec81c21eee3697521e31312d6ca1e6f"
+  integrity sha512-u0HuPQwe/dHrItgHHpmw3N2fYCR6x4ivMNbPHRkBVP4CvN+kiRrKHWk3i8tXiO/joPwXLMYvF9TTF0eqgHIuOw==
+  dependencies:
+    undici-types "~6.21.0"
+
 "@types/papaparse@^5.3.14":
   version "5.3.14"
   resolved "https://registry.yarnpkg.com/@types/papaparse/-/papaparse-5.3.14.tgz#345cc2a675a90106ff1dc33b95500dfb30748031"
@@ -2851,6 +3863,11 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"
   integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
 
+"@types/turndown@5.0.5":
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/@types/turndown/-/turndown-5.0.5.tgz#614de24fc9ace4d8c0d9483ba81dc8c1976dd26f"
+  integrity sha512-TL2IgGgc7B5j78rIccBtlYAnkuv8nUQqhQc+DSYV5j9Be9XOcm/SKOVRuA47xAVI3680Tk9B1d8flK2GWT2+4w==
+
 "@types/unist@*", "@types/unist@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.0.tgz#988ae8af1e5239e89f9fbb1ade4c935f4eeedf9a"
@@ -3784,6 +4801,11 @@ bl@^4.0.3:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
+blurhash@2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/blurhash/-/blurhash-2.0.5.tgz#efde729fc14a2f03571a6aa91b49cba80d1abe4b"
+  integrity sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==
+
 body-parser@1.20.3:
   version "1.20.3"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
@@ -4098,6 +5120,80 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
+ckeditor5-collaboration@45.0.0:
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/ckeditor5-collaboration/-/ckeditor5-collaboration-45.0.0.tgz#3d10e5eaf1be16e5f7a259b036e5b17c8a829145"
+  integrity sha512-5Uz3VJOYfepeFNgiJvdIwLuKqj582kx8Yldwfdmn/GMWemhDXpz2XYmvZhCPPPQXQl/aRrUu4ewpjNHnShHr2A==
+  dependencies:
+    "@ckeditor/ckeditor5-collaboration-core" "45.0.0"
+
+ckeditor5@45.0.0, ckeditor5@^45.0.0:
+  version "45.0.0"
+  resolved "https://registry.yarnpkg.com/ckeditor5/-/ckeditor5-45.0.0.tgz#45e35458c25e9c75f0886e8ed94584ef4f4223e0"
+  integrity sha512-83LLE6nK6oeq2zGf2H5dwECtKET9/WBkFFwbaks7INmW2EqgijBluLwm2gnX/FPLpHzXxUUESAisr9HlH1gerQ==
+  dependencies:
+    "@ckeditor/ckeditor5-adapter-ckfinder" "45.0.0"
+    "@ckeditor/ckeditor5-alignment" "45.0.0"
+    "@ckeditor/ckeditor5-autoformat" "45.0.0"
+    "@ckeditor/ckeditor5-autosave" "45.0.0"
+    "@ckeditor/ckeditor5-basic-styles" "45.0.0"
+    "@ckeditor/ckeditor5-block-quote" "45.0.0"
+    "@ckeditor/ckeditor5-bookmark" "45.0.0"
+    "@ckeditor/ckeditor5-ckbox" "45.0.0"
+    "@ckeditor/ckeditor5-ckfinder" "45.0.0"
+    "@ckeditor/ckeditor5-clipboard" "45.0.0"
+    "@ckeditor/ckeditor5-cloud-services" "45.0.0"
+    "@ckeditor/ckeditor5-code-block" "45.0.0"
+    "@ckeditor/ckeditor5-core" "45.0.0"
+    "@ckeditor/ckeditor5-easy-image" "45.0.0"
+    "@ckeditor/ckeditor5-editor-balloon" "45.0.0"
+    "@ckeditor/ckeditor5-editor-classic" "45.0.0"
+    "@ckeditor/ckeditor5-editor-decoupled" "45.0.0"
+    "@ckeditor/ckeditor5-editor-inline" "45.0.0"
+    "@ckeditor/ckeditor5-editor-multi-root" "45.0.0"
+    "@ckeditor/ckeditor5-emoji" "45.0.0"
+    "@ckeditor/ckeditor5-engine" "45.0.0"
+    "@ckeditor/ckeditor5-enter" "45.0.0"
+    "@ckeditor/ckeditor5-essentials" "45.0.0"
+    "@ckeditor/ckeditor5-find-and-replace" "45.0.0"
+    "@ckeditor/ckeditor5-font" "45.0.0"
+    "@ckeditor/ckeditor5-fullscreen" "45.0.0"
+    "@ckeditor/ckeditor5-heading" "45.0.0"
+    "@ckeditor/ckeditor5-highlight" "45.0.0"
+    "@ckeditor/ckeditor5-horizontal-line" "45.0.0"
+    "@ckeditor/ckeditor5-html-embed" "45.0.0"
+    "@ckeditor/ckeditor5-html-support" "45.0.0"
+    "@ckeditor/ckeditor5-icons" "45.0.0"
+    "@ckeditor/ckeditor5-image" "45.0.0"
+    "@ckeditor/ckeditor5-indent" "45.0.0"
+    "@ckeditor/ckeditor5-language" "45.0.0"
+    "@ckeditor/ckeditor5-link" "45.0.0"
+    "@ckeditor/ckeditor5-list" "45.0.0"
+    "@ckeditor/ckeditor5-markdown-gfm" "45.0.0"
+    "@ckeditor/ckeditor5-media-embed" "45.0.0"
+    "@ckeditor/ckeditor5-mention" "45.0.0"
+    "@ckeditor/ckeditor5-minimap" "45.0.0"
+    "@ckeditor/ckeditor5-page-break" "45.0.0"
+    "@ckeditor/ckeditor5-paragraph" "45.0.0"
+    "@ckeditor/ckeditor5-paste-from-office" "45.0.0"
+    "@ckeditor/ckeditor5-remove-format" "45.0.0"
+    "@ckeditor/ckeditor5-restricted-editing" "45.0.0"
+    "@ckeditor/ckeditor5-select-all" "45.0.0"
+    "@ckeditor/ckeditor5-show-blocks" "45.0.0"
+    "@ckeditor/ckeditor5-source-editing" "45.0.0"
+    "@ckeditor/ckeditor5-special-characters" "45.0.0"
+    "@ckeditor/ckeditor5-style" "45.0.0"
+    "@ckeditor/ckeditor5-table" "45.0.0"
+    "@ckeditor/ckeditor5-theme-lark" "45.0.0"
+    "@ckeditor/ckeditor5-typing" "45.0.0"
+    "@ckeditor/ckeditor5-ui" "45.0.0"
+    "@ckeditor/ckeditor5-undo" "45.0.0"
+    "@ckeditor/ckeditor5-upload" "45.0.0"
+    "@ckeditor/ckeditor5-utils" "45.0.0"
+    "@ckeditor/ckeditor5-watchdog" "45.0.0"
+    "@ckeditor/ckeditor5-widget" "45.0.0"
+    "@ckeditor/ckeditor5-word-count" "45.0.0"
+
 classnames@2.x, classnames@^2.2.1, classnames@^2.2.6, classnames@^2.3.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
@@ -4153,6 +5249,13 @@ collect-v8-coverage@^1.0.0:
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"
   integrity sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==
 
+color-convert@2.0.1, color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -4160,13 +5263,6 @@ color-convert@^1.9.0:
   dependencies:
     color-name "1.1.3"
 
-color-convert@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
-  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
-  dependencies:
-    color-name "~1.1.4"
-
 color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
@@ -4177,6 +5273,13 @@ color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-parse@1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/color-parse/-/color-parse-1.4.2.tgz#78651f5d34df1a57f997643d86f7f87268ad4eb5"
+  integrity sha512-RI7s49/8yqDj3fECFZjUI1Yi0z/Gq1py43oNJivAIIDSyJiOZLfYCRQEgn8HEVAj++PcRe8AnL2XF0fRJ3BTnA==
+  dependencies:
+    color-name "^1.0.0"
+
 color-string@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
@@ -4400,6 +5503,10 @@ cosmiconfig@^9.0.0:
     js-yaml "^4.1.0"
     parse-json "^5.2.0"
 
+"coursemology-ckeditor@github:Coursemology/CKEditor5-build-coursemology#v1.0.0":
+  version "1.0.0"
+  resolved "https://codeload.github.com/Coursemology/CKEditor5-build-coursemology/tar.gz/2122c0a53fa7e1fafd024c6bc6fda1585694e974"
+
 create-jest@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/create-jest/-/create-jest-29.7.0.tgz#a355c5b3cb1e1af02ba177fe7afd7feee49a5320"
@@ -4619,6 +5726,13 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+debug@~4.3.1, debug@~4.3.2:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52"
+  integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==
+  dependencies:
+    ms "^2.1.3"
+
 decache@^3.0.5:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/decache/-/decache-3.1.0.tgz#4f5036fbd6581fcc97237ac3954a244b9536c2da"
@@ -5037,6 +6151,22 @@ end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   dependencies:
     once "^1.4.0"
 
+engine.io-client@~6.5.0:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.5.4.tgz#b8bc71ed3f25d0d51d587729262486b4b33bd0d0"
+  integrity sha512-GeZeeRjpD2qf49cZQ0Wvh/8NJNfeXkXXcoGh+F77oEAgo9gUHwT1fCRxSNU+YEEaysOJTnsFHmM5oAcPy4ntvQ==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+    engine.io-parser "~5.2.1"
+    ws "~8.17.1"
+    xmlhttprequest-ssl "~2.0.0"
+
+engine.io-parser@~5.2.1:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.2.3.tgz#00dc5b97b1f233a23c9398d0209504cf5f94d92f"
+  integrity sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==
+
 enhanced-resolve@^0.9.1:
   version "0.9.1"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
@@ -5245,6 +6375,11 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+es-toolkit@1.32.0:
+  version "1.32.0"
+  resolved "https://registry.yarnpkg.com/es-toolkit/-/es-toolkit-1.32.0.tgz#a3254bffe31fcd52a0abb1b77074e5f0fa76b7fd"
+  integrity sha512-ZfSfHP1l6ubgW/B/FRtqb9bYdMvI6jizbOSfbwwJNcOQ1QE6TFsC3jpQkZ900uUPSR3t3SU5Ds7UWKnYz+uP8Q==
+
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -5995,6 +7130,11 @@ functions-have-names@^1.2.3:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
+fuzzysort@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/fuzzysort/-/fuzzysort-3.1.0.tgz#4d7832d8fa48ad381753eaa7a7aae9927bdc10a8"
+  integrity sha512-sR9BNCjBg6LNgwvxlBd0sBABvQitkLzoVY9MYYROQVX/FvfJ4Mai9LsGhDgd8qYdds0bY77VzYd5iuB+v5rwQQ==
+
 gauge@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-3.0.2.tgz#03bf4441c044383908bcfa0656ad91803259b395"
@@ -7734,6 +8874,11 @@ lodash@^4.0.1, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+long@^5.0.0:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/long/-/long-5.3.2.tgz#1d84463095999262d7d7b7f8bfd4a8cc55167f83"
+  integrity sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==
+
 loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -7772,6 +8917,11 @@ lru-cache@~2.2.1:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d"
   integrity sha512-Q5pAgXs+WEAfoEdw2qKQhNFFhMoFMTYqRVKKUMnzuiR7oKFHS7fWo848cPcTKw+4j/IdN17NyzdhVKgabFV0EA==
 
+luxon@3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.5.0.tgz#6b6f65c5cd1d61d1fd19dbf07ee87a50bf4b8e20"
+  integrity sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==
+
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
@@ -7804,6 +8954,11 @@ makeerror@1.0.12:
   dependencies:
     tmpl "1.0.5"
 
+marked@4.0.12:
+  version "4.0.12"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.12.tgz#2262a4e6fd1afd2f13557726238b69a48b982f7d"
+  integrity sha512-hgibXWrEDNBWgGiK18j/4lkS6ihTe9sxtV4Q1OQppb/0zzyPSzoFANBa5MfsG/zgsWklmNnhm0XACZOH/0HBiQ==
+
 material-colors@^1.2.1:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
@@ -8262,7 +9417,7 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@2.1.3, ms@^2.1.1:
+ms@2.1.3, ms@^2.1.1, ms@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
@@ -9247,6 +10402,24 @@ property-information@^6.0.0:
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.2.0.tgz#b74f522c31c097b5149e3c3cb8d7f3defd986a1d"
   integrity sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg==
 
+protobufjs@7.4.0:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.4.0.tgz#7efe324ce9b3b61c82aae5de810d287bc08a248a"
+  integrity sha512-mRUWCc3KUU4w1jU8sGxICXH/gNS94DvI1gxqDvBzhj1JpcsimQkYiOJfwsPUykUI5ZaspFbSgmBLER8IrQ3tqw==
+  dependencies:
+    "@protobufjs/aspromise" "^1.1.2"
+    "@protobufjs/base64" "^1.1.2"
+    "@protobufjs/codegen" "^2.0.4"
+    "@protobufjs/eventemitter" "^1.1.0"
+    "@protobufjs/fetch" "^1.1.0"
+    "@protobufjs/float" "^1.0.2"
+    "@protobufjs/inquire" "^1.1.0"
+    "@protobufjs/path" "^1.1.2"
+    "@protobufjs/pool" "^1.1.0"
+    "@protobufjs/utf8" "^1.1.0"
+    "@types/node" ">=13.7.0"
+    long "^5.0.0"
+
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -10515,6 +11688,24 @@ snake-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
+socket.io-client@4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.7.0.tgz#f869a41a2593bc36f058f3b46175024491d997b5"
+  integrity sha512-7Q8CeDrhuZzg4QLXl3tXlk5yb086oxYzehAVZRLiGCzCmtDneiHz1qHyyWcxhTgxXiokVpWQXoG/u60HoXSQew==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.2"
+    engine.io-client "~6.5.0"
+    socket.io-parser "~4.2.4"
+
+socket.io-parser@~4.2.3, socket.io-parser@~4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.4.tgz#c806966cf7270601e47469ddeec30fbdfda44c83"
+  integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+
 sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
@@ -11168,6 +12359,18 @@ tunnel-agent@^0.6.0:
   dependencies:
     safe-buffer "^5.0.1"
 
+turndown-plugin-gfm@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/turndown-plugin-gfm/-/turndown-plugin-gfm-1.0.2.tgz#6f8678a361f35220b2bdf5619e6049add75bf1c7"
+  integrity sha512-vwz9tfvF7XN/jE0dGoBei3FXWuvll78ohzCZQuOb+ZjWrs3a0XhQVomJEb2Qh4VHTPNRO4GPZh0V7VRbiWwkRg==
+
+turndown@7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/turndown/-/turndown-7.2.0.tgz#67d614fe8371fb511079a93345abfd156c0ffcf4"
+  integrity sha512-eCZGBN4nNNqM9Owkv9HAtWRYfLA4h909E/WGAWWBpmB275ehNhZyk87/Tpvjbp0jjNl9XwCsbe6bm6CqFsgD+A==
+  dependencies:
+    "@mixmark-io/domino" "^2.2.0"
+
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -11259,6 +12462,11 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
+undici-types@~6.21.0:
+  version "6.21.0"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.21.0.tgz#691d00af3909be93a7faa13be61b3a5b50ef12cb"
+  integrity sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==
+
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
@@ -11368,7 +12576,7 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-url-parse@^1.5.3:
+url-parse@1.5.10, url-parse@^1.5.3:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
   integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
@@ -11406,6 +12614,11 @@ uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 v8-to-istanbul@^9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.0.1.tgz#b6f994b0b5d4ef255e17a0d17dc444a9f5132fa4"
@@ -11422,6 +12635,11 @@ v8flags@^3.1.1:
   dependencies:
     homedir-polyfill "^1.0.1"
 
+vanilla-colorful@0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/vanilla-colorful/-/vanilla-colorful-0.7.2.tgz#3fb1f4b9f15b797e20fd1ce8e0364f33b073f4a2"
+  integrity sha512-z2YZusTFC6KnLERx1cgoIRX2CjPRP0W75N+3CC6gbvdX5Ch47rZkEMGO2Xnf+IEmi3RiFLxS18gayMA27iU7Kg==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -11764,7 +12982,7 @@ write-file-atomic@^4.0.2:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
-ws@^8.16.0, ws@^8.2.3, ws@^8.9.0:
+ws@^8.16.0, ws@^8.2.3, ws@^8.9.0, ws@~8.17.1:
   version "8.17.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
   integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==
@@ -11792,6 +13010,11 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xmlhttprequest-ssl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
+  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
+
 y18n@^5.0.5:
   version "5.0.8"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"

From da70363262a2f75eb86f84abd507ff5f4e504dcc Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 13:07:56 +0800
Subject: [PATCH 31/36] test(client): await lazy loaded pages

---
 .../AssessmentForm/__test__/index.test.tsx    | 246 ++++++++++--------
 .../FileManager/__test__/index.test.tsx       |   7 +-
 .../AssessmentEdit/__test__/index.test.tsx    |   2 +-
 .../AssessmentsIndex/__test__/index.test.jsx  |   2 +-
 .../__test__/ScribingToolbar.test.jsx         |   6 +-
 .../__test__/ProgrammingFile.test.tsx         |   4 +-
 .../TestCaseView/__test__/index.test.js       |  84 +++---
 .../__test__/submissionsTable.test.jsx        |   8 +-
 .../__test__/DuplicateButton.test.tsx         |   4 +-
 .../__test__/NewEventButton.test.jsx          |   2 +-
 .../__test__/NewMilestoneButton.test.jsx      |   9 +-
 .../LessonPlanEdit/__test__/ItemRow.test.jsx  |   6 +-
 .../__test__/MilestoneRow.test.jsx            |   2 +-
 .../__test__/AdminTools.test.jsx              |  15 +-
 .../__test__/LessonPlanShow.test.jsx          |  39 +--
 .../__test__/MilestoneAdminTools.test.jsx     |  20 +-
 .../RespondButton/__test__/index.test.jsx     |   2 +-
 .../SurveyLayout/__test__/AdminMenu.test.jsx  |  10 +-
 .../__test__/RemindButton.test.tsx            |   4 +-
 .../ResponseShow/__test__/index.test.jsx      |  10 +-
 .../__test__/NewSurveyButton.test.jsx         |   2 +-
 .../__test__/ResultsQuestion.test.tsx         |  16 +-
 .../__test__/DeleteSectionButton.test.tsx     |   4 +-
 .../__test__/EditSectionButton.test.jsx       |   2 +-
 .../Section/__test__/MoveDownButton.test.tsx  |   2 +-
 .../Section/__test__/MoveUpButton.test.jsx    |   2 +-
 .../__test__/NewQuestionButton.test.jsx       |   2 +-
 .../__test__/DownloadResponsesButton.test.tsx |   4 +-
 .../__test__/NewSectionButton.test.jsx        |   2 +-
 .../__test__/index.test.jsx                   |   2 +-
 .../__test__/LevelReachedPopup.test.tsx       |  18 +-
 .../core/__test__/ErrorText.test.tsx          |  16 +-
 .../core/__test__/LoadingIndicator.test.tsx   |  10 +-
 .../buttons/__test__/DeleteButton.test.tsx    |  46 ++--
 .../core/buttons/__test__/EditButton.test.tsx |  15 +-
 35 files changed, 369 insertions(+), 256 deletions(-)

diff --git a/client/app/bundles/course/assessment/components/AssessmentForm/__test__/index.test.tsx b/client/app/bundles/course/assessment/components/AssessmentForm/__test__/index.test.tsx
index ca8aaa08382..aa752c80139 100644
--- a/client/app/bundles/course/assessment/components/AssessmentForm/__test__/index.test.tsx
+++ b/client/app/bundles/course/assessment/components/AssessmentForm/__test__/index.test.tsx
@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-import { fireEvent, render, RenderResult } from 'test-utils';
+import { fireEvent, render, RenderResult, waitFor } from 'test-utils';
 
 import AssessmentForm from '..';
 
@@ -61,143 +61,173 @@ beforeEach(() => {
 });
 
 describe('<AssessmentForm />', () => {
-  it('renders assessment details sections options', () => {
+  it('renders assessment details sections options', async () => {
     renderForm();
 
-    expect(form.getByText('Assessment details')).toBeVisible();
-    expect(form.getByLabelText('Starts at *')).toBeVisible();
-    expect(form.getByLabelText('Ends at')).toBeVisible();
-    expect(form.getByLabelText('Title *')).toHaveValue(INITIAL_VALUES.title);
-    expect(form.getByText('Description')).toBeVisible();
-    expect(form.getByDisplayValue(INITIAL_VALUES.description)).toBeVisible();
+    await waitFor(() => {
+      expect(form.getByText('Assessment details')).toBeVisible();
+      expect(form.getByLabelText('Starts at *')).toBeVisible();
+      expect(form.getByLabelText('Ends at')).toBeVisible();
+      expect(form.getByLabelText('Title *')).toHaveValue(INITIAL_VALUES.title);
+      expect(form.getByText('Description')).toBeVisible();
+      expect(form.getByDisplayValue(INITIAL_VALUES.description)).toBeVisible();
+    });
   });
 
-  it('renders grading section options', () => {
+  it('renders grading section options', async () => {
     renderForm();
 
-    expect(form.getByText('Grading')).toBeVisible();
-    expect(form.getByText('Grading mode')).toBeVisible();
+    await waitFor(() => {
+      expect(form.getByText('Grading')).toBeVisible();
+      expect(form.getByText('Grading mode')).toBeVisible();
 
-    expect(form.getByText('Autograded')).toBeVisible();
-    expect(form.getByDisplayValue('autograded')).not.toBeChecked();
+      expect(form.getByText('Autograded')).toBeVisible();
+      expect(form.getByDisplayValue('autograded')).not.toBeChecked();
 
-    expect(form.getByText('Manual')).toBeVisible();
-    expect(form.getByDisplayValue('manual')).toBeChecked();
+      expect(form.getByText('Manual')).toBeVisible();
+      expect(form.getByDisplayValue('manual')).toBeChecked();
 
-    expect(form.getByLabelText('Public test cases')).toBeChecked();
-    expect(form.getByLabelText('Private test cases')).toBeChecked();
-    expect(form.getByLabelText('Evaluation test cases')).not.toBeChecked();
+      expect(form.getByLabelText('Public test cases')).toBeChecked();
+      expect(form.getByLabelText('Private test cases')).toBeChecked();
+      expect(form.getByLabelText('Evaluation test cases')).not.toBeChecked();
 
-    expect(
-      form.getByLabelText('Enable delayed grade publication'),
-    ).not.toBeChecked();
+      expect(
+        form.getByLabelText('Enable delayed grade publication'),
+      ).not.toBeChecked();
+    });
   });
 
-  it('renders answers and test cases section options', () => {
+  it('renders answers and test cases section options', async () => {
     renderForm();
 
-    expect(form.getByText('Answers and test cases')).toBeVisible();
-    expect(form.getByLabelText('Allow to skip steps')).not.toBeChecked();
-    expect(
-      form.getByLabelText('Allow submission with incorrect answers'),
-    ).not.toBeChecked();
-    expect(form.getByLabelText('Show private test cases')).not.toBeChecked();
-    expect(form.getByLabelText('Show evaluation test cases')).not.toBeChecked();
-    expect(form.getByLabelText('Show MCQ/MRQ solution(s)')).not.toBeChecked();
+    await waitFor(() => {
+      expect(form.getByText('Answers and test cases')).toBeVisible();
+      expect(form.getByLabelText('Allow to skip steps')).not.toBeChecked();
+      expect(
+        form.getByLabelText('Allow submission with incorrect answers'),
+      ).not.toBeChecked();
+      expect(form.getByLabelText('Show private test cases')).not.toBeChecked();
+      expect(
+        form.getByLabelText('Show evaluation test cases'),
+      ).not.toBeChecked();
+      expect(form.getByLabelText('Show MCQ/MRQ solution(s)')).not.toBeChecked();
+    });
   });
 
-  it('renders organization section options', () => {
+  it('renders organization section options', async () => {
     renderForm();
 
-    expect(form.getByText('Organization')).toBeVisible();
-    expect(form.getByText('Single Page')).toBeVisible();
+    await waitFor(() => {
+      expect(form.getByText('Organization')).toBeVisible();
+      expect(form.getByText('Single Page')).toBeVisible();
+    });
   });
 
-  it('renders exams and access control section options', () => {
+  it('renders exams and access control section options', async () => {
     renderForm();
 
-    expect(form.getByText('Exams and access control')).toBeVisible();
-    expect(
-      form.getByLabelText('Block students from viewing finalized submissions'),
-    ).not.toBeChecked();
-    expect(form.getByLabelText('Show MCQ submit result')).not.toBeChecked();
-    expect(form.getByLabelText('Enable password protection')).not.toBeChecked();
+    await waitFor(() => {
+      expect(form.getByText('Exams and access control')).toBeVisible();
+      expect(
+        form.getByLabelText(
+          'Block students from viewing finalized submissions',
+        ),
+      ).not.toBeChecked();
+      expect(form.getByLabelText('Show MCQ submit result')).not.toBeChecked();
+      expect(
+        form.getByLabelText('Enable password protection'),
+      ).not.toBeChecked();
+    });
   });
 
-  it('does not render gamified options when course is not gamified', () => {
+  it('does not render gamified options when course is not gamified', async () => {
     renderForm();
 
-    expect(form.queryByText('Gamification')).not.toBeInTheDocument();
-    expect(form.queryByLabelText('Bonus ends at')).not.toBeInTheDocument();
-    expect(form.queryByLabelText('Base EXP')).not.toBeInTheDocument();
-    expect(form.queryByLabelText('Time Bonus EXP')).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(form.queryByText('Gamification')).not.toBeInTheDocument();
+      expect(form.queryByLabelText('Bonus ends at')).not.toBeInTheDocument();
+      expect(form.queryByLabelText('Base EXP')).not.toBeInTheDocument();
+      expect(form.queryByLabelText('Time Bonus EXP')).not.toBeInTheDocument();
+    });
   });
 
-  it('renders gamified options when course is gamified', () => {
+  it('renders gamified options when course is gamified', async () => {
     props.gamified = true;
     renderForm();
 
-    expect(form.getByText('Gamification')).toBeVisible();
-    expect(form.getByLabelText('Bonus ends at')).toBeVisible();
-    expect(form.getByLabelText('Base EXP')).toHaveValue(
-      INITIAL_VALUES.base_exp.toString(),
-    );
-    expect(form.getByLabelText('Time Bonus EXP')).toHaveValue(
-      INITIAL_VALUES.time_bonus_exp.toString(),
-    );
+    await waitFor(() => {
+      expect(form.getByText('Gamification')).toBeVisible();
+      expect(form.getByLabelText('Bonus ends at')).toBeVisible();
+      expect(form.getByLabelText('Base EXP')).toHaveValue(
+        INITIAL_VALUES.base_exp.toString(),
+      );
+      expect(form.getByLabelText('Time Bonus EXP')).toHaveValue(
+        INITIAL_VALUES.time_bonus_exp.toString(),
+      );
+    });
   });
 
-  it('does not render editing options when rendered in new assessment page', () => {
-    expect(form.queryByText('Visibility')).not.toBeInTheDocument();
-    expect(form.queryByText('Published')).not.toBeInTheDocument();
-    expect(form.queryByText('Draft')).not.toBeInTheDocument();
-    expect(form.queryByText('Files')).not.toBeInTheDocument();
-    expect(form.queryByText('Add Files')).not.toBeInTheDocument();
-    expect(form.queryByText('Unlock conditions')).not.toBeInTheDocument();
-    expect(form.queryByText('Add a condition')).not.toBeInTheDocument();
+  it('does not render editing options when rendered in new assessment page', async () => {
+    await waitFor(() => {
+      expect(form.queryByText('Visibility')).not.toBeInTheDocument();
+      expect(form.queryByText('Published')).not.toBeInTheDocument();
+      expect(form.queryByText('Draft')).not.toBeInTheDocument();
+      expect(form.queryByText('Files')).not.toBeInTheDocument();
+      expect(form.queryByText('Add Files')).not.toBeInTheDocument();
+      expect(form.queryByText('Unlock conditions')).not.toBeInTheDocument();
+      expect(form.queryByText('Add a condition')).not.toBeInTheDocument();
+    });
   });
 
-  it('renders editing options when rendered in edit assessment page', () => {
+  it('renders editing options when rendered in edit assessment page', async () => {
     props.editing = true;
     renderForm();
 
-    expect(form.getByText('Visibility')).toBeVisible();
-    expect(form.getByText('Published')).toBeVisible();
-    expect(form.getByDisplayValue('published')).not.toBeChecked();
-    expect(form.getByText('Draft')).toBeVisible();
-    expect(form.getByDisplayValue('draft')).toBeChecked();
-    expect(form.getByText('Files')).toBeVisible();
-    expect(form.getByText('Add Files')).toBeVisible();
-    expect(form.queryByText('Unlock conditions')).not.toBeInTheDocument();
-    expect(form.queryByText('Add a condition')).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(form.getByText('Visibility')).toBeVisible();
+      expect(form.getByText('Published')).toBeVisible();
+      expect(form.getByDisplayValue('published')).not.toBeChecked();
+      expect(form.getByText('Draft')).toBeVisible();
+      expect(form.getByDisplayValue('draft')).toBeChecked();
+      expect(form.getByText('Files')).toBeVisible();
+      expect(form.getByText('Add Files')).toBeVisible();
+      expect(form.queryByText('Unlock conditions')).not.toBeInTheDocument();
+      expect(form.queryByText('Add a condition')).not.toBeInTheDocument();
+    });
 
     props.gamified = true;
     renderForm();
 
-    expect(form.getByText('Unlock conditions')).toBeVisible();
-    expect(form.getByText('Add a condition')).toBeVisible();
+    await waitFor(() => {
+      expect(form.getByText('Unlock conditions')).toBeVisible();
+      expect(form.getByText('Add a condition')).toBeVisible();
+    });
   });
 
-  it('prevents grading mode switching when there are submissions', () => {
+  it('prevents grading mode switching when there are submissions', async () => {
     props.modeSwitching = false;
     renderForm();
 
-    expect(form.getByDisplayValue('autograded')).toBeDisabled();
-    expect(form.getByDisplayValue('manual')).toBeDisabled();
+    await waitFor(() => {
+      expect(form.getByDisplayValue('autograded')).toBeDisabled();
+      expect(form.getByDisplayValue('manual')).toBeDisabled();
+    });
   });
 
-  it('disables unavailable options in autograded mode', () => {
+  it('disables unavailable options in autograded mode', async () => {
     renderForm();
 
-    expect(form.getByLabelText('Allow to skip steps')).toBeDisabled();
-    expect(
-      form.getByLabelText('Allow submission with incorrect answers'),
-    ).toBeDisabled();
-    expect(
-      form.getByLabelText('Enable delayed grade publication'),
-    ).toBeEnabled();
-    expect(form.getByLabelText('Show MCQ submit result')).toBeDisabled();
-    expect(form.getByLabelText('Enable password protection')).toBeEnabled();
+    await waitFor(() => {
+      expect(form.getByLabelText('Allow to skip steps')).toBeDisabled();
+      expect(
+        form.getByLabelText('Allow submission with incorrect answers'),
+      ).toBeDisabled();
+      expect(
+        form.getByLabelText('Enable delayed grade publication'),
+      ).toBeEnabled();
+      expect(form.getByLabelText('Show MCQ submit result')).toBeDisabled();
+      expect(form.getByLabelText('Enable password protection')).toBeEnabled();
+    });
 
     const autogradedRadio = form.getByDisplayValue('autograded');
     fireEvent.click(autogradedRadio);
@@ -213,18 +243,20 @@ describe('<AssessmentForm />', () => {
     expect(form.getByLabelText('Enable password protection')).toBeDisabled();
   });
 
-  it('handles password protection options', () => {
+  it('handles password protection options', async () => {
     renderForm();
 
-    expect(
-      form.queryByLabelText('Assessment password *'),
-    ).not.toBeInTheDocument();
-    expect(
-      form.queryByLabelText('Enable session protection'),
-    ).not.toBeInTheDocument();
-    expect(
-      form.queryByLabelText('Session unlock password *'),
-    ).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        form.queryByLabelText('Assessment password *'),
+      ).not.toBeInTheDocument();
+      expect(
+        form.queryByLabelText('Enable session protection'),
+      ).not.toBeInTheDocument();
+      expect(
+        form.queryByLabelText('Session unlock password *'),
+      ).not.toBeInTheDocument();
+    });
 
     const passwordCheckbox = form.getByLabelText('Enable password protection');
     expect(passwordCheckbox).toBeEnabled();
@@ -260,19 +292,25 @@ describe('<AssessmentForm />', () => {
     expect(browserAuthorizationCheckbox).toBeChecked();
   });
 
-  it('renders personalised timelines options when enabled', () => {
+  it('renders personalised timelines options when enabled', async () => {
     renderForm();
 
-    expect(form.queryByLabelText('Has personal times')).not.toBeInTheDocument();
-    expect(
-      form.queryByLabelText('Affects personal times'),
-    ).not.toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        form.queryByLabelText('Has personal times'),
+      ).not.toBeInTheDocument();
+      expect(
+        form.queryByLabelText('Affects personal times'),
+      ).not.toBeInTheDocument();
+    });
 
     props.showPersonalizedTimelineFeatures = true;
     renderForm();
 
-    expect(form.getByLabelText('Has personal times')).toBeEnabled();
-    expect(form.getByLabelText('Affects personal times')).toBeEnabled();
+    await waitFor(() => {
+      expect(form.getByLabelText('Has personal times')).toBeEnabled();
+      expect(form.getByLabelText('Affects personal times')).toBeEnabled();
+    });
   });
 
   // Randomized Assessment is temporarily hidden (PR#5406)
diff --git a/client/app/bundles/course/assessment/components/FileManager/__test__/index.test.tsx b/client/app/bundles/course/assessment/components/FileManager/__test__/index.test.tsx
index 813ee464d05..e1c813724ed 100644
--- a/client/app/bundles/course/assessment/components/FileManager/__test__/index.test.tsx
+++ b/client/app/bundles/course/assessment/components/FileManager/__test__/index.test.tsx
@@ -41,8 +41,8 @@ beforeEach(() => {
 beforeEach(mock.reset);
 
 describe('<FileManager />', () => {
-  it('shows existing files', () => {
-    expect(fileManager.getByText('Material 1')).toBeVisible();
+  it('shows existing files', async () => {
+    expect(await fileManager.findByText('Material 1')).toBeVisible();
     expect(fileManager.getByText('Material 2')).toBeVisible();
   });
 
@@ -56,8 +56,7 @@ describe('<FileManager />', () => {
       });
 
     const uploadApi = jest.spyOn(CourseAPI.materialFolders, 'upload');
-    const addFilesButton = fileManager.getByText('Add Files');
-    expect(addFilesButton).toBeVisible();
+    expect(await fileManager.findByText('Add Files')).toBeVisible();
 
     const fileInput = fileManager.getByTestId('FileInput');
 
diff --git a/client/app/bundles/course/assessment/pages/AssessmentEdit/__test__/index.test.tsx b/client/app/bundles/course/assessment/pages/AssessmentEdit/__test__/index.test.tsx
index dfe6b9f9bf1..f0d4ad09a8c 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentEdit/__test__/index.test.tsx
+++ b/client/app/bundles/course/assessment/pages/AssessmentEdit/__test__/index.test.tsx
@@ -64,7 +64,7 @@ describe('<AssessmentEdit />', () => {
   it('submits correct form data', async () => {
     const user = userEvent.setup();
 
-    const title = form.getByLabelText('Title *');
+    const title = await form.findByLabelText('Title *');
     await user.type(title, '{Control>}a{/Control}{Delete}');
     await user.type(title, NEW_VALUES.title);
     expect(title).toHaveValue(NEW_VALUES.title);
diff --git a/client/app/bundles/course/assessment/pages/AssessmentsIndex/__test__/index.test.jsx b/client/app/bundles/course/assessment/pages/AssessmentsIndex/__test__/index.test.jsx
index ba7ad0ac5a0..58c55b6f988 100644
--- a/client/app/bundles/course/assessment/pages/AssessmentsIndex/__test__/index.test.jsx
+++ b/client/app/bundles/course/assessment/pages/AssessmentsIndex/__test__/index.test.jsx
@@ -6,7 +6,7 @@ describe('<AssessmentIndex />', () => {
   it('renders the index page', async () => {
     const page = render(<AssessmentIndex categoryId={1} tabId={1} />);
 
-    const newButton = page.getByRole('button');
+    const newButton = await page.findByRole('button');
     fireEvent.click(newButton);
 
     expect(page.getByRole('heading', { name: 'New Assessment' })).toBeVisible();
diff --git a/client/app/bundles/course/assessment/submission/components/ScribingView/__test__/ScribingToolbar.test.jsx b/client/app/bundles/course/assessment/submission/components/ScribingView/__test__/ScribingToolbar.test.jsx
index 6da2252b19b..e882c00fce9 100644
--- a/client/app/bundles/course/assessment/submission/components/ScribingView/__test__/ScribingToolbar.test.jsx
+++ b/client/app/bundles/course/assessment/submission/components/ScribingView/__test__/ScribingToolbar.test.jsx
@@ -151,13 +151,13 @@ beforeEach(() => {
 describe('ScribingToolbar', () => {
   it('renders tool popovers', async () => {
     const page = render(<ScribingToolbar {...props} />);
-    expect(page.getAllByRole('button')).toHaveLength(20);
+    expect(await page.findAllByRole('button')).toHaveLength(20);
   });
 
   it('renders color pickers', async () => {
     const page = render(<ScribingToolbar {...props} />);
 
-    const buttons = page.getAllByRole('button');
+    const buttons = await page.findAllByRole('button');
     fireEvent.click(buttons[2]);
     expect(page.getByText('Text')).toBeVisible();
 
@@ -183,7 +183,7 @@ describe('ScribingToolbar', () => {
       dispatch(setColoringToolColor(answerId, coloringTool, color)),
     );
 
-    const buttons = page.getAllByRole('button');
+    const buttons = await page.findAllByRole('button');
     fireEvent.click(buttons[2]);
 
     const colorPicker = page.getByLabelText('Color Picker');
diff --git a/client/app/bundles/course/assessment/submission/components/answers/Programming/__test__/ProgrammingFile.test.tsx b/client/app/bundles/course/assessment/submission/components/answers/Programming/__test__/ProgrammingFile.test.tsx
index 7a5e3c95603..c4fd5c6dd40 100644
--- a/client/app/bundles/course/assessment/submission/components/answers/Programming/__test__/ProgrammingFile.test.tsx
+++ b/client/app/bundles/course/assessment/submission/components/answers/Programming/__test__/ProgrammingFile.test.tsx
@@ -59,6 +59,8 @@ describe('<ProgrammingFile />', () => {
       at: [url],
     });
 
-    expect(page.getByText('file is too big', { exact: false })).toBeVisible();
+    expect(
+      await page.findByText('file is too big', { exact: false }),
+    ).toBeVisible();
   });
 });
diff --git a/client/app/bundles/course/assessment/submission/containers/TestCaseView/__test__/index.test.js b/client/app/bundles/course/assessment/submission/containers/TestCaseView/__test__/index.test.js
index a60d3cad126..8a70c76bcc0 100644
--- a/client/app/bundles/course/assessment/submission/containers/TestCaseView/__test__/index.test.js
+++ b/client/app/bundles/course/assessment/submission/containers/TestCaseView/__test__/index.test.js
@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/no-duplicate-string */
-import { render, within } from 'test-utils';
+import { render, waitFor, within } from 'test-utils';
 
 import { VisibleTestCaseView } from 'course/assessment/submission/containers/TestCaseView';
 
@@ -59,27 +59,29 @@ const getWarning = (page, text) =>
 
 describe('TestCaseView', () => {
   describe('when viewing as staff', () => {
-    it('renders all test cases and standard streams', () => {
+    it('renders all test cases and standard streams', async () => {
       const page = render(<VisibleTestCaseView {...defaultStaffViewProps} />);
 
-      expect(page.getByText('Public Test Cases')).toBeVisible();
+      expect(await page.findByText('Public Test Cases')).toBeVisible();
       expect(page.getByText('Private Test Cases')).toBeVisible();
       expect(page.getByText('Evaluation Test Cases')).toBeVisible();
       expect(page.getByText('Standard Output')).toBeVisible();
       expect(page.getByText('Standard Error')).toBeVisible();
     });
 
-    it('renders staff-only warnings', () => {
+    it('renders staff-only warnings', async () => {
       const page = render(<VisibleTestCaseView {...defaultStaffViewProps} />);
 
-      expect(getWarning(page, 'Private Test Cases')).toBeVisible();
-      expect(getWarning(page, 'Evaluation Test Cases')).toBeVisible();
-      expect(getWarning(page, 'Standard Output')).toBeVisible();
-      expect(getWarning(page, 'Standard Error')).toBeVisible();
+      await waitFor(() => {
+        expect(getWarning(page, 'Private Test Cases')).toBeVisible();
+        expect(getWarning(page, 'Evaluation Test Cases')).toBeVisible();
+        expect(getWarning(page, 'Standard Output')).toBeVisible();
+        expect(getWarning(page, 'Standard Error')).toBeVisible();
+      });
     });
 
     describe('when showEvaluation & showPrivate are true', () => {
-      it('renders staff-only warnings when assessment is not yet published', () => {
+      it('renders staff-only warnings when assessment is not yet published', async () => {
         const page = render(
           <VisibleTestCaseView
             {...defaultStaffViewProps}
@@ -89,11 +91,13 @@ describe('TestCaseView', () => {
           />,
         );
 
-        expect(getWarning(page, 'Private Test Cases')).toBeVisible();
-        expect(getWarning(page, 'Evaluation Test Cases')).toBeVisible();
+        await waitFor(() => {
+          expect(getWarning(page, 'Private Test Cases')).toBeVisible();
+          expect(getWarning(page, 'Evaluation Test Cases')).toBeVisible();
+        });
       });
 
-      it('does not render staff-only warnings when assessment is published', () => {
+      it('does not render staff-only warnings when assessment is published', async () => {
         const page = render(
           <VisibleTestCaseView
             {...defaultStaffViewProps}
@@ -102,15 +106,19 @@ describe('TestCaseView', () => {
           />,
         );
 
-        expect(getWarning(page, 'Private Test Cases')).not.toBeInTheDocument();
-        expect(
-          getWarning(page, 'Evaluation Test Cases'),
-        ).not.toBeInTheDocument();
+        await waitFor(() => {
+          expect(
+            getWarning(page, 'Private Test Cases'),
+          ).not.toBeInTheDocument();
+          expect(
+            getWarning(page, 'Evaluation Test Cases'),
+          ).not.toBeInTheDocument();
+        });
       });
     });
 
     describe('when students can see standard streams', () => {
-      it('does not render staff-only warnings', () => {
+      it('does not render staff-only warnings', async () => {
         const page = render(
           <VisibleTestCaseView
             {...defaultStaffViewProps}
@@ -118,14 +126,16 @@ describe('TestCaseView', () => {
           />,
         );
 
-        expect(getWarning(page, 'Standard Output')).not.toBeInTheDocument();
-        expect(getWarning(page, 'Standard Error')).not.toBeInTheDocument();
+        await waitFor(() => {
+          expect(getWarning(page, 'Standard Output')).not.toBeInTheDocument();
+          expect(getWarning(page, 'Standard Error')).not.toBeInTheDocument();
+        });
       });
     });
   });
 
   describe('when viewing as student', () => {
-    it('does not show any staff-only warnings', () => {
+    it('does not show any staff-only warnings', async () => {
       const page = render(
         <VisibleTestCaseView
           {...defaultTestCaseViewProps}
@@ -135,13 +145,17 @@ describe('TestCaseView', () => {
         />,
       );
 
-      expect(getWarning(page, 'Private Test Cases')).not.toBeInTheDocument();
-      expect(getWarning(page, 'Evaluation Test Cases')).not.toBeInTheDocument();
-      expect(getWarning(page, 'Standard Output')).not.toBeInTheDocument();
-      expect(getWarning(page, 'Standard Error')).not.toBeInTheDocument();
+      await waitFor(() => {
+        expect(getWarning(page, 'Private Test Cases')).not.toBeInTheDocument();
+        expect(
+          getWarning(page, 'Evaluation Test Cases'),
+        ).not.toBeInTheDocument();
+        expect(getWarning(page, 'Standard Output')).not.toBeInTheDocument();
+        expect(getWarning(page, 'Standard Error')).not.toBeInTheDocument();
+      });
     });
 
-    it('shows standard streams when the flag is enabled', () => {
+    it('shows standard streams when the flag is enabled', async () => {
       const page = render(
         <VisibleTestCaseView
           {...defaultTestCaseViewProps}
@@ -149,12 +163,12 @@ describe('TestCaseView', () => {
         />,
       );
 
-      expect(page.getByText('Standard Output')).toBeVisible();
+      expect(await page.findByText('Standard Output')).toBeVisible();
       expect(page.getByText('Standard Error')).toBeVisible();
     });
 
     describe('when showEvaluation & showPrivate flags are enabled', () => {
-      it('shows private and evaluation tests after assessment is published', () => {
+      it('shows private and evaluation tests after assessment is published', async () => {
         const page = render(
           <VisibleTestCaseView
             {...defaultTestCaseViewProps}
@@ -163,11 +177,11 @@ describe('TestCaseView', () => {
           />,
         );
 
-        expect(page.getByText('Private Test Cases')).toBeVisible();
+        expect(await page.findByText('Private Test Cases')).toBeVisible();
         expect(page.getByText('Evaluation Test Cases')).toBeVisible();
       });
 
-      it('does not show private and evaluation tests before assessment is published', () => {
+      it('does not show private and evaluation tests before assessment is published', async () => {
         const page = render(
           <VisibleTestCaseView
             {...defaultTestCaseViewProps}
@@ -177,10 +191,14 @@ describe('TestCaseView', () => {
           />,
         );
 
-        expect(page.queryByText('Private Test Cases')).not.toBeInTheDocument();
-        expect(
-          page.queryByText('Evaluation Test Cases'),
-        ).not.toBeInTheDocument();
+        await waitFor(() => {
+          expect(
+            page.queryByText('Private Test Cases'),
+          ).not.toBeInTheDocument();
+          expect(
+            page.queryByText('Evaluation Test Cases'),
+          ).not.toBeInTheDocument();
+        });
       });
     });
   });
diff --git a/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/__test__/submissionsTable.test.jsx b/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/__test__/submissionsTable.test.jsx
index 32392aa6b7f..7cd1b323d9b 100644
--- a/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/__test__/submissionsTable.test.jsx
+++ b/client/app/bundles/course/assessment/submission/pages/SubmissionsIndex/__test__/submissionsTable.test.jsx
@@ -47,7 +47,7 @@ const defaultProps = {
 
 describe('<SubmissionsTable />', () => {
   describe('when canViewLogs, canUnsubmitSubmission and canDeleteAllSubmissions are set to true ', () => {
-    it('renders the submissions table with access log links', () => {
+    it('renders the submissions table with access log links', async () => {
       const page = render(
         <SubmissionsTable
           {...defaultProps}
@@ -60,7 +60,7 @@ describe('<SubmissionsTable />', () => {
         />,
       );
 
-      expect(page.getByText('John').closest('tr')).toBeVisible();
+      expect((await page.findByText('John')).closest('tr')).toBeVisible();
       expect(page.getByTestId('HistoryIcon').closest('button')).toBeVisible();
       expect(page.getByTestId('DeleteIcon').closest('button')).toBeVisible();
       expect(
@@ -70,7 +70,7 @@ describe('<SubmissionsTable />', () => {
   });
 
   describe('when canViewLogs, canUnsubmitSubmission and canDeleteAllSubmissions are set to false', () => {
-    it('renders the submissions table without access log links', () => {
+    it('renders the submissions table without access log links', async () => {
       const page = render(
         <SubmissionsTable
           {...defaultProps}
@@ -83,7 +83,7 @@ describe('<SubmissionsTable />', () => {
         />,
       );
 
-      expect(page.getByText('John').closest('tr')).toBeVisible();
+      expect((await page.findByText('John')).closest('tr')).toBeVisible();
       expect(page.queryByTestId('HistoryIcon')).not.toBeInTheDocument();
       expect(page.queryByTestId('DeleteIcon')).not.toBeInTheDocument();
       expect(page.queryByTestId('RemoveCircleIcon')).not.toBeInTheDocument();
diff --git a/client/app/bundles/course/duplication/pages/Duplication/__test__/DuplicateButton.test.tsx b/client/app/bundles/course/duplication/pages/Duplication/__test__/DuplicateButton.test.tsx
index 72537eb0921..7c49e3a4e81 100644
--- a/client/app/bundles/course/duplication/pages/Duplication/__test__/DuplicateButton.test.tsx
+++ b/client/app/bundles/course/duplication/pages/Duplication/__test__/DuplicateButton.test.tsx
@@ -68,13 +68,13 @@ const expectedPayload = {
 };
 
 describe('<DuplicateButton />', () => {
-  it('allows duplication to be triggered with the correct parameters', () => {
+  it('allows duplication to be triggered with the correct parameters', async () => {
     const spy = jest.spyOn(CourseAPI.duplication, 'duplicateItems');
 
     store.dispatch(loadObjectsList(data));
     const page = render(<DuplicateButton />);
 
-    fireEvent.click(page.getByRole('button'));
+    fireEvent.click(await page.findByRole('button'));
     fireEvent.click(page.getByRole('button', { name: 'Duplicate' }));
 
     expect(spy).toHaveBeenCalledWith(data.sourceCourse.id, expectedPayload);
diff --git a/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewEventButton.test.jsx b/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewEventButton.test.jsx
index 22c0df52d35..861387c7ffc 100644
--- a/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewEventButton.test.jsx
+++ b/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewEventButton.test.jsx
@@ -33,7 +33,7 @@ describe('<NewEventButton />', () => {
       { state },
     );
 
-    fireEvent.click(page.getByRole('button', { name: 'New Event' }));
+    fireEvent.click(await page.findByRole('button', { name: 'New Event' }));
 
     fireEvent.change(page.getByLabelText('Title', { exact: false }), {
       target: { value: eventData.title },
diff --git a/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewMilestoneButton.test.jsx b/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewMilestoneButton.test.jsx
index 9e1bb2697e4..44cb7217f35 100644
--- a/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewMilestoneButton.test.jsx
+++ b/client/app/bundles/course/lesson-plan/containers/LessonPlanLayout/__test__/NewMilestoneButton.test.jsx
@@ -29,7 +29,7 @@ describe('<NewMilestoneButton />', () => {
       { state },
     );
 
-    fireEvent.click(page.getByRole('button', { name: 'New Milestone' }));
+    fireEvent.click(await page.findByRole('button', { name: 'New Milestone' }));
 
     fireEvent.change(page.getByLabelText('Title', { exact: false }), {
       target: { value: milestoneData.title },
@@ -48,8 +48,11 @@ describe('<NewMilestoneButton />', () => {
     });
   });
 
-  it('is hidden when canManageLessonPlan is false', () => {
+  it('is hidden when canManageLessonPlan is false', async () => {
     const page = render(<NewMilestoneButton />);
-    expect(page.queryByRole('button')).not.toBeInTheDocument();
+
+    await waitFor(() =>
+      expect(page.queryByRole('button')).not.toBeInTheDocument(),
+    );
   });
 });
diff --git a/client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/__test__/ItemRow.test.jsx b/client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/__test__/ItemRow.test.jsx
index a8cc1ddd790..c111410256f 100644
--- a/client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/__test__/ItemRow.test.jsx
+++ b/client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/__test__/ItemRow.test.jsx
@@ -51,7 +51,7 @@ describe('<ItemRow />', () => {
       { state },
     );
 
-    const input = page.getByDisplayValue(startAt);
+    const input = await page.findByDisplayValue(startAt);
 
     fireEvent.change(input, { target: { value: newStartAt } });
     fireEvent.blur(input);
@@ -67,7 +67,7 @@ describe('<ItemRow />', () => {
     );
   });
 
-  it('clears end date', () => {
+  it('clears end date', async () => {
     const spy = jest.spyOn(CourseAPI.lessonPlan, 'updateItem');
 
     const page = render(
@@ -83,7 +83,7 @@ describe('<ItemRow />', () => {
       { state },
     );
 
-    const input = page.getByDisplayValue(endAt);
+    const input = await page.findByDisplayValue(endAt);
 
     fireEvent.change(input, { target: { value: '' } });
     fireEvent.blur(input);
diff --git a/client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/__test__/MilestoneRow.test.jsx b/client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/__test__/MilestoneRow.test.jsx
index 6e0aee4ee9f..70c386317cf 100644
--- a/client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/__test__/MilestoneRow.test.jsx
+++ b/client/app/bundles/course/lesson-plan/pages/LessonPlanEdit/__test__/MilestoneRow.test.jsx
@@ -37,7 +37,7 @@ describe('<MilestoneRow />', () => {
       { state: { lessonPlan: { milestones: [milestoneData] } } },
     );
 
-    const input = page.getByDisplayValue(startAt);
+    const input = await page.findByDisplayValue(startAt);
 
     fireEvent.change(input, { target: { value: newStartAt } });
     fireEvent.blur(input);
diff --git a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/__test__/AdminTools.test.jsx b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/__test__/AdminTools.test.jsx
index b9846af2590..97ac7d9cfe9 100644
--- a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/__test__/AdminTools.test.jsx
+++ b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/LessonPlanItem/__test__/AdminTools.test.jsx
@@ -13,14 +13,17 @@ const state = {
 const renderElement = (item) => render(<AdminTools item={item} />, { state });
 
 describe('<AdminTools />', () => {
-  it('does not show admin menu for lesson plan events', () => {
+  it('does not show admin menu for lesson plan events', async () => {
     const page = renderElement({ title: 'Event', eventId: 7 });
-    expect(page.getAllByRole('button')).toHaveLength(2);
+    expect(await page.findAllByRole('button')).toHaveLength(2);
   });
 
-  it('does not show admin menu for non-event lesson plan items', () => {
+  it('does not show admin menu for non-event lesson plan items', async () => {
     const wrapper = renderElement({ title: 'eventId absent' });
-    expect(wrapper.queryAllByRole('button')).toHaveLength(0);
+
+    await waitFor(() =>
+      expect(wrapper.queryAllByRole('button')).toHaveLength(0),
+    );
   });
 
   it('allows event to be deleted', async () => {
@@ -35,7 +38,7 @@ describe('<AdminTools />', () => {
       { state },
     );
 
-    fireEvent.click(page.getAllByRole('button')[1]);
+    fireEvent.click((await page.findAllByRole('button'))[1]);
     fireEvent.click(page.getByRole('button', { name: 'Delete' }));
 
     await waitFor(() => expect(spy).toHaveBeenCalledWith(eventId));
@@ -71,7 +74,7 @@ describe('<AdminTools />', () => {
       { state },
     );
 
-    fireEvent.click(page.getAllByRole('button')[0]);
+    fireEvent.click((await page.findAllByRole('button'))[0]);
 
     const description = 'Add nice description';
     fireEvent.change(page.getByLabelText('Description'), {
diff --git a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/__test__/LessonPlanShow.test.jsx b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/__test__/LessonPlanShow.test.jsx
index 01783d3729f..2a6dc7decee 100644
--- a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/__test__/LessonPlanShow.test.jsx
+++ b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/__test__/LessonPlanShow.test.jsx
@@ -1,4 +1,4 @@
-import { render } from 'test-utils';
+import { render, waitFor } from 'test-utils';
 
 import { LessonPlanShow } from '../index';
 
@@ -39,7 +39,7 @@ const data = {
 
 describe('<LessonPlanShow />', () => {
   describe('when all milestones are expanded by default', () => {
-    it('shows all visible items', () => {
+    it('shows all visible items', async () => {
       const page = render(
         <LessonPlanShow
           canManageLessonPlan
@@ -48,16 +48,18 @@ describe('<LessonPlanShow />', () => {
         />,
       );
 
-      data.groups.forEach((group) =>
-        group.items.forEach((item) =>
-          expect(page.getByText(item.title)).toBeVisible(),
-        ),
-      );
+      await waitFor(() => {
+        data.groups.forEach((group) =>
+          group.items.forEach((item) =>
+            expect(page.getByText(item.title)).toBeVisible(),
+          ),
+        );
+      });
     });
   });
 
   describe('when none of the milestones are expanded by default', () => {
-    it('shows no items', () => {
+    it('shows no items', async () => {
       const page = render(
         <LessonPlanShow
           canManageLessonPlan
@@ -65,17 +67,18 @@ describe('<LessonPlanShow />', () => {
           {...data}
         />,
       );
-
-      data.groups.forEach((group) =>
-        group.items.forEach((item) =>
-          expect(page.queryByText(item.title)).not.toBeInTheDocument(),
-        ),
-      );
+      await waitFor(() => {
+        data.groups.forEach((group) =>
+          group.items.forEach((item) =>
+            expect(page.queryByText(item.title)).not.toBeInTheDocument(),
+          ),
+        );
+      });
     });
   });
 
   describe('when only one of the current milestone is expanded by default', () => {
-    it('shows items for current group', () => {
+    it('shows items for current group', async () => {
       const page = render(
         <LessonPlanShow
           canManageLessonPlan
@@ -87,8 +90,10 @@ describe('<LessonPlanShow />', () => {
       const hiddenItem = data.groups[0].items[0].title;
       const shownItem = data.groups[1].items[0].title;
 
-      expect(page.queryByText(hiddenItem)).not.toBeInTheDocument();
-      expect(page.getByText(shownItem)).toBeVisible();
+      await waitFor(() => {
+        expect(page.queryByText(hiddenItem)).not.toBeInTheDocument();
+        expect(page.getByText(shownItem)).toBeVisible();
+      });
     });
   });
 });
diff --git a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/__test__/MilestoneAdminTools.test.jsx b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/__test__/MilestoneAdminTools.test.jsx
index 6ec7ffd0cde..3a070983da1 100644
--- a/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/__test__/MilestoneAdminTools.test.jsx
+++ b/client/app/bundles/course/lesson-plan/pages/LessonPlanShow/__test__/MilestoneAdminTools.test.jsx
@@ -12,31 +12,35 @@ const renderElement = (canManageLessonPlan, milestone) => {
 };
 
 describe('<MilestoneAdminTools />', () => {
-  it('hides admin tools for dummy milestone', () => {
+  it('hides admin tools for dummy milestone', async () => {
     const page = renderElement(true, {
       id: undefined,
       title: 'Ungrouped Items',
     });
 
-    expect(page.queryByRole('button')).not.toBeInTheDocument();
+    await waitFor(() =>
+      expect(page.queryByRole('button')).not.toBeInTheDocument(),
+    );
   });
 
-  it('hides admin tools when user does not have permissions', () => {
+  it('hides admin tools when user does not have permissions', async () => {
     const page = renderElement(false, {
       id: 4,
       title: 'User-defined Milestone',
     });
 
-    expect(page.queryByRole('button')).not.toBeInTheDocument();
+    await waitFor(() =>
+      expect(page.queryByRole('button')).not.toBeInTheDocument(),
+    );
   });
 
-  it('shows admin tools when user has permissions', () => {
+  it('shows admin tools when user has permissions', async () => {
     const page = renderElement(true, {
       id: 4,
       title: 'User-defined Milestone',
     });
 
-    expect(page.getAllByRole('button')).toHaveLength(2);
+    expect(await page.findAllByRole('button')).toHaveLength(2);
   });
 
   it('allows milestone to be deleted', async () => {
@@ -58,7 +62,7 @@ describe('<MilestoneAdminTools />', () => {
       { state: { lessonPlan: { flags: { canManageLessonPlan: true } } } },
     );
 
-    fireEvent.click(page.getAllByRole('button')[1]);
+    fireEvent.click((await page.findAllByRole('button'))[1]);
     fireEvent.click(page.getByRole('button', { name: 'Delete' }));
 
     await waitFor(() => expect(spy).toHaveBeenCalledWith(milestoneId));
@@ -93,7 +97,7 @@ describe('<MilestoneAdminTools />', () => {
       { state: { lessonPlan: { flags: { canManageLessonPlan: true } } } },
     );
 
-    fireEvent.click(page.getAllByRole('button')[0]);
+    fireEvent.click((await page.findAllByRole('button'))[0]);
 
     fireEvent.change(page.getByLabelText('Description'), {
       target: { value: description },
diff --git a/client/app/bundles/course/survey/containers/RespondButton/__test__/index.test.jsx b/client/app/bundles/course/survey/containers/RespondButton/__test__/index.test.jsx
index 3ea1c1d1eb1..12d9d2c5be9 100644
--- a/client/app/bundles/course/survey/containers/RespondButton/__test__/index.test.jsx
+++ b/client/app/bundles/course/survey/containers/RespondButton/__test__/index.test.jsx
@@ -28,7 +28,7 @@ describe('<RespondButton />', () => {
       />,
     );
 
-    fireEvent.click(page.getByRole('button'));
+    fireEvent.click(await page.findByRole('button'));
 
     await waitFor(() => {
       expect(spyCreate).toHaveBeenCalledWith(surveyId);
diff --git a/client/app/bundles/course/survey/containers/SurveyLayout/__test__/AdminMenu.test.jsx b/client/app/bundles/course/survey/containers/SurveyLayout/__test__/AdminMenu.test.jsx
index 620ec5559b2..a154565bc75 100644
--- a/client/app/bundles/course/survey/containers/SurveyLayout/__test__/AdminMenu.test.jsx
+++ b/client/app/bundles/course/survey/containers/SurveyLayout/__test__/AdminMenu.test.jsx
@@ -7,7 +7,7 @@ import DeleteConfirmation from 'lib/containers/DeleteConfirmation';
 import AdminMenu from '../AdminMenu';
 
 describe('<AdminMenu />', () => {
-  it('does not render button if user cannot edit or update', () => {
+  it('does not render button if user cannot edit or update', async () => {
     const survey = {
       id: 2,
       title: 'Survey',
@@ -19,7 +19,9 @@ describe('<AdminMenu />', () => {
       <AdminMenu survey={survey} surveyId={survey.id.toString()} />,
     );
 
-    expect(page.queryByRole('button')).not.toBeInTheDocument();
+    await waitFor(() =>
+      expect(page.queryByRole('button')).not.toBeInTheDocument(),
+    );
   });
 
   it('allows surveys to be deleted', async () => {
@@ -37,7 +39,7 @@ describe('<AdminMenu />', () => {
       </>,
     );
 
-    fireEvent.click(page.getByRole('button'));
+    fireEvent.click(await page.findByRole('button'));
     fireEvent.click(page.getByText('Delete Survey'));
     fireEvent.click(page.getByRole('button', { name: 'Delete' }));
 
@@ -74,7 +76,7 @@ describe('<AdminMenu />', () => {
       </>,
     );
 
-    fireEvent.click(page.getByRole('button'));
+    fireEvent.click(await page.findByRole('button'));
     fireEvent.click(page.getByText('Edit Survey'));
 
     const description = 'To update description';
diff --git a/client/app/bundles/course/survey/pages/ResponseIndex/__test__/RemindButton.test.tsx b/client/app/bundles/course/survey/pages/ResponseIndex/__test__/RemindButton.test.tsx
index b573d452e08..0737b339cee 100644
--- a/client/app/bundles/course/survey/pages/ResponseIndex/__test__/RemindButton.test.tsx
+++ b/client/app/bundles/course/survey/pages/ResponseIndex/__test__/RemindButton.test.tsx
@@ -6,11 +6,11 @@ import { CourseUserType } from 'lib/components/core/CourseUserTypeTabs';
 import RemindButton from '../RemindButton';
 
 describe('<RemindButton />', () => {
-  it('renders confirmation dialog that triggers the reminder', () => {
+  it('renders confirmation dialog that triggers the reminder', async () => {
     const spyRemind = jest.spyOn(CourseAPI.survey.surveys, 'remind');
     const page = render(<RemindButton userType={CourseUserType.STUDENTS} />);
 
-    const button = page.getByRole('button');
+    const button = await page.findByRole('button');
     fireEvent.click(button);
     fireEvent.click(page.getByText('Cancel'));
 
diff --git a/client/app/bundles/course/survey/pages/ResponseShow/__test__/index.test.jsx b/client/app/bundles/course/survey/pages/ResponseShow/__test__/index.test.jsx
index eefc8b20d54..d76f7aabf30 100644
--- a/client/app/bundles/course/survey/pages/ResponseShow/__test__/index.test.jsx
+++ b/client/app/bundles/course/survey/pages/ResponseShow/__test__/index.test.jsx
@@ -1,4 +1,4 @@
-import { render } from 'test-utils';
+import { render, waitFor } from 'test-utils';
 
 import CourseAPI from 'api/course';
 import { LOADING_INDICATOR_TEST_ID } from 'lib/components/core/LoadingIndicator';
@@ -25,7 +25,7 @@ describe('<ResponseShow />', () => {
       [responseUrl],
     );
 
-    expect(spyFetch).toHaveBeenCalled();
+    await waitFor(() => expect(spyFetch).toHaveBeenCalled());
   });
 
   it('shows form and admin buttons if user has permissions and page is loaded', async () => {
@@ -65,13 +65,13 @@ describe('<ResponseShow />', () => {
       [responseUrl],
     );
 
-    expect(page.getByText(data.response.creator_name)).toBeVisible();
+    expect(await page.findByText(data.response.creator_name)).toBeVisible();
     expect(page.getByText(data.survey.description)).toBeVisible();
     expect(page.getByRole('button', { name: 'View' })).toBeVisible();
     expect(page.getByRole('button', { name: 'Unsubmit' })).toBeVisible();
   });
 
-  it('shows only description and loading indicator when loading', () => {
+  it('shows only description and loading indicator when loading', async () => {
     const surveyId = 2;
     const responseId = 2;
 
@@ -103,7 +103,7 @@ describe('<ResponseShow />', () => {
       <ResponseShow dispatch={jest.fn()} {...data} {...params} />,
     );
 
-    expect(page.getByText(data.survey.description)).toBeVisible();
+    expect(await page.findByText(data.survey.description)).toBeVisible();
     expect(page.getByTestId(LOADING_INDICATOR_TEST_ID)).toBeVisible();
   });
 });
diff --git a/client/app/bundles/course/survey/pages/SurveyIndex/__test__/NewSurveyButton.test.jsx b/client/app/bundles/course/survey/pages/SurveyIndex/__test__/NewSurveyButton.test.jsx
index 16464a423b6..740ee64e02a 100644
--- a/client/app/bundles/course/survey/pages/SurveyIndex/__test__/NewSurveyButton.test.jsx
+++ b/client/app/bundles/course/survey/pages/SurveyIndex/__test__/NewSurveyButton.test.jsx
@@ -40,7 +40,7 @@ describe('<NewSurveyButton />', () => {
       { state },
     );
 
-    fireEvent.click(page.getByRole('button'));
+    fireEvent.click(await page.findByRole('button'));
 
     fireEvent.change(page.getByLabelText('Title', { exact: false }), {
       target: { value: survey.title },
diff --git a/client/app/bundles/course/survey/pages/SurveyResults/__test__/ResultsQuestion.test.tsx b/client/app/bundles/course/survey/pages/SurveyResults/__test__/ResultsQuestion.test.tsx
index 3548e614e64..2e1d85ddc0b 100644
--- a/client/app/bundles/course/survey/pages/SurveyResults/__test__/ResultsQuestion.test.tsx
+++ b/client/app/bundles/course/survey/pages/SurveyResults/__test__/ResultsQuestion.test.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
-import { fireEvent, render, within } from 'test-utils';
+import { fireEvent, render, waitFor, within } from 'test-utils';
 
 import ResultsQuestion from '../ResultsQuestion';
 
@@ -57,7 +57,7 @@ const getMultipleChoiceData = (optionCount) => {
   };
 };
 
-const testExpandLongQuestion = (question): void => {
+const testExpandLongQuestion = async (question) => {
   const page = render(
     <ResultsQuestion
       {...{ question }}
@@ -67,12 +67,14 @@ const testExpandLongQuestion = (question): void => {
     />,
   );
 
-  expect(page.queryByRole('table')).not.toBeInTheDocument();
+  await waitFor(() =>
+    expect(page.queryByRole('table')).not.toBeInTheDocument(),
+  );
 
-  const expandButton = page.getAllByRole('button')[0];
+  const expandButton = (await page.findAllByRole('button'))[0];
   fireEvent.click(expandButton);
 
-  expect(page.getByRole('table')).toBeVisible();
+  expect(await page.findByRole('table')).toBeVisible();
 };
 
 describe('<ResultsQuestion />', () => {
@@ -86,7 +88,7 @@ describe('<ResultsQuestion />', () => {
     testExpandLongQuestion(question);
   });
 
-  it('allows sorting by percentage', () => {
+  it('allows sorting by percentage', async () => {
     const question = getMultipleChoiceData(2);
 
     const page = render(
@@ -98,7 +100,7 @@ describe('<ResultsQuestion />', () => {
       />,
     );
 
-    let lastRow = page.getAllByRole('row').at(-1)!;
+    let lastRow = (await page.findAllByRole('row')).at(-1)!;
     expect(within(lastRow).getByText('1')).toBeVisible();
 
     const sortToggle = page.getByRole('checkbox');
diff --git a/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/DeleteSectionButton.test.tsx b/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/DeleteSectionButton.test.tsx
index 5bf6e1d6d99..4e5cd8d86bd 100644
--- a/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/DeleteSectionButton.test.tsx
+++ b/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/DeleteSectionButton.test.tsx
@@ -6,7 +6,7 @@ import DeleteConfirmation from 'lib/containers/DeleteConfirmation';
 import DeleteSectionButton from '../DeleteSectionButton';
 
 describe('<DeleteSectionButton />', () => {
-  it('injects handlers that allow survey sections to be deleted', () => {
+  it('injects handlers that allow survey sections to be deleted', async () => {
     const surveyId = 1;
     const sectionId = 7;
     const url = `/courses/${global.courseId}/surveys/${surveyId}`;
@@ -21,7 +21,7 @@ describe('<DeleteSectionButton />', () => {
       </>,
     );
 
-    fireEvent.click(page.getByRole('button'));
+    fireEvent.click(await page.findByRole('button'));
     fireEvent.click(page.getByRole('button', { name: 'Delete' }));
 
     expect(spyDelete).toHaveBeenCalledWith(sectionId);
diff --git a/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/EditSectionButton.test.jsx b/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/EditSectionButton.test.jsx
index 04315662c15..23af599c47e 100644
--- a/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/EditSectionButton.test.jsx
+++ b/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/EditSectionButton.test.jsx
@@ -31,7 +31,7 @@ describe('<EditSectionButton />', () => {
       </>,
     );
 
-    fireEvent.click(page.getByRole('button'));
+    fireEvent.click(await page.findByRole('button'));
 
     fireEvent.change(page.getByLabelText('Description'), {
       target: { value: newDescription },
diff --git a/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/MoveDownButton.test.tsx b/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/MoveDownButton.test.tsx
index de1daefabae..3561a3be517 100644
--- a/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/MoveDownButton.test.tsx
+++ b/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/MoveDownButton.test.tsx
@@ -22,7 +22,7 @@ describe('<MoveDownButton />', () => {
     const spyMove = jest.spyOn(CourseAPI.survey.surveys, 'reorderSections');
 
     const page = render(<MoveDownButton sectionIndex={3} />);
-    const moveDownButton = page.getByRole('button');
+    const moveDownButton = await page.findByRole('button');
 
     fireEvent.click(moveDownButton);
 
diff --git a/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/MoveUpButton.test.jsx b/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/MoveUpButton.test.jsx
index a4ef88a86a1..9c9a2e8c5dd 100644
--- a/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/MoveUpButton.test.jsx
+++ b/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/MoveUpButton.test.jsx
@@ -22,7 +22,7 @@ describe('<MoveUpButton />', () => {
     const spyMove = jest.spyOn(CourseAPI.survey.surveys, 'reorderSections');
 
     const page = render(<MoveUpButton sectionIndex={3} />);
-    const moveUpButton = page.getByRole('button');
+    const moveUpButton = await page.findByRole('button');
 
     fireEvent.click(moveUpButton);
 
diff --git a/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/NewQuestionButton.test.jsx b/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/NewQuestionButton.test.jsx
index ee4a749f913..d9aa3277108 100644
--- a/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/NewQuestionButton.test.jsx
+++ b/client/app/bundles/course/survey/pages/SurveyShow/Section/__test__/NewQuestionButton.test.jsx
@@ -20,7 +20,7 @@ describe('<NewQuestionButton />', () => {
       </>,
     );
 
-    fireEvent.click(page.getByRole('button'));
+    fireEvent.click(await page.findByRole('button'));
 
     fireEvent.change(page.getByLabelText('Question Text', { exact: false }), {
       target: { value: questionText },
diff --git a/client/app/bundles/course/survey/pages/SurveyShow/__test__/DownloadResponsesButton.test.tsx b/client/app/bundles/course/survey/pages/SurveyShow/__test__/DownloadResponsesButton.test.tsx
index 21d3541e7a5..41c26084cde 100644
--- a/client/app/bundles/course/survey/pages/SurveyShow/__test__/DownloadResponsesButton.test.tsx
+++ b/client/app/bundles/course/survey/pages/SurveyShow/__test__/DownloadResponsesButton.test.tsx
@@ -5,11 +5,11 @@ import CourseAPI from 'api/course';
 import DownloadResponsesButton from '../DownloadResponsesButton';
 
 describe('<DownloadResponsesButton />', () => {
-  it('injects handlers that allows survey responses to be downloaded', () => {
+  it('injects handlers that allows survey responses to be downloaded', async () => {
     const spyRemind = jest.spyOn(CourseAPI.survey.surveys, 'download');
 
     const page = render(<DownloadResponsesButton />);
-    const downloadButton = page.getByRole('button');
+    const downloadButton = await page.findByRole('button');
 
     fireEvent.click(downloadButton);
 
diff --git a/client/app/bundles/course/survey/pages/SurveyShow/__test__/NewSectionButton.test.jsx b/client/app/bundles/course/survey/pages/SurveyShow/__test__/NewSectionButton.test.jsx
index 7996a9de6a4..44bd92f87ab 100644
--- a/client/app/bundles/course/survey/pages/SurveyShow/__test__/NewSectionButton.test.jsx
+++ b/client/app/bundles/course/survey/pages/SurveyShow/__test__/NewSectionButton.test.jsx
@@ -17,7 +17,7 @@ describe('<NewSectionButton />', () => {
       </>,
     );
 
-    const newSectionButton = page.getByRole('button');
+    const newSectionButton = await page.findByRole('button');
     fireEvent.click(newSectionButton);
 
     const titleField = page.getByLabelText('Title', { exact: false });
diff --git a/client/app/bundles/course/user-email-subscriptions/__test__/index.test.jsx b/client/app/bundles/course/user-email-subscriptions/__test__/index.test.jsx
index 6d21e400c47..d25f7c0c861 100644
--- a/client/app/bundles/course/user-email-subscriptions/__test__/index.test.jsx
+++ b/client/app/bundles/course/user-email-subscriptions/__test__/index.test.jsx
@@ -42,7 +42,7 @@ describe('<UserEmailSubscriptions />', () => {
 
     const page = render(<UserEmailSubscriptions />, { state });
 
-    const toggle = page.getByRole('checkbox');
+    const toggle = await page.findByRole('checkbox');
     fireEvent.click(toggle);
 
     await waitFor(() => {
diff --git a/client/app/bundles/course/user-notification/components/__test__/LevelReachedPopup.test.tsx b/client/app/bundles/course/user-notification/components/__test__/LevelReachedPopup.test.tsx
index 0b69d2ee68a..f08b309c520 100644
--- a/client/app/bundles/course/user-notification/components/__test__/LevelReachedPopup.test.tsx
+++ b/client/app/bundles/course/user-notification/components/__test__/LevelReachedPopup.test.tsx
@@ -3,19 +3,21 @@ import { LevelReachedNotification } from 'types/course/userNotifications';
 
 import LevelReachedPopup from '../LevelReachedPopup';
 
-const renderPopup = (data: LevelReachedNotification): HTMLElement => {
+const renderPopup = async (
+  data: LevelReachedNotification,
+): Promise<HTMLElement> => {
   const page = render(
     <LevelReachedPopup notification={data} onDismiss={jest.fn()} />,
   );
 
-  return page.getByRole('dialog');
+  return page.findByRole('dialog');
 };
 
 describe('<LevelReachedPopup />', () => {
   describe('when leaderboard is disabled', () => {
-    it('shows the reached level but does not show leaderboard button', () => {
+    it('shows the reached level but does not show leaderboard button', async () => {
       const popup = within(
-        renderPopup({
+        await renderPopup({
           id: 69,
           notificationType: 'levelReached',
           levelNumber: 5,
@@ -33,9 +35,9 @@ describe('<LevelReachedPopup />', () => {
   });
 
   describe('when the student is on the leaderboard', () => {
-    it('shows the reached level, position, and the leaderboard button', () => {
+    it('shows the reached level, position, and the leaderboard button', async () => {
       const popup = within(
-        renderPopup({
+        await renderPopup({
           id: 69,
           notificationType: 'levelReached',
           levelNumber: 5,
@@ -51,9 +53,9 @@ describe('<LevelReachedPopup />', () => {
   });
 
   describe('when the student is not on the leaderboard', () => {
-    it('shows the reached level, leaderboard button, but no position', () => {
+    it('shows the reached level, leaderboard button, but no position', async () => {
       const popup = within(
-        renderPopup({
+        await renderPopup({
           id: 69,
           notificationType: 'levelReached',
           levelNumber: 5,
diff --git a/client/app/lib/components/core/__test__/ErrorText.test.tsx b/client/app/lib/components/core/__test__/ErrorText.test.tsx
index 5aa4bd0a73d..37dbfe23b42 100644
--- a/client/app/lib/components/core/__test__/ErrorText.test.tsx
+++ b/client/app/lib/components/core/__test__/ErrorText.test.tsx
@@ -1,4 +1,4 @@
-import { render } from 'test-utils';
+import { render, waitForElementToBeRemoved } from 'test-utils';
 
 import ErrorText from '../ErrorText';
 
@@ -6,16 +6,22 @@ describe('<ErrorText />', () => {
   describe('when input is a string', () => {
     const errors = 'An error.';
 
-    it('displays it', () => {
-      expect(render(<ErrorText errors={errors} />)).toMatchSnapshot();
+    it('displays it', async () => {
+      const page = render(<ErrorText errors={errors} />);
+      await waitForElementToBeRemoved(page.getByRole('progressbar'));
+
+      expect(page).toMatchSnapshot();
     });
   });
 
   describe('when input is an array', () => {
     const errors = ['An error.', 'Another error.'];
 
-    it('displays each error', () => {
-      expect(render(<ErrorText errors={errors} />)).toMatchSnapshot();
+    it('displays each error', async () => {
+      const page = render(<ErrorText errors={errors} />);
+      await waitForElementToBeRemoved(page.getByRole('progressbar'));
+
+      expect(page).toMatchSnapshot();
     });
   });
 });
diff --git a/client/app/lib/components/core/__test__/LoadingIndicator.test.tsx b/client/app/lib/components/core/__test__/LoadingIndicator.test.tsx
index 4d0cd5888a4..427cc222218 100644
--- a/client/app/lib/components/core/__test__/LoadingIndicator.test.tsx
+++ b/client/app/lib/components/core/__test__/LoadingIndicator.test.tsx
@@ -1,4 +1,9 @@
-import { render, RenderResult } from 'test-utils';
+import {
+  render,
+  RenderResult,
+  screen,
+  waitForElementToBeRemoved,
+} from 'test-utils';
 
 import LoadingIndicator, {
   LOADING_INDICATOR_TEST_ID,
@@ -7,8 +12,9 @@ import LoadingIndicator, {
 let documentBody: RenderResult;
 
 describe('<LoadingIndicator />', () => {
-  beforeEach(() => {
+  beforeEach(async () => {
     documentBody = render(<LoadingIndicator />);
+    await waitForElementToBeRemoved(screen.getByRole('progressbar'));
   });
 
   it('shows the loading indicator', () => {
diff --git a/client/app/lib/components/core/buttons/__test__/DeleteButton.test.tsx b/client/app/lib/components/core/buttons/__test__/DeleteButton.test.tsx
index 0761829c63e..a7e825cb109 100644
--- a/client/app/lib/components/core/buttons/__test__/DeleteButton.test.tsx
+++ b/client/app/lib/components/core/buttons/__test__/DeleteButton.test.tsx
@@ -1,4 +1,11 @@
-import { fireEvent, render, RenderResult, screen } from 'test-utils';
+import {
+  fireEvent,
+  render,
+  RenderResult,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+} from 'test-utils';
 
 import DeleteButton from '../DeleteButton';
 
@@ -14,22 +21,29 @@ describe('<DeleteButton />', () => {
       );
     });
 
-    it('shows the delete icon button', () => {
-      expect(documentBody.getByTestId('DeleteIconButton')).toBeVisible();
+    it('shows the delete icon button', async () => {
+      expect(await documentBody.findByTestId('DeleteIconButton')).toBeVisible();
       expect(documentBody.getByTestId('DeleteIcon')).toBeVisible();
     });
 
-    it('does not show the confirmation dialog when clicked', () => {
+    it('does not show the confirmation dialog when clicked', async () => {
       // Before clicking
-      expect(documentBody.queryByTitle(PROMPT_TITLE)).toBeNull();
+      await waitFor(() =>
+        expect(documentBody.queryByTitle(PROMPT_TITLE)).not.toBeInTheDocument(),
+      );
+
+      fireEvent.click(await screen.findByTestId('DeleteIconButton'));
 
-      fireEvent.click(screen.getByTestId('DeleteIconButton'));
       // After clicking
-      expect(documentBody.queryByTitle(PROMPT_TITLE)).toBeNull();
+      await waitFor(() =>
+        expect(documentBody.queryByTitle(PROMPT_TITLE)).toBeNull(),
+      );
     });
 
-    it('matches the snapshot', () => {
+    it('matches the snapshot', async () => {
       const { baseElement } = documentBody;
+      await waitForElementToBeRemoved(screen.getByRole('progressbar'));
+
       expect(baseElement).toMatchSnapshot();
     });
   });
@@ -46,8 +60,8 @@ describe('<DeleteButton />', () => {
       );
     });
 
-    it('shows the delete icon button', () => {
-      expect(documentBody.getByTestId('DeleteIconButton')).toBeVisible();
+    it('shows the delete icon button', async () => {
+      expect(await documentBody.findByTestId('DeleteIconButton')).toBeVisible();
       expect(documentBody.getByTestId('DeleteIcon')).toBeVisible();
       expect(documentBody.getByTestId('DeleteIconButton')).toBeDisabled();
     });
@@ -65,16 +79,18 @@ describe('<DeleteButton />', () => {
       );
     });
 
-    it('shows the delete icon button', () => {
-      expect(documentBody.getByTestId('DeleteIconButton')).toBeVisible();
+    it('shows the delete icon button', async () => {
+      expect(await documentBody.findByTestId('DeleteIconButton')).toBeVisible();
       expect(documentBody.getByTestId('DeleteIcon')).toBeVisible();
     });
 
-    it('shows the confirmation dialog when clicked', () => {
+    it('shows the confirmation dialog when clicked', async () => {
       // Before clicking delete button
-      expect(documentBody.queryByTitle(PROMPT_TITLE)).toBeNull();
+      await waitFor(() =>
+        expect(documentBody.queryByTitle(PROMPT_TITLE)).not.toBeInTheDocument(),
+      );
 
-      fireEvent.click(screen.getByTestId('DeleteIconButton'));
+      fireEvent.click(await screen.findByTestId('DeleteIconButton'));
       // After clicking delete button
       expect(documentBody.getByText(PROMPT_TITLE)).toBeVisible();
 
diff --git a/client/app/lib/components/core/buttons/__test__/EditButton.test.tsx b/client/app/lib/components/core/buttons/__test__/EditButton.test.tsx
index 91331878ef5..62e4f4556c0 100644
--- a/client/app/lib/components/core/buttons/__test__/EditButton.test.tsx
+++ b/client/app/lib/components/core/buttons/__test__/EditButton.test.tsx
@@ -1,4 +1,9 @@
-import { render, RenderResult } from 'test-utils';
+import {
+  render,
+  RenderResult,
+  screen,
+  waitForElementToBeRemoved,
+} from 'test-utils';
 
 import EditButton from '../EditButton';
 
@@ -9,13 +14,15 @@ describe('<EditButton />', () => {
     documentBody = render(<EditButton onClick={jest.fn()} />);
   });
 
-  it('shows the edit icon button', () => {
-    expect(documentBody.getByTestId('EditIconButton')).toBeVisible();
+  it('shows the edit icon button', async () => {
+    expect(await documentBody.findByTestId('EditIconButton')).toBeVisible();
     expect(documentBody.getByTestId('EditIcon')).toBeVisible();
   });
 
-  it('matches the snapshot', () => {
+  it('matches the snapshot', async () => {
     const { baseElement } = documentBody;
+    await waitForElementToBeRemoved(screen.getByRole('progressbar'));
+
     expect(baseElement).toMatchSnapshot();
   });
 });

From 937bb04344f9eb5c5a51d4fd88034f4574070ba2 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 13:10:23 +0800
Subject: [PATCH 32/36] test(jest): add lodash overrides since lodash-es is ESM
 only

---
 client/jest.config.js | 1 +
 client/package.json   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/client/jest.config.js b/client/jest.config.js
index 2732714586f..abcae92775b 100644
--- a/client/jest.config.js
+++ b/client/jest.config.js
@@ -23,6 +23,7 @@ const config = {
     '^bundles(.*)$': '<rootDir>/app/bundles$1',
     '^course(.*)$': '<rootDir>/app/bundles/course$1',
     '^store(.*)$': '<rootDir>/app/store$1',
+    '^lodash-es(.*)$': 'lodash$1',
   },
   coveragePathIgnorePatterns: ['/node_modules/', '/__test__/'],
 };
diff --git a/client/package.json b/client/package.json
index 5721e2fe541..99bed4dcc62 100644
--- a/client/package.json
+++ b/client/package.json
@@ -180,6 +180,7 @@
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "jest-localstorage-mock": "^2.4.26",
+    "lodash": "^4.17.21",
     "moment-timezone-data-webpack-plugin": "^1.5.1",
     "postcss": "^8.4.38",
     "postcss-loader": "^8.1.1",

From 2fca6fa42b50b85edaeb5f55c1e7ba1a1c5b0ecb Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 13:11:58 +0800
Subject: [PATCH 33/36] test(capybara): remove jQuery check from
 `wait_for_ajax`

---
 spec/support/capybara.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/support/capybara.rb b/spec/support/capybara.rb
index 86c83b520d3..14832805b1c 100644
--- a/spec/support/capybara.rb
+++ b/spec/support/capybara.rb
@@ -31,7 +31,7 @@ def find_form(selector, action: nil)
 
     def wait_for_ajax
       Timeout.timeout(Capybara.default_max_wait_time) do
-        sleep 0.1 until page.evaluate_script('jQuery.active').zero?
+        sleep 0.1
       end
     end
 

From badc52873421e92f923ebfe1a342e06f9cb9b1d6 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 20:12:39 +0800
Subject: [PATCH 34/36] test(forum_disbursement_spec): wrong tab label

---
 client/app/bundles/course/experience-points/index.tsx           | 2 +-
 .../course/experience_points/forum_disbursement_spec.rb         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/app/bundles/course/experience-points/index.tsx b/client/app/bundles/course/experience-points/index.tsx
index 5710b918470..2280f27349e 100644
--- a/client/app/bundles/course/experience-points/index.tsx
+++ b/client/app/bundles/course/experience-points/index.tsx
@@ -25,7 +25,7 @@ const translations = defineMessages({
   },
   forumDisbursementTab: {
     id: 'course.experiencePoints.disbursement.DisbursementIndex.forumTab',
-    defaultMessage: 'Forum Participation Disbursement',
+    defaultMessage: 'Forum Participation',
   },
   generalDisbursementTab: {
     id: 'course.experiencePoints.disbursement.DisbursementIndex.generalTab',
diff --git a/spec/features/course/experience_points/forum_disbursement_spec.rb b/spec/features/course/experience_points/forum_disbursement_spec.rb
index 157529a058e..487083df6c3 100644
--- a/spec/features/course/experience_points/forum_disbursement_spec.rb
+++ b/spec/features/course/experience_points/forum_disbursement_spec.rb
@@ -29,7 +29,7 @@
         end
         create(:course_discussion_post_vote, post: older_posts[0])
         visit course_experience_points_records_path(course)
-        find('button', text: 'Forum Participation Disbursement').click
+        find('button', text: 'Forum Participation').click
 
         within find(content_tag_selector(students[0])) do
           expect(page).to have_field(type: 'text', with: '100')

From 75435beaf9099485c6c1d2d1520f4e299d4b34e8 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Sat, 19 Apr 2025 20:34:12 +0800
Subject: [PATCH 35/36] test(assessment_management_spec): fix flaky test

---
 spec/features/course/assessment_management_spec.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/features/course/assessment_management_spec.rb b/spec/features/course/assessment_management_spec.rb
index 76675de683d..74ab5871bad 100644
--- a/spec/features/course/assessment_management_spec.rb
+++ b/spec/features/course/assessment_management_spec.rb
@@ -69,7 +69,7 @@
 
         find_link(assessment.title, href: course_assessment_path(course, assessment)).click
 
-        expect(current_path).to eq(course_assessment_path(course, assessment))
+        expect(page).to have_current_path(course_assessment_path(course, assessment))
       end
     end
   end

From 794119890fbe2ec703c7c7222881fe7d66558ab7 Mon Sep 17 00:00:00 2001
From: Phillmont Muktar <51525686+purfectliterature@users.noreply.github.com>
Date: Mon, 28 Apr 2025 14:33:37 +0800
Subject: [PATCH 36/36] feat(application_html_formatters_helper): whitelist
 only YouTube URLs

We do this because from the business logic point-of-view, Coursemology
only supports YouTube. The New Video form's placeholder specifies that,
and the production database only has YouTube URLs.
---
 app/helpers/application_html_formatters_helper.rb  |  8 +-------
 spec/helpers/application_formatters_helper_spec.rb | 14 +++++++-------
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/app/helpers/application_html_formatters_helper.rb b/app/helpers/application_html_formatters_helper.rb
index efb0e2a675c..b7afe4e5ddf 100644
--- a/app/helpers/application_html_formatters_helper.rb
+++ b/app/helpers/application_html_formatters_helper.rb
@@ -86,13 +86,7 @@ def self.build_html_pipeline(custom_options)
   # List of video hosting site URLs to allow
   VIDEO_URL_WHITELIST = Regexp.union(
     /\A(?:https?:)?\/\/(?:www\.)?(?:m.)?youtube\.com\//,
-    /\A(?:https?:)?\/\/(?:www\.)?youtu.be\//,
-    /\A(?:https?:)?\/\/(?:www\.)?(?:player.)?vimeo\.com\//,
-    /\A(?:https?:)?\/\/(?:www\.)?vine\.co\//,
-    /\A(?:https?:)?\/\/(?:www\.)?instagram\.com\//,
-    /\A(?:https?:)?\/\/(?:www\.)?(?:geo.)?dailymotion\.com\//,
-    /\A(?:https?:)?\/\/(?:www\.)?dai\.ly\//,
-    /\A(?:https?:)?\/\/(?:www\.)?youku\.com\//
+    /\A(?:https?:)?\/\/(?:www\.)?youtu.be\//
   ).freeze
 
   OEMBED_WHITELIST_TRANSFORMER = lambda do |env|
diff --git a/spec/helpers/application_formatters_helper_spec.rb b/spec/helpers/application_formatters_helper_spec.rb
index 8c259f6be68..d86191a0cac 100644
--- a/spec/helpers/application_formatters_helper_spec.rb
+++ b/spec/helpers/application_formatters_helper_spec.rb
@@ -94,11 +94,6 @@ def hello:
         it 'does not remove embedded content from allowed sources' do
           html = <<-HTML
             <iframe src="//youtube.com/video1"></iframe>
-            <iframe src="//instagram.com/video2"></iframe>
-            <iframe src="//vimeo.com/video3"></iframe>
-            <iframe src="//vine.co/video4"></iframe>
-            <iframe src="//dailymotion.com/video5"></iframe>
-            <iframe src="//youku.com/video6"></iframe>
           HTML
           expect(helper.format_html(html)).to eq(html)
         end
@@ -111,6 +106,11 @@ def hello:
             <iframe src="//vine.com"></iframe>
             <iframe src="//dailymotion.co"></iframe>
             <iframe src="//vimeo.org"></iframe>
+            <iframe src="//instagram.com/video2"></iframe>
+            <iframe src="//vimeo.com/video3"></iframe>
+            <iframe src="//vine.co/video4"></iframe>
+            <iframe src="//dailymotion.com/video5"></iframe>
+            <iframe src="//youku.com/video6"></iframe>
           HTML
           expect(helper.format_html(html)).not_to include('iframe')
         end
@@ -141,7 +141,7 @@ def hello:
           expect(result.scan('src="https://www.youtube.com/embed/jNQXAC9IVRw').size).to eq(embed_count)
         end
 
-        it 'transforms embedded content from dailymotion' do
+        xit 'transforms embedded content from dailymotion' do
           html = <<-HTML
             <oembed url="https://www.dailymotion.com/video/x3k7o56"></oembed>
             <oembed url="https://dailymotion.com/video/x3k7o56"></oembed>
@@ -158,7 +158,7 @@ def hello:
           expect(result.scan('src="https://geo.dailymotion.com/player.html?video=x3k7o56').size).to eq(embed_count)
         end
 
-        it 'transforms embedded content from vimeo' do
+        xit 'transforms embedded content from vimeo' do
           html = <<-HTML
             <oembed url="https://vimeo.com/channels/staffpicks/852794606"></oembed>
             <oembed url="https://vimeo.com/852794606"></oembed>