Switch Loading and PageTitle to static imports

package.json

@@ -58,6 +58,7 @@
     "axios": "^1.7.7",
     "bowser": "^2.11.0",
     "browser-image-compression": "^2.0.2",
+    "browserslist": "^4.24.0",
     "browserslist-useragent-regexp": "^4.1.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

src/Components/ABDM/ConfigureHealthFacility.tsx

@@ -1,4 +1,4 @@
-import { lazy, useReducer, useState } from "react";
+import { useReducer, useState } from "react";
 import * as Notification from "../../Utils/Notifications.js";
 import { navigate } from "raviger";
 import { Submit } from "../Common/components/ButtonV2";
@@ -8,8 +8,7 @@ import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 import request from "../../Utils/request/request";
 import { FieldChangeEvent } from "../Form/FormFields/Utils.js";
-const Loading = lazy(() => import("../Common/Loading"));
-
+import Loading from "@/Components/Common/Loading";
 const initForm = {
   health_facility: null,
   hf_id: "",

src/Components/Assets/AssetImportModal.tsx

@@ -1,4 +1,4 @@
-import { useState, lazy } from "react";
+import { lazy, useState } from "react";
 import { sleep } from "../../Utils/utils";
 import { FacilityModel } from "../Facility/models";
 import { AssetData } from "./AssetTypes";

src/Components/Assets/AssetManage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, ReactElement, lazy } from "react";
+import { useState, useEffect, ReactElement } from "react";
 import {
   AssetClass,
   assetClassProps,
@@ -18,7 +18,7 @@ import { UserRole, USER_TYPES } from "../../Common/constants";
 import ConfirmDialog from "../Common/ConfirmDialog";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
 import { useTranslation } from "react-i18next";
-const Loading = lazy(() => import("../Common/Loading"));
+import Loading from "@/Components/Common/Loading";
 import * as Notification from "../../Utils/Notifications.js";
 import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
 import Uptime from "../Common/Uptime";

src/Components/Assets/AssetsList.tsx

@@ -1,7 +1,7 @@
 import { IDetectedBarcode, Scanner } from "@yudiel/react-qr-scanner";
 import * as Notification from "../../Utils/Notifications.js";
 import { assetClassProps, AssetData } from "./AssetTypes";
-import { useState, useEffect, lazy } from "react";
+import { useState, useEffect } from "react";
 import { Link, navigate } from "raviger";
 import AssetFilter from "./AssetFilter";
 import { parseQueryParams } from "../../Utils/primitives";
@@ -24,8 +24,7 @@ import request from "../../Utils/request/request";
 import routes from "../../Redux/api";
 import useQuery from "../../Utils/request/useQuery";
 
-const Loading = lazy(() => import("../Common/Loading"));
-
+import Loading from "@/Components/Common/Loading";
 const AssetsList = () => {
   const { t } = useTranslation();
   const {

src/Components/Facility/AddBedForm.tsx

@@ -1,6 +1,6 @@
 import Card from "../../CAREUI/display/Card";
 
-import { useState, lazy, SyntheticEvent } from "react";
+import { useState, SyntheticEvent } from "react";
 import * as Notification from "../../Utils/Notifications.js";
 import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
 import { SelectFormField } from "../Form/FormFields/SelectFormField";
@@ -15,8 +15,7 @@ import useAppHistory from "../../Common/hooks/useAppHistory";
 import request from "../../Utils/request/request";
 import { useTranslation } from "react-i18next";
 
-const Loading = lazy(() => import("../Common/Loading"));
-
+import Loading from "@/Components/Common/Loading";
 interface Props {
   facilityId: string;
   locationId: string;

src/Components/Facility/AddInventoryForm.tsx

@@ -1,4 +1,4 @@
-import { useReducer, useState, useEffect, lazy } from "react";
+import { useReducer, useState, useEffect } from "react";
 import Card from "../../CAREUI/display/Card";
 import * as Notification from "../../Utils/Notifications.js";
 import Page from "../Common/components/Page";
@@ -11,8 +11,7 @@ import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 import request from "../../Utils/request/request";
 
-const Loading = lazy(() => import("../Common/Loading"));
-
+import Loading from "@/Components/Common/Loading";
 const initForm = {
   id: "",
   quantity: "",

src/Components/Facility/AddLocationForm.tsx

@@ -1,4 +1,4 @@
-import { useState, lazy, SyntheticEvent } from "react";
+import { useState, SyntheticEvent } from "react";
 import * as Notification from "../../Utils/Notifications.js";
 import { navigate } from "raviger";
 import { Submit, Cancel } from "../Common/components/ButtonV2";
@@ -11,8 +11,7 @@ import useQuery from "../../Utils/request/useQuery";
 import routes from "../../Redux/api";
 import request from "../../Utils/request/request";
 
-const Loading = lazy(() => import("../Common/Loading"));
-
+import Loading from "@/Components/Common/Loading";
 interface Props {
   facilityId: string;
   locationId?: string;

src/Components/Facility/AssetCreate.tsx

@@ -7,7 +7,6 @@ import {
   MutableRefObject,
   RefObject,
   createRef,
-  lazy,
   useEffect,
   useReducer,
   useState,
@@ -37,8 +36,7 @@ import routes from "../../Redux/api.js";
 import request from "../../Utils/request/request.js";
 import { useTranslation } from "react-i18next";
 
-const Loading = lazy(() => import("../Common/Loading"));
-
+import Loading from "@/Components/Common/Loading";
 const formErrorKeys = [
   "name",
   "asset_class",

src/Components/Facility/BedManagement.tsx

@@ -1,4 +1,4 @@
-import { lazy, useState } from "react";
+import { useState } from "react";
 import ButtonV2 from "../Common/components/ButtonV2";
 import { BedModel } from "./models";
 import { ReactElement } from "react";
@@ -13,8 +13,7 @@ import routes from "../../Redux/api";
 import useQuery from "../../Utils/request/useQuery";
 import useFilters from "../../Common/hooks/useFilters";
 import useAuthUser from "../../Common/hooks/useAuthUser";
-const Loading = lazy(() => import("../Common/Loading"));
-
+import Loading from "@/Components/Common/Loading";
 interface BedManagementProps {
   facilityId: string;
   locationId: string;

src/Components/Facility/ConsultationClaims.tsx

@@ -2,7 +2,7 @@ import * as Notification from "../../Utils/Notifications";
 
 import ClaimCard from "../HCX/ClaimCard";
 import CreateClaimCard from "../HCX/CreateClaimCard";
-import PageTitle from "../Common/PageTitle";
+import PageTitle from "@/Components/Common/PageTitle";
 import { navigate } from "raviger";
 import routes from "../../Redux/api";
 import { useMessageListener } from "../../Common/hooks/useMessageListener";

src/Components/Facility/ConsultationDetails/ConsultationABGTab.tsx

@@ -1,8 +1,7 @@
-import { lazy } from "react";
 import { ConsultationTabProps } from "./index";
 import { ABGPlots } from "../Consultations/ABGPlots";
 
-const PageTitle = lazy(() => import("../../Common/PageTitle"));
+import PageTitle from "@/Components/Common/PageTitle";
 
 export const ConsultationABGTab = (props: ConsultationTabProps) => {
   return (

src/Components/Facility/ConsultationDetails/ConsultationDialysisTab.tsx

@@ -1,8 +1,7 @@
-import { lazy } from "react";
 import { ConsultationTabProps } from "./index";
 import { DialysisPlots } from "../Consultations/DialysisPlots";
 
-const PageTitle = lazy(() => import("../../Common/PageTitle"));
+import PageTitle from "@/Components/Common/PageTitle";
 
 export const ConsultationDialysisTab = (props: ConsultationTabProps) => {
   return (

src/Components/Facility/ConsultationDetails/ConsultationInvestigationsTab.tsx

@@ -1,4 +1,3 @@
-import { lazy } from "react";
 import { ConsultationTabProps } from "./index";
 import { NonReadOnlyUsers } from "../../../Utils/AuthorizeFor";
 import ButtonV2 from "../../Common/components/ButtonV2";
@@ -7,7 +6,7 @@ import CareIcon from "../../../CAREUI/icons/CareIcon";
 import InvestigationTab from "../Investigations/investigationsTab";
 import { t } from "i18next";
 
-const PageTitle = lazy(() => import("../../Common/PageTitle"));
+import PageTitle from "@/Components/Common/PageTitle";
 export const ConsultationInvestigationsTab = (props: ConsultationTabProps) => {
   return (
     <div>

src/Components/Facility/ConsultationDetails/ConsultationNeurologicalMonitoringTab.tsx

@@ -1,8 +1,7 @@
-import { lazy } from "react";
 import { NeurologicalTable } from "../Consultations/NeurologicalTables";
 import { ConsultationTabProps } from "./index";
 
-const PageTitle = lazy(() => import("../../Common/PageTitle"));
+import PageTitle from "@/Components/Common/PageTitle";
 
 export const ConsultationNeurologicalMonitoringTab = (
   props: ConsultationTabProps,

src/Components/Facility/ConsultationDetails/ConsultationNursingTab.tsx

@@ -1,4 +1,4 @@
-import { lazy, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { ConsultationTabProps } from "./index";
 import { NursingPlot } from "../Consultations/NursingPlot";
 import { useTranslation } from "react-i18next";
@@ -10,7 +10,7 @@ import { classNames, formatDate, formatTime } from "../../../Utils/utils";
 import Pagination from "../../Common/Pagination";
 import { PAGINATION_LIMIT } from "../../../Common/constants";
 
-const PageTitle = lazy(() => import("../../Common/PageTitle"));
+import PageTitle from "@/Components/Common/PageTitle";
 
 export default function ConsultationNursingTab(props: ConsultationTabProps) {
   const { t } = useTranslation();

src/Components/Facility/ConsultationDetails/ConsultationNutritionTab.tsx

@@ -1,8 +1,7 @@
-import { lazy } from "react";
 import { ConsultationTabProps } from "./index";
 import { NutritionPlots } from "../Consultations/NutritionPlots";
 
-const PageTitle = lazy(() => import("../../Common/PageTitle"));
+import PageTitle from "@/Components/Common/PageTitle";
 
 export const ConsultationNutritionTab = (props: ConsultationTabProps) => {
   return (

src/Components/Facility/ConsultationDetails/ConsultationPressureSoreTab.tsx

@@ -1,8 +1,7 @@
-import { lazy } from "react";
 import { ConsultationTabProps } from "./index";
 import { PressureSoreDiagrams } from "../Consultations/PressureSoreDiagrams";
 
-const PageTitle = lazy(() => import("../../Common/PageTitle"));
+import PageTitle from "@/Components/Common/PageTitle";
 
 export const ConsultationPressureSoreTab = (props: ConsultationTabProps) => {
   return (

src/Components/Facility/ConsultationDetails/ConsultationSummaryTab.tsx

@@ -1,8 +1,7 @@
-import { lazy } from "react";
 import { ConsultationTabProps } from "./index";
 import { PrimaryParametersPlot } from "../Consultations/PrimaryParametersPlot";
 
-const PageTitle = lazy(() => import("../../Common/PageTitle"));
+import PageTitle from "@/Components/Common/PageTitle";
 
 export const ConsultationSummaryTab = (props: ConsultationTabProps) => {
   return (

src/Components/Facility/ConsultationDetails/ConsultationUpdatesTab.tsx

@@ -1,4 +1,4 @@
-import { lazy, useState } from "react";
+import { useState } from "react";
 import { ConsultationTabProps } from "./index";
 import { AssetBedModel, AssetClass, AssetData } from "../../Assets/AssetTypes";
 import { BedModel } from "../models";
@@ -25,7 +25,7 @@ import CareIcon from "../../../CAREUI/icons/CareIcon";
 import EncounterSymptomsCard from "../../Symptoms/SymptomsCard";
 import Tabs from "../../Common/components/Tabs";
 
-const PageTitle = lazy(() => import("../../Common/PageTitle"));
+import PageTitle from "@/Components/Common/PageTitle";
 
 export const ConsultationUpdatesTab = (props: ConsultationTabProps) => {
   const [hl7SocketUrl, setHL7SocketUrl] = useState<string>();

src/Components/Facility/ConsultationDetails/ConsultationVentilatorTab.tsx

@@ -1,8 +1,7 @@
-import { lazy } from "react";
 import { ConsultationTabProps } from "./index";
 import { VentilatorPlot } from "../Consultations/VentilatorPlot";
 
-const PageTitle = lazy(() => import("../../Common/PageTitle"));
+import PageTitle from "@/Components/Common/PageTitle";
 
 export const ConsultationVentilatorTab = (props: ConsultationTabProps) => {
   return (

src/Components/Facility/ConsultationDetails/index.tsx

@@ -6,7 +6,7 @@ import {
   listAssetBeds,
 } from "../../../Redux/actions";
 import { statusType, useAbortableEffect } from "../../../Common/utils";
-import { lazy, useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 import DoctorVideoSlideover from "../DoctorVideoSlideover";
 import { PatientModel } from "../../Patient/models";
 import {
@@ -46,8 +46,8 @@ import { CameraFeedPermittedUserTypes } from "../../../Utils/permissions";
 import Error404 from "../../ErrorPages/404";
 import { useTranslation } from "react-i18next";
 
-const Loading = lazy(() => import("../../Common/Loading"));
-const PageTitle = lazy(() => import("../../Common/PageTitle"));
+import Loading from "@/Components/Common/Loading";
+import PageTitle from "@/Components/Common/PageTitle";
 
 export interface ConsultationTabProps {
   consultationId: string;

src/Components/Facility/ConsultationForm.tsx

@@ -15,7 +15,7 @@ import { FieldErrorText, FieldLabel } from "../Form/FormFields/FormField";
 import InvestigationBuilder, {
   InvestigationType,
 } from "../Common/prescription-builder/InvestigationBuilder";
-import { LegacyRef, createRef, lazy, useEffect, useRef, useState } from "react";
+import { LegacyRef, createRef, useEffect, useRef, useState } from "react";
 import ProcedureBuilder, {
   ProcedureType,
 } from "../Common/prescription-builder/ProcedureBuilder";
@@ -66,8 +66,8 @@ import {
 } from "../Symptoms/SymptomsBuilder.js";
 import careConfig from "@careConfig";
 
-const Loading = lazy(() => import("../Common/Loading"));
-const PageTitle = lazy(() => import("../Common/PageTitle"));
+import Loading from "@/Components/Common/Loading";
+import PageTitle from "@/Components/Common/PageTitle";
 
 type BooleanStrings = "true" | "false";
 

src/Components/Facility/Consultations/PrimaryParametersPlot.tsx

@@ -8,7 +8,7 @@ import { PAGINATION_LIMIT } from "../../../Common/constants";
 import { formatDateTime } from "../../../Utils/utils";
 import CareIcon from "../../../CAREUI/icons/CareIcon";
 import { PainDiagrams } from "./PainDiagrams";
-import PageTitle from "../../Common/PageTitle";
+import PageTitle from "@/Components/Common/PageTitle";
 import dayjs from "../../../Utils/dayjs";
 import { meanArterialPressure } from "../../Common/BloodPressureFormField";
 import { PrimaryParametersPlotFields } from "../models";

src/Components/Facility/FacilityConfigure.tsx

@@ -1,4 +1,4 @@
-import { lazy, useReducer, useState } from "react";
+import { useReducer, useState } from "react";
 import * as Notification from "../../Utils/Notifications.js";
 import { navigate } from "raviger";
 import { Submit } from "../Common/components/ButtonV2";
@@ -10,8 +10,7 @@ import routes from "../../Redux/api";
 import request from "../../Utils/request/request";
 import { FieldChangeEvent } from "../Form/FormFields/Utils.js";
 import { t } from "i18next";
-const Loading = lazy(() => import("../Common/Loading"));
-
+import Loading from "@/Components/Common/Loading";
 const initForm = {
   name: "",
   state: 0,

src/Components/Facility/FacilityCreate.tsx

@@ -23,7 +23,7 @@ import {
   PopoverPanel,
   Transition,
 } from "@headlessui/react";
-import { lazy, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Steps, { Step } from "../Common/Steps";
 import {
   getPincodeDetails,
@@ -65,8 +65,7 @@ import useAuthUser from "../../Common/hooks/useAuthUser";
 import SpokeFacilityEditor from "./SpokeFacilityEditor.js";
 import careConfig from "@careConfig";
 
-const Loading = lazy(() => import("../Common/Loading"));
-
+import Loading from "@/Components/Common/Loading";
 interface FacilityProps {
   facilityId?: string;
 }

src/Components/Facility/FacilityHome.tsx

@@ -4,7 +4,7 @@ import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
 import { FacilityModel } from "./models";
 import { FACILITY_FEATURE_TYPES, USER_TYPES } from "../../Common/constants";
 import DropdownMenu, { DropdownItem } from "../Common/components/Menu";
-import { lazy, useState } from "react";
+import { useState } from "react";
 
 import ButtonV2 from "../Common/components/ButtonV2";
 import CareIcon from "../../CAREUI/icons/CareIcon";
@@ -42,8 +42,7 @@ type Props = {
   facilityId: string;
 };
 
-const Loading = lazy(() => import("../Common/Loading"));
-
+import Loading from "@/Components/Common/Loading";
 export const getFacilityFeatureIcon = (featureId: number) => {
   const feature = FACILITY_FEATURE_TYPES.find((f) => f.id === featureId);
   if (!feature?.icon) return null;

src/Components/Facility/FacilityUsers.tsx

@@ -1,4 +1,4 @@
-import { lazy, useState } from "react";
+import { useState } from "react";
 import CountBlock from "../../CAREUI/display/Count";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { RESULTS_PER_PAGE_LIMIT } from "../../Common/constants";
@@ -17,8 +17,7 @@ import useQuery from "../../Utils/request/useQuery";
 import { UserFacilities } from "../Users/ManageUsers";
 import { useTranslation } from "react-i18next";
 
-const Loading = lazy(() => import("../Common/Loading"));
-
+import Loading from "@/Components/Common/Loading";
 export default function FacilityUsers(props: any) {
   const { t } = useTranslation();
   const { facilityId } = props;