Improve code splitting

package.json

@@ -80,6 +80,7 @@
     "hi-profiles": "^1.1.0",
     "i18next": "^23.11.4",
     "i18next-browser-languagedetector": "^7.2.1",
+    "i18next-xhr-backend": "^3.2.2",
     "lodash-es": "^4.17.21",
     "postcss-loader": "^7.3.3",
     "qrcode.react": "^3.1.0",
@@ -168,4 +169,4 @@
     "node": ">=20.12.0"
   },
   "packageManager": "[email protected]"
-}
+}

src/PluginEngine.tsx

@@ -4,14 +4,15 @@ import React, { Suspense } from "react";
 import { SupportedPluginComponents, pluginMap } from "./pluginTypes";
 
 import ErrorBoundary from "@/components/Common/ErrorBoundary";
+import Loading from "./components/Common/Loading";
 
 export default function PluginEngine({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <Suspense fallback={<div>Loading plugins...</div>}>
+    <Suspense fallback={<Loading />}>
       <ErrorBoundary
         fallback={
           <div className="flex h-screen w-screen items-center justify-center">

src/Routers/SessionRouter.tsx

@@ -1,8 +1,11 @@
-import { Login, ResetPassword } from "@/components/Auth";
+import { lazy } from "react";
 import { useRoutes } from "raviger";
 import SessionExpired from "@/components/ErrorPages/SessionExpired";
 import InvalidReset from "@/components/ErrorPages/InvalidReset";
-import LicensesPage from "@/components/Licenses/LicensesPage";
+import ResetPassword from "@/components/Auth/ResetPassword";
+
+const LicensesPage = lazy(() => import("@/components/Licenses/LicensesPage"));
+const Login = lazy(() => import("@/components/Auth/Login"));
 
 const routes = {
   "/": () => <Login />,

src/components/Auth/Login.tsx

@@ -15,8 +15,9 @@ import FiltersCache from "../../Utils/FiltersCache";
 import { classNames } from "../../Utils/utils";
 import BrowserWarning from "../ErrorPages/BrowserWarning";
 import careConfig from "@careConfig";
+import { Link } from "raviger";
 
-export const Login = (props: { forgot?: boolean }) => {
+const Login = (props: { forgot?: boolean }) => {
   const { signIn } = useAuthContext();
   const {
     mainLogo,
@@ -247,14 +248,14 @@ export const Login = (props: { forgot?: boolean }) => {
                 {t("contribute_github")}
               </a>
               <span className="mx-2 text-primary-400">|</span>
-              <a
+              <Link
                 href="/licenses"
                 target="_blank"
                 rel="noopener noreferrer"
                 className="text-primary-400 hover:text-primary-500"
               >
                 {t("third_party_software_licenses")}
-              </a>
+              </Link>
             </div>
           </div>
         </div>
@@ -417,3 +418,5 @@ export const Login = (props: { forgot?: boolean }) => {
     </div>
   );
 };
+
+export default Login;

src/components/Auth/ResetPassword.tsx

@@ -10,7 +10,7 @@ import { validateRule } from "../Users/UserAdd";
 import { validatePassword } from "@/common/validation";
 import routes from "../../Redux/api";
 
-export const ResetPassword = (props: any) => {
+const ResetPassword = (props: any) => {
   const initForm: any = {
     password: "",
     confirm: "",
@@ -169,3 +169,5 @@ export const ResetPassword = (props: any) => {
     </div>
   );
 };
+
+export default ResetPassword;

src/components/Common/FilePreviewDialog.tsx

@@ -1,11 +1,19 @@
 import CircularProgress from "./components/CircularProgress";
 import { useTranslation } from "react-i18next";
 import { StateInterface } from "../Files/FileUpload";
-import { Dispatch, ReactNode, SetStateAction, useState } from "react";
+import {
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  useState,
+  lazy,
+  Suspense,
+} from "react";
 import CareIcon, { IconName } from "../../CAREUI/icons/CareIcon";
 import ButtonV2, { Cancel } from "./components/ButtonV2";
 import DialogModal from "./Dialog";
-import PDFViewer from "./PDFViewer";
+
+const PDFViewer = lazy(() => import("@/components/Common/PDFViewer"));
 
 export const zoom_values = [
   "scale-25",
@@ -135,14 +143,16 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                   } ${getRotationClass(file_state.rotation)}`}
                 />
               ) : file_state.extension === "pdf" ? (
-                <PDFViewer
-                  url={fileUrl}
-                  onDocumentLoadSuccess={(numPages: number) => {
-                    setPage(1);
-                    setNumPages(numPages);
-                  }}
-                  pageNumber={page}
-                />
+                <Suspense fallback={<CircularProgress />}>
+                  <PDFViewer
+                    url={fileUrl}
+                    onDocumentLoadSuccess={(numPages: number) => {
+                      setPage(1);
+                      setNumPages(numPages);
+                    }}
+                    pageNumber={page}
+                  />
+                </Suspense>
               ) : previewExtensions.includes(file_state.extension) ? (
                 <iframe
                   sandbox=""

src/components/Facility/Consultations/components/LinePlot.tsx

@@ -1,33 +1,10 @@
-import ReactEchartsCore from "echarts-for-react/lib/core";
-import { BarChart, LineChart } from "echarts/charts";
-import {
-  DataZoomComponent,
-  GridComponent,
-  LegendComponent,
-  TitleComponent,
-  ToolboxComponent,
-  TooltipComponent,
-  VisualMapComponent,
-  VisualMapPiecewiseComponent,
-} from "echarts/components";
+import { lazy } from "react";
 
-import * as echarts from "echarts/core";
-import { CanvasRenderer } from "echarts/renderers";
 import { properRoundOf } from "../../../../Utils/utils";
-echarts.use([
-  BarChart,
-  LineChart,
-  CanvasRenderer,
-  DataZoomComponent,
-  GridComponent,
-  LegendComponent,
-  LegendComponent,
-  TitleComponent,
-  ToolboxComponent,
-  TooltipComponent,
-  VisualMapComponent,
-  VisualMapPiecewiseComponent,
-]);
+
+const ReactEcharts = lazy(
+  () => import("@/components/Facility/Consultations/components/ReactEcharts"),
+);
 
 export const LinePlot = (props: any) => {
   const {
@@ -234,8 +211,7 @@ export const LinePlot = (props: any) => {
           {value ? properRoundOf(value) : "NA"}
         </span>
       ))}
-      <ReactEchartsCore
-        echarts={echarts}
+      <ReactEcharts
         option={generalOptions}
         className={props.classes}
         lazyUpdate={props.type === "WAVEFORM"}

src/components/Facility/Consultations/components/ReactEcharts.tsx

@@ -0,0 +1,41 @@
+import { EChartsReactProps } from "echarts-for-react";
+import ReactEchartsCore from "echarts-for-react/lib/core";
+import { BarChart, LineChart } from "echarts/charts";
+import {
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+  VisualMapPiecewiseComponent,
+} from "echarts/components";
+
+import * as echarts from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+echarts.use([
+  BarChart,
+  LineChart,
+  CanvasRenderer,
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  VisualMapComponent,
+  VisualMapPiecewiseComponent,
+]);
+
+interface ReactEchartsProps extends EChartsReactProps {
+  echarts?: any;
+}
+
+export default function ReactEcharts(props: ReactEchartsProps) {
+  if (!props.echarts) {
+    props.echarts = echarts;
+  }
+  return <ReactEchartsCore {...props} />;
+}

src/components/Facility/Consultations/components/StackedLinePlot.tsx

@@ -1,32 +1,9 @@
-import ReactEchartsCore from "echarts-for-react/lib/core";
-import { BarChart, LineChart } from "echarts/charts";
-import {
-  DataZoomComponent,
-  GridComponent,
-  LegendComponent,
-  TitleComponent,
-  ToolboxComponent,
-  TooltipComponent,
-  VisualMapComponent,
-  VisualMapPiecewiseComponent,
-} from "echarts/components";
+import { lazy } from "react";
+
+const ReactEcharts = lazy(
+  () => import("@/components/Facility/Consultations/components/ReactEcharts"),
+);
 
-import * as echarts from "echarts/core";
-import { CanvasRenderer } from "echarts/renderers";
-echarts.use([
-  BarChart,
-  LineChart,
-  CanvasRenderer,
-  DataZoomComponent,
-  GridComponent,
-  LegendComponent,
-  LegendComponent,
-  TitleComponent,
-  ToolboxComponent,
-  TooltipComponent,
-  VisualMapComponent,
-  VisualMapPiecewiseComponent,
-]);
 const COLORS = ["#B13F3C", "#2F8B35", "#44327A", "#B19D3C"];
 
 export const StackedLinePlot = (props: any) => {
@@ -108,5 +85,5 @@ export const StackedLinePlot = (props: any) => {
     },
     series: series,
   };
-  return <ReactEchartsCore echarts={echarts} option={generalOptions} />;
+  return <ReactEcharts option={generalOptions} />;
 };