YKI(Frontend): Use lazy-loading of pages on route level

Opetushallitus · Oct 12, 2023 · c2de210 · c2de210
1 parent fdda5f6
commit c2de210
Show file tree

Hide file tree

Showing 12 changed files with 107 additions and 60 deletions.
diff --git a/frontend/packages/yki/src/components/layouts/LoadingFallback.tsx b/frontend/packages/yki/src/components/layouts/LoadingFallback.tsx
@@ -0,0 +1,14 @@
+import { Box } from '@mui/material';
+import { H1 } from 'shared/components';
+
+import { useCommonTranslation } from 'configs/i18n';
+
+export const LoadingFallback = () => {
+  const translateCommon = useCommonTranslation();
+
+  return (
+    <Box>
+      <H1>{translateCommon('loadingContent')}</H1>
+    </Box>
+  );
+};
diff --git a/frontend/packages/yki/src/pages/AccessibilityStatementPage.tsx b/frontend/packages/yki/src/pages/AccessibilityStatementPage.tsx
@@ -56,7 +56,7 @@ const ItemBulletList = ({
   </Typography>
 );
 
-export const AccessibilityStatementPage = () => {
+const AccessibilityStatementPage = () => {
   const translateAccessibility = useAccessibilityTranslation();
   const translateCommon = useCommonTranslation();
   const { pathname } = useLocation();
@@ -201,3 +201,5 @@ export const AccessibilityStatementPage = () => {
     </Grid>
   );
 };
+
+export default AccessibilityStatementPage;
diff --git a/frontend/packages/yki/src/pages/EvaluationOrderPage.tsx b/frontend/packages/yki/src/pages/EvaluationOrderPage.tsx
@@ -17,7 +17,7 @@ import {
 } from 'redux/reducers/evaluationOrder';
 import { evaluationOrderSelector } from 'redux/selectors/evaluationOrder';
 
-export const EvaluationOrderPage = () => {
+const EvaluationOrderPage = () => {
   // i18n
   const { t } = usePublicTranslation({
     keyPrefix: 'yki.pages.evaluationOrderPage',
@@ -135,3 +135,5 @@ export const EvaluationOrderPage = () => {
       );
   }
 };
+
+export default EvaluationOrderPage;
diff --git a/frontend/packages/yki/src/pages/EvaluationOrderStatusPage.tsx b/frontend/packages/yki/src/pages/EvaluationOrderStatusPage.tsx
@@ -113,7 +113,7 @@ const Error = () => {
   );
 };
 
-export const EvaluationOrderStatusPage = () => {
+const EvaluationOrderStatusPage = () => {
   const [params] = useSearchParams();
   const evaluationOrderId = params.get('id');
   const { loadEvaluationOrderDetailsState } = useAppSelector(
@@ -146,3 +146,5 @@ export const EvaluationOrderStatusPage = () => {
     </Box>
   );
 };
+
+export default EvaluationOrderStatusPage;
diff --git a/frontend/packages/yki/src/pages/ExamDetailsPage.tsx b/frontend/packages/yki/src/pages/ExamDetailsPage.tsx
@@ -17,7 +17,7 @@ import {
 } from 'redux/reducers/registration';
 import { examSessionSelector } from 'redux/selectors/examSession';
 
-export const ExamDetailsPage = () => {
+const ExamDetailsPage = () => {
   // i18n
   const { t } = usePublicTranslation({
     keyPrefix: 'yki.pages.examDetailsPage',
@@ -87,3 +87,5 @@ export const ExamDetailsPage = () => {
     </Box>
   );
 };
+
+export default ExamDetailsPage;
diff --git a/frontend/packages/yki/src/pages/InitRegistrationPage.tsx b/frontend/packages/yki/src/pages/InitRegistrationPage.tsx
@@ -32,7 +32,7 @@ const ContentSelector = () => {
   }
 };
 
-export const InitRegistrationPage = () => {
+const InitRegistrationPage = () => {
   // i18n
   const { t } = usePublicTranslation({
     keyPrefix: 'yki.pages.initRegistrationPage',
@@ -103,3 +103,5 @@ export const InitRegistrationPage = () => {
     </Box>
   );
 };
+
+export default InitRegistrationPage;
diff --git a/frontend/packages/yki/src/pages/LogoutSuccess.tsx b/frontend/packages/yki/src/pages/LogoutSuccess.tsx
@@ -6,7 +6,7 @@ import { Color, Variant } from 'shared/enums';
 import { useCommonTranslation, usePublicTranslation } from 'configs/i18n';
 import { AppRoutes } from 'enums/app';
 
-export const LogoutSuccess: React.FC = () => {
+const LogoutSuccess: React.FC = () => {
   const translateCommon = useCommonTranslation();
   const { t } = usePublicTranslation({
     keyPrefix: 'yki.pages.logoutSuccessPage',
@@ -51,3 +51,5 @@ export const LogoutSuccess: React.FC = () => {
     </Grid>
   );
 };
+
+export default LogoutSuccess;
diff --git a/frontend/packages/yki/src/pages/NotFoundPage.tsx b/frontend/packages/yki/src/pages/NotFoundPage.tsx
@@ -6,7 +6,7 @@ import { useWindowProperties } from 'shared/hooks';
 import { BackToFrontPageButton } from 'components/elements/BackToFrontPageButton';
 import { usePublicTranslation } from 'configs/i18n';
 
-export const NotFoundPage: FC = () => {
+const NotFoundPage: FC = () => {
   const { t } = usePublicTranslation({
     keyPrefix: 'yki.pages.notFoundPage',
   });
@@ -25,3 +25,5 @@ export const NotFoundPage: FC = () => {
     </div>
   );
 };
+
+export default NotFoundPage;
diff --git a/frontend/packages/yki/src/pages/ReassessmentPage.tsx b/frontend/packages/yki/src/pages/ReassessmentPage.tsx
@@ -12,7 +12,7 @@ import { useAppDispatch, useAppSelector } from 'configs/redux';
 import { loadEvaluationPeriods } from 'redux/reducers/evaluationPeriods';
 import { evaluationPeriodsSelector } from 'redux/selectors/evaluationPeriods';
 
-export const ReassessmentPage: FC = () => {
+const ReassessmentPage: FC = () => {
   const { t } = usePublicTranslation({
     keyPrefix: 'yki.pages.reassessmentPage',
   });
@@ -100,3 +100,5 @@ export const ReassessmentPage: FC = () => {
     </Box>
   );
 };
+
+export default ReassessmentPage;
diff --git a/frontend/packages/yki/src/pages/RegistrationPage.tsx b/frontend/packages/yki/src/pages/RegistrationPage.tsx
@@ -15,7 +15,7 @@ import {
   selectFilteredPublicExamSessions,
 } from 'redux/selectors/examSessions';
 
-export const RegistrationPage: FC = () => {
+const RegistrationPage: FC = () => {
   const { t } = usePublicTranslation({
     keyPrefix: 'yki.pages.registrationPage',
   });
@@ -126,3 +126,5 @@ export const RegistrationPage: FC = () => {
     </Box>
   );
 };
+
+export default RegistrationPage;
diff --git a/frontend/packages/yki/src/pages/RegistrationPaymentStatusPage.tsx b/frontend/packages/yki/src/pages/RegistrationPaymentStatusPage.tsx
@@ -13,7 +13,7 @@ import { loadExamSession } from 'redux/reducers/examSession';
 import { setActiveStep } from 'redux/reducers/registration';
 import { examSessionSelector } from 'redux/selectors/examSession';
 
-export const RegistrationPaymentStatusPage = () => {
+const RegistrationPaymentStatusPage = () => {
   // i18n
   const { t } = usePublicTranslation({
     keyPrefix: 'yki.pages.registrationStatusPage',
@@ -65,3 +65,5 @@ export const RegistrationPaymentStatusPage = () => {
     </Box>
   );
 };
+
+export default RegistrationPaymentStatusPage;
diff --git a/frontend/packages/yki/src/routers/AppRouter.tsx b/frontend/packages/yki/src/routers/AppRouter.tsx
@@ -1,27 +1,35 @@
-import { FC, useEffect } from 'react';
+import { FC, lazy, Suspense, useEffect } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { Notifier, ScrollToTop } from 'shared/components';
 import { APIResponseStatus } from 'shared/enums';
 
 import { Footer } from 'components/layouts/Footer';
 import { Header } from 'components/layouts/Header';
+import { LoadingFallback } from 'components/layouts/LoadingFallback';
 import { useCommonTranslation } from 'configs/i18n';
 import { useAppDispatch, useAppSelector } from 'configs/redux';
 import { AppRoutes } from 'enums/app';
 import { useAPIErrorToast } from 'hooks/useAPIErrorToast';
-import { AccessibilityStatementPage } from 'pages/AccessibilityStatementPage';
-import { EvaluationOrderPage } from 'pages/EvaluationOrderPage';
-import { EvaluationOrderStatusPage } from 'pages/EvaluationOrderStatusPage';
-import { ExamDetailsPage } from 'pages/ExamDetailsPage';
-import { InitRegistrationPage } from 'pages/InitRegistrationPage';
-import { LogoutSuccess } from 'pages/LogoutSuccess';
-import { NotFoundPage } from 'pages/NotFoundPage';
-import { ReassessmentPage } from 'pages/ReassessmentPage';
-import { RegistrationPage } from 'pages/RegistrationPage';
-import { RegistrationPaymentStatusPage } from 'pages/RegistrationPaymentStatusPage';
 import { loadSession } from 'redux/reducers/session';
 import { sessionSelector } from 'redux/selectors/session';
 
+const AccessibilityStatementPage = lazy(
+  () => import('pages/AccessibilityStatementPage')
+);
+const ExamDetailsPage = lazy(() => import('pages/ExamDetailsPage'));
+const EvaluationOrderPage = lazy(() => import('pages/EvaluationOrderPage'));
+const EvaluationOrderStatusPage = lazy(
+  () => import('pages/EvaluationOrderStatusPage')
+);
+const InitRegistrationPage = lazy(() => import('pages/InitRegistrationPage'));
+const LogoutSuccess = lazy(() => import('pages/LogoutSuccess'));
+const NotFoundPage = lazy(() => import('pages/NotFoundPage'));
+const ReassessmentPage = lazy(() => import('pages/ReassessmentPage'));
+const RegistrationPage = lazy(() => import('pages/RegistrationPage'));
+const RegistrationPaymentStatusPage = lazy(
+  () => import('pages/RegistrationPaymentStatusPage')
+);
+
 export const AppRouter: FC = () => {
   const translateCommon = useCommonTranslation();
   const sessionStatus = useAppSelector(sessionSelector).status;
@@ -47,45 +55,50 @@ export const AppRouter: FC = () => {
         <ScrollToTop />
         <main className="content" id="main-content">
           <div className="content__container">
-            <Routes>
-              <Route
-                path={AppRoutes.Registration}
-                element={<RegistrationPage />}
-              />
-              <Route
-                path={AppRoutes.ExamSession}
-                element={<InitRegistrationPage />}
-              />
-              <Route
-                path={AppRoutes.ExamSessionRegistration}
-                element={<ExamDetailsPage />}
-              />
-              <Route
-                path={AppRoutes.RegistrationPaymentStatus}
-                element={<RegistrationPaymentStatusPage />}
-              />
-              <Route
-                path={AppRoutes.Reassessment}
-                element={<ReassessmentPage />}
-              />
-              <Route
-                path={AppRoutes.ReassessmentOrder}
-                element={<EvaluationOrderPage />}
-              />
-              <Route
-                path={AppRoutes.ReassessmentOrderStatus}
-                element={<EvaluationOrderStatusPage />}
-              />
-              <Route
-                path={AppRoutes.AccessibilityStatementPage}
-                element={<AccessibilityStatementPage />}
-              />
-              <Route
-                path={AppRoutes.LogoutSuccess}
-                element={<LogoutSuccess />}
-              />
-              <Route path={AppRoutes.NotFoundPage} element={<NotFoundPage />} />
-            </Routes>
+            <Suspense fallback={<LoadingFallback />}>
+              <Routes>
+                <Route
+                  path={AppRoutes.Registration}
+                  element={<RegistrationPage />}
+                />
+                <Route
+                  path={AppRoutes.ExamSession}
+                  element={<InitRegistrationPage />}
+                />
+                <Route
+                  path={AppRoutes.ExamSessionRegistration}
+                  element={<ExamDetailsPage />}
+                />
+                <Route
+                  path={AppRoutes.RegistrationPaymentStatus}
+                  element={<RegistrationPaymentStatusPage />}
+                />
+                <Route
+                  path={AppRoutes.Reassessment}
+                  element={<ReassessmentPage />}
+                />
+                <Route
+                  path={AppRoutes.ReassessmentOrder}
+                  element={<EvaluationOrderPage />}
+                />
+                <Route
+                  path={AppRoutes.ReassessmentOrderStatus}
+                  element={<EvaluationOrderStatusPage />}
+                />
+                <Route
+                  path={AppRoutes.AccessibilityStatementPage}
+                  element={<AccessibilityStatementPage />}
+                />
+                <Route
+                  path={AppRoutes.LogoutSuccess}
+                  element={<LogoutSuccess />}
+                />
+                <Route
+                  path={AppRoutes.NotFoundPage}
+                  element={<NotFoundPage />}
+                />
+              </Routes>
+            </Suspense>
           </div>
         </main>
         <Footer />