Speed up page loads by over 10x, reduce JavaScript bundle transfers by over 18x

.gitignore

@@ -72,3 +72,5 @@ playwright/.cache/
 coverage/
 
 dump.rdb
+
+compiled-locales

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|

client/.babelrc

@@ -14,14 +14,6 @@
         "ast": true
       }
     ],
-    [
-      "babel-plugin-import",
-      {
-        "libraryName": "lodash",
-        "libraryDirectory": "",
-        "camel2DashComponentName": false
-      }
-    ],
     [
       "babel-plugin-import",
       {
@@ -44,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": {

client/app/__test__/setup.js

@@ -14,10 +14,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();
 const intl = createIntl({ locale: 'en', timeZone }, intlCache);
@@ -47,8 +43,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/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 });

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

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