Partition the build more by lazy-loading pages/buttons/dialogs (#3156)

sillsdev · Jun 24, 2024 · e8a7106 · e8a7106
1 parent a304326
commit e8a7106
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 22 deletions.
diff --git a/src/components/App/AppLoggedIn.tsx b/src/components/App/AppLoggedIn.tsx
@@ -9,10 +9,6 @@ import SignalRHub from "components/App/SignalRHub";
 import AppBar from "components/AppBar/AppBarComponent";
 import PageNotFound from "components/PageNotFound/component";
 import ProjectScreen from "components/ProjectScreen";
-import ProjectSettings from "components/ProjectSettings";
-import SiteSettings from "components/SiteSettings";
-import Statistics from "components/Statistics/Statistics";
-import UserSettings from "components/UserSettings/UserSettings";
 import NextGoalScreen from "goals/DefaultGoal/NextGoalScreen";
 import { updateLangFromUser } from "i18n";
 import { useAppSelector } from "rootRedux/hooks";
@@ -27,6 +23,12 @@ const BaseGoalScreen = loadable(
 );
 const DataEntry = loadable(() => import("components/DataEntry"));
 const GoalTimeline = loadable(() => import("components/GoalTimeline"));
+const ProjectSettings = loadable(() => import("components/ProjectSettings"));
+const SiteSettings = loadable(() => import("components/SiteSettings"));
+const Statistics = loadable(() => import("components/Statistics/Statistics"));
+const UserSettings = loadable(
+  () => import("components/UserSettings/UserSettings")
+);
 
 export default function AppWithBar(): ReactElement {
   const proj = useAppSelector(

diff --git a/src/components/Buttons/index.ts b/src/components/Buttons/index.ts
@@ -1,13 +1,27 @@
-import CloseButton from "components/Buttons/CloseButton";
-import DeleteButtonWithDialog from "components/Buttons/DeleteButtonWithDialog";
-import FileInputButton from "components/Buttons/FileInputButton";
-import FlagButton from "components/Buttons/FlagButton";
-import IconButtonWithTooltip from "components/Buttons/IconButtonWithTooltip";
-import LoadingButton from "components/Buttons/LoadingButton";
-import LoadingDoneButton from "components/Buttons/LoadingDoneButton";
-import NoteButton from "components/Buttons/NoteButton";
-import PartOfSpeechButton from "components/Buttons/PartOfSpeechButton";
-import UndoButton from "components/Buttons/UndoButton";
+import loadable from "@loadable/component";
+
+const CloseButton = loadable(() => import("components/Buttons/CloseButton"));
+const DeleteButtonWithDialog = loadable(
+  () => import("components/Buttons/DeleteButtonWithDialog")
+);
+const FileInputButton = loadable(
+  () => import("components/Buttons/FileInputButton")
+);
+const FlagButton = loadable(() => import("components/Buttons/FlagButton"));
+const IconButtonWithTooltip = loadable(
+  () => import("components/Buttons/IconButtonWithTooltip")
+);
+const LoadingButton = loadable(
+  () => import("components/Buttons/LoadingButton")
+);
+const LoadingDoneButton = loadable(
+  () => import("components/Buttons/LoadingDoneButton")
+);
+const NoteButton = loadable(() => import("components/Buttons/NoteButton"));
+const PartOfSpeechButton = loadable(
+  () => import("components/Buttons/PartOfSpeechButton")
+);
+const UndoButton = loadable(() => import("components/Buttons/UndoButton"));
 
 export {
   CloseButton,

diff --git a/src/components/Dialogs/index.ts b/src/components/Dialogs/index.ts
@@ -1,11 +1,29 @@
-import ButtonConfirmation from "components/Dialogs/ButtonConfirmation";
-import CancelConfirmDialog from "components/Dialogs/CancelConfirmDialog";
-import DeleteEditTextDialog from "components/Dialogs/DeleteEditTextDialog";
-import EditTextDialog from "components/Dialogs/EditTextDialog";
-import RecordAudioDialog from "components/Dialogs/RecordAudioDialog";
-import SubmitTextDialog from "components/Dialogs/SubmitTextDialog";
-import UploadImageDialog from "components/Dialogs/UploadImageDialog";
-import ViewImageDialog from "components/Dialogs/ViewImageDialog";
+import loadable from "@loadable/component";
+
+const ButtonConfirmation = loadable(
+  () => import("components/Dialogs/ButtonConfirmation")
+);
+const CancelConfirmDialog = loadable(
+  () => import("components/Dialogs/CancelConfirmDialog")
+);
+const DeleteEditTextDialog = loadable(
+  () => import("components/Dialogs/DeleteEditTextDialog")
+);
+const EditTextDialog = loadable(
+  () => import("components/Dialogs/EditTextDialog")
+);
+const RecordAudioDialog = loadable(
+  () => import("components/Dialogs/RecordAudioDialog")
+);
+const SubmitTextDialog = loadable(
+  () => import("components/Dialogs/SubmitTextDialog")
+);
+const UploadImageDialog = loadable(
+  () => import("components/Dialogs/UploadImageDialog")
+);
+const ViewImageDialog = loadable(
+  () => import("components/Dialogs/ViewImageDialog")
+);
 
 export {
   ButtonConfirmation,