FE optimization: lazy load jquery, ace; trim moment to >= 2014

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}`);

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';
 

client/app/bundles/course/achievement/components/misc/AchievementReordering.tsx

@@ -1,32 +1,24 @@
+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',
     defaultMessage: 'Reorder',
   },
   endReorderAchievement: {
     id: 'course.achievement.AchievementReordering.endReorderAchievement',
-    defaultMessage: 'Save New Ordering',
+    defaultMessage: 'Done reordering',
   },
   updateFailed: {
     id: 'course.achievement.AchievementReordering.updateFailed',
@@ -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>
   );
 };
 

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';

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';

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';
 

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);
 

client/app/bundles/course/assessment/pages/AssessmentStatistics/LiveFeedbackHistory/LiveFeedbackMessageHistory.tsx

@@ -1,14 +1,13 @@
 import { Dispatch, FC, SetStateAction } from 'react';
 import { Typography } from '@mui/material';
-import moment from 'moment';
 import { LiveFeedbackChatMessage } from 'types/course/assessment/submission/liveFeedback';
 
 import {
   fetchAllIndexWithIdenticalFileIds,
   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[];

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';

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,

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 {

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';
 

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';

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,

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';

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';

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';

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';

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';

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';

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';
 

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;