Merge remote-tracking branch 'tik/dev'

Author: aapolaakkio

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2.1.0-beta.3
+
+**Bug fixes and improvements:**
+
+- Enabled code splitting for the frontend, halving the initial page load from its previous size
+
 ## 2.1.0-beta.2
 
 **Bug fixes and improvements:**

package.json

@@ -70,7 +70,8 @@
     },
     "overrides": {
       "react-final-form@6.5.9>react": "^19.2.0",
-      "react-final-form-arrays@3.1.4>react": "^19.2.0"
+      "react-final-form-arrays@3.1.4>react": "^19.2.0",
+      "email-templates@*>preview-email": "0.0.0"
     }
   }
 }

packages/ilmomasiina-client/src/api.ts

@@ -1,4 +1,4 @@
-import { ErrorCode } from "@tietokilta/ilmomasiina-models";
+import type { ErrorCode } from "@tietokilta/ilmomasiina-models";
 
 export interface FetchOptions {
   method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";

packages/ilmomasiina-frontend/src/components/Header/Logout.tsx

@@ -0,0 +1,23 @@
+import React, { useCallback } from "react";
+
+import { Button } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
+
+import { loginToast } from "../../modules/auth";
+import useStore from "../../modules/store";
+import paths from "../../paths";
+
+export default function Logout() {
+  const { loggedIn, resetAuth } = useStore((state) => state.auth);
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  const logout = useCallback(() => {
+    resetAuth();
+    loginToast("success", t("auth.logoutSuccess"), 2000);
+    navigate(paths.adminLogin);
+  }, [resetAuth, navigate, t]);
+
+  return loggedIn ? <Button onClick={logout}>{t("header.logout")}</Button> : null;
+}

packages/ilmomasiina-frontend/src/components/Header/index.tsx

@@ -1,32 +1,25 @@
-import React, { useCallback } from "react";
+import React, { lazy, Suspense } from "react";
 
 import { Button, Container, Navbar } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import { Link, useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 import logo from "../../assets/logo.svg";
 import branding from "../../branding";
 import i18n from "../../i18n";
-import { loginToast } from "../../modules/auth";
-import useStore from "../../modules/store";
 import paths from "../../paths";
 
 import "./Header.scss";
 
+// Code-split Logout to avoid strong dependency on the store.
+const Logout = lazy(() => import("./Logout"));
+
 const Header = () => {
-  const { loggedIn, resetAuth } = useStore((state) => state.auth);
-  const navigate = useNavigate();
   const {
     i18n: { language },
     t,
   } = useTranslation();
 
-  const logout = useCallback(() => {
-    resetAuth();
-    loginToast("success", i18n.t("auth.logoutSuccess"), 2000);
-    navigate(paths.adminLogin);
-  }, [resetAuth, navigate]);
-
   return (
     <Navbar>
       <Container className="gap-sm-2">
@@ -41,7 +34,9 @@ const Header = () => {
         {language !== "en" && (
           <Button onClick={() => i18n.changeLanguage("en")}>{t("header.switchLanguage", { lng: "en" })}</Button>
         )}
-        {loggedIn && <Button onClick={logout}>{t("header.logout")}</Button>}
+        <Suspense>
+          <Logout />
+        </Suspense>
       </Container>
     </Navbar>
   );

packages/ilmomasiina-frontend/src/containers/AppContainer.tsx

@@ -1,43 +1,45 @@
-import React, { useEffect } from "react";
+import React, { lazy, Suspense } from "react";
 
-import { Container } from "react-bootstrap";
+import { Container, Spinner } from "react-bootstrap";
 import { BrowserRouter, Route, Routes } from "react-router";
 import { Flip, ToastContainer } from "react-toastify";
 
 import Footer from "../components/Footer";
 import Header from "../components/Header";
-import useStore from "../modules/store";
 import paths from "../paths";
 import PageNotFound from "../routes/404/PageNotFound";
-import AdminEventsList from "../routes/AdminEventsList";
-import AdminUsersList from "../routes/AdminUsers";
-import AuditLog from "../routes/AuditLog";
-import Editor from "../routes/Editor";
-import EditSignup from "../routes/EditSignup";
-import EventList from "../routes/EventList";
-import InitialSetup from "../routes/InitialSetup";
-import Login from "../routes/Login";
-import SingleEvent from "../routes/SingleEvent";
 
 import "react-toastify/dist/ReactToastify.css";
 import "../styles/app.scss";
 
-const LOGIN_RENEW_INTERVAL = 60 * 1000;
+// Code-split route components.
+const AdminEventsList = lazy(() => import("../routes/AdminEventsList"));
+const AdminUsersList = lazy(() => import("../routes/AdminUsers"));
+const AuditLog = lazy(() => import("../routes/AuditLog"));
+const Editor = lazy(() => import("../routes/Editor"));
+const EditSignup = lazy(() => import("../routes/EditSignup"));
+const EventList = lazy(() => import("../routes/EventList"));
+const InitialSetup = lazy(() => import("../routes/InitialSetup"));
+const Login = lazy(() => import("../routes/Login"));
+const SingleEvent = lazy(() => import("../routes/SingleEvent"));
 
-const AppContainer = () => {
-  const renewLogin = useStore((state) => state.auth.renewLogin);
-  useEffect(() => {
-    // Renew login immediately on page load if necessary.
-    renewLogin();
-    // Then, check every minute and renew if necessary.
-    const timer = window.setInterval(() => renewLogin(), LOGIN_RENEW_INTERVAL);
-    return () => window.clearTimeout(timer);
-  }, [renewLogin]);
+// Also code-split RenewLogin to avoid strong dependency on the store.
+const RenewLogin = lazy(() => import("./RenewLogin"));
 
-  return (
-    <BrowserRouter>
-      <div className="layout-wrapper">
-        <Header />
+const loadingFallback = (
+  <div className="ilmo--loading-container">
+    <Spinner animation="border" />
+  </div>
+);
+
+const AppContainer = () => (
+  <BrowserRouter>
+    <Suspense>
+      <RenewLogin />
+    </Suspense>
+    <div className="layout-wrapper">
+      <Header />
+      <Suspense fallback={loadingFallback}>
         <Container>
           <Routes>
             <Route path={paths.eventsList} element={<EventList />} />
@@ -53,22 +55,22 @@ const AppContainer = () => {
             <Route path="*" element={<PageNotFound />} />
           </Routes>
         </Container>
-        <Footer />
-        <ToastContainer
-          position="top-right"
-          autoClose={5000}
-          hideProgressBar={false}
-          newestOnTop={false}
-          closeOnClick
-          rtl={false}
-          pauseOnFocusLoss
-          draggable
-          pauseOnHover
-          transition={Flip}
-        />
-      </div>
-    </BrowserRouter>
-  );
-};
+      </Suspense>
+      <Footer />
+      <ToastContainer
+        position="top-right"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+        transition={Flip}
+      />
+    </div>
+  </BrowserRouter>
+);
 
 export default AppContainer;

packages/ilmomasiina-frontend/src/containers/RenewLogin.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+
+import useStore from "../modules/store";
+
+const LOGIN_RENEW_INTERVAL = 60 * 1000;
+
+/** Auto-renews the auth token periodically while the page is active. */
+export default function RenewLogin() {
+  const renewLogin = useStore((state) => state.auth.renewLogin);
+  useEffect(() => {
+    // Renew login immediately on page load if necessary.
+    renewLogin();
+    // Then, check every minute and renew if necessary.
+    const timer = window.setInterval(() => renewLogin(), LOGIN_RENEW_INTERVAL);
+    return () => window.clearInterval(timer);
+  }, [renewLogin]);
+
+  return null;
+}

packages/ilmomasiina-frontend/src/i18n.ts

@@ -2,7 +2,8 @@ import i18n, { DefaultNamespace, ParseKeys } from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
 import { initReactI18next } from "react-i18next";
 
-import { i18nResources as componentsRes } from "@tietokilta/ilmomasiina-client";
+// Import via full path to reduce entry chunk size.
+import { i18nResources as componentsRes } from "@tietokilta/ilmomasiina-client/dist/locales";
 import en from "./locales/en.json";
 import fi from "./locales/fi.json";
 

packages/ilmomasiina-frontend/src/index.tsx

@@ -5,7 +5,8 @@ import ReactDOM from "react-dom/client";
 
 import "./i18n";
 
-import { configureApi } from "@tietokilta/ilmomasiina-client";
+// Import via full path to reduce entry chunk size.
+import { configureApi } from "@tietokilta/ilmomasiina-client/dist/api";
 import AppContainer from "./containers/AppContainer";
 import { apiUrl } from "./paths";
 

packages/ilmomasiina-frontend/src/paths.tsx

@@ -1,4 +1,4 @@
-import { EventID, EventSlug, SignupEditToken, SignupID } from "@tietokilta/ilmomasiina-models";
+import type { EventID, EventSlug, SignupEditToken, SignupID } from "@tietokilta/ilmomasiina-models";
 
 export const urlPrefix = PATH_PREFIX;