From 5e47c8839f1132cca64e82ecaa6b8440d42df2d2 Mon Sep 17 00:00:00 2001 From: Colin Dawson Date: Wed, 18 Mar 2026 16:39:21 +0000 Subject: [PATCH] Replaced the custom loading code with reacts build in suspense --- src/components/common/Loading.tsx | 17 -- src/components/common/TemplateFiller.tsx | 7 +- src/modules/audit/audit.tsx | 14 +- src/modules/frame/components/Mainframe.tsx | 7 +- .../customfields/customFieldDetails.tsx | 5 +- .../manager/customfields/customFields.tsx | 18 +- src/modules/manager/domains/Domains.tsx | 15 +- .../domains/components/AddUserToRole.tsx | 27 ++- .../manager/domains/components/GeneralTab.tsx | 167 +++++++++--------- .../domains/components/MailTemplatesTab.tsx | 18 +- .../domains/components/RoleAccessEditor.tsx | 19 +- .../domains/components/RolesDetails.tsx | 5 +- .../domains/components/RolesEditor.tsx | 15 +- .../domains/components/UserRoleEditor.tsx | 9 +- src/modules/manager/forms/Forms.tsx | 18 +- src/modules/manager/forms/FormsDetails.tsx | 5 +- .../manager/glossary/GlossariesDetails.tsx | 5 +- src/modules/manager/glossary/Glossary.tsx | 10 +- .../manager/organisations/Organisations.tsx | 18 +- .../organisations/OrganisationsDetails.tsx | 5 +- .../manager/sequence/SequenceDetails.tsx | 7 +- src/modules/manager/sequence/sequence.tsx | 18 +- src/modules/manager/sites/SiteDetails.tsx | 7 +- src/modules/manager/sites/Sites.tsx | 18 +- .../manager/specifications/Specifications.tsx | 19 +- .../specifications/SpecificationsDetails.tsx | 7 +- .../manager/ssoManager/SsoProviderDetails.tsx | 5 +- src/modules/manager/ssoManager/ssoManager.tsx | 18 +- .../task/assignments/AssignmentComplete.tsx | 9 +- src/modules/manager/tasks/tasks.tsx | 31 +--- .../manager/users/components/GeneralTab.tsx | 5 +- src/modules/manager/users/users.tsx | 18 +- .../WorkflowTemplateDetails.tsx | 45 +++-- .../WorkflowTemplateManager.tsx | 18 +- .../profile/components/InternalProfile.tsx | 6 +- 35 files changed, 195 insertions(+), 440 deletions(-) delete mode 100644 src/components/common/Loading.tsx diff --git a/src/components/common/Loading.tsx b/src/components/common/Loading.tsx deleted file mode 100644 index 0e5d62d..0000000 --- a/src/components/common/Loading.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from "react"; -import LoadingPanel from "./LoadingPanel"; - -interface Loading2Props { - loaded: boolean; - children: React.ReactNode; -} - -const Loading: React.FC = ({ loaded, children }) => { - if (!loaded) { - return ; - } - - return <>{children}; -}; - -export default Loading; diff --git a/src/components/common/TemplateFiller.tsx b/src/components/common/TemplateFiller.tsx index 8f6d633..aacee29 100644 --- a/src/components/common/TemplateFiller.tsx +++ b/src/components/common/TemplateFiller.tsx @@ -13,7 +13,6 @@ import formsService, { import parse, { HTMLReactParserOptions, domToReact } from "html-react-parser"; import { CustomField } from "../../modules/manager/customfields/services/customFieldsService"; import { toast } from "react-toastify"; -import Loading from "./Loading"; import { renderCustomField } from "./formHelpers"; import { CustomFieldValue } from "../../modules/manager/glossary/services/glossaryService"; import { useTranslation } from "react-i18next"; @@ -259,11 +258,7 @@ const TemplateFiller = forwardRef( parsedDefinition = parseDefinition(template.definition, customFields); else parsedDefinition = <>; - return ( - -
{parsedDefinition}
- - ); + return
{parsedDefinition}
; }, ); diff --git a/src/modules/audit/audit.tsx b/src/modules/audit/audit.tsx index 62abf2c..5c735c0 100644 --- a/src/modules/audit/audit.tsx +++ b/src/modules/audit/audit.tsx @@ -3,7 +3,6 @@ import Column from "../../components/common/columns"; import { Paginated } from "../../services/Paginated"; import AuditTable from "./components/auditTable"; import auditService, { AuditLogEntry } from "./services/auditService"; -import Loading from "../../components/common/Loading"; import { useLocation, useParams } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { Namespaces } from "../../i18n/i18n"; @@ -13,7 +12,6 @@ export default function Audit() { const params = useParams(); const { t } = useTranslation(Namespaces.Common); - const [loaded, setLoaded] = useState(false); const [pagedData, setPagedData] = useState>({ page: 1, pageSize: 10, @@ -48,9 +46,6 @@ export default function Audit() { if (result) { setPagedData(result); - setLoaded(true); - } else { - setLoaded(false); } }, [ pagedData.page, @@ -67,12 +62,10 @@ export default function Audit() { page, pageSize, })); - setLoaded(false); }; const onSort = async (column: Column) => { setSortColumn(column); - setLoaded(false); }; const onSearch = async (name: string, value: string) => { @@ -81,7 +74,6 @@ export default function Audit() { updated.set(name, value); return updated; }); - setLoaded(false); }; // Load data on mount and whenever page/sort/filter changes @@ -104,12 +96,10 @@ export default function Audit() { label: t("Timing"), order: "desc", }); - - setLoaded(false); }, [location.search, params.auditId, t]); return ( - + <>
- + ); } diff --git a/src/modules/frame/components/Mainframe.tsx b/src/modules/frame/components/Mainframe.tsx index a267cd7..2ad988a 100644 --- a/src/modules/frame/components/Mainframe.tsx +++ b/src/modules/frame/components/Mainframe.tsx @@ -1,9 +1,10 @@ -import React from "react"; +import React, { Suspense } from "react"; import TopMenu from "./TopMenu"; import LeftMenu from "./LeftMenu"; import "../../../Sass/_frame.scss"; import Sticker from "./Sticker"; +import LoadingPanel from "../../../components/common/LoadingPanel"; type MainFrameProps = { title?: string | null; @@ -18,7 +19,9 @@ const Mainframe: React.FC = ({ title, children }) => {
-
{children}
+
+ }>{children} +
diff --git a/src/modules/manager/customfields/customFieldDetails.tsx b/src/modules/manager/customfields/customFieldDetails.tsx index 56e1820..1222130 100644 --- a/src/modules/manager/customfields/customFieldDetails.tsx +++ b/src/modules/manager/customfields/customFieldDetails.tsx @@ -26,7 +26,6 @@ import { CustomFieldValue, SystemGlossaries, } from "../glossary/services/glossaryService"; -import Loading from "../../../components/common/Loading"; import { useFormWithGuard } from "../../../components/common/useFormRouter"; interface CustomFieldDetailsProps { @@ -359,7 +358,7 @@ const CustomFieldDetails: React.FC = ({ } return ( - + <>

{mode} {t("CustomField")}

@@ -637,7 +636,7 @@ const CustomFieldDetails: React.FC = ({ {isEditMode() && renderButton(labelApply, form.state.errors, "apply")} {renderButton(labelSave, form.state.errors, "save")} - + ); }; diff --git a/src/modules/manager/customfields/customFields.tsx b/src/modules/manager/customfields/customFields.tsx index e01d458..680b146 100644 --- a/src/modules/manager/customfields/customFields.tsx +++ b/src/modules/manager/customfields/customFields.tsx @@ -8,7 +8,6 @@ import customFieldsService, { CustomField, } from "./services/customFieldsService"; import Button, { ButtonType } from "../../../components/common/Button"; -import Loading from "../../../components/common/Loading"; import Permission from "../../../components/common/Permission"; const initialPagedData: Paginated = { @@ -21,7 +20,6 @@ const initialPagedData: Paginated = { const CustomFields: React.FC = () => { const { t } = useTranslation(Namespaces.Common); - const [loaded, setLoaded] = useState(false); const [pagedData, setPagedData] = useState>(initialPagedData); @@ -47,10 +45,7 @@ const CustomFields: React.FC = () => { new Map(), ); if (pagedDataResult) { - setLoaded(true); setPagedData(pagedDataResult); - } else { - setLoaded(false); } }; @@ -66,10 +61,7 @@ const CustomFields: React.FC = () => { filters, ); if (pagedDataResult) { - setLoaded(true); setPagedData(pagedDataResult); - } else { - setLoaded(false); } }; @@ -83,11 +75,8 @@ const CustomFields: React.FC = () => { filters, ); if (pagedDataResult) { - setLoaded(true); setPagedData(pagedDataResult); setSortColumn(nextSortColumn); - } else { - setLoaded(false); } }; @@ -104,11 +93,8 @@ const CustomFields: React.FC = () => { nextFilters, ); if (pagedDataResult) { - setLoaded(true); setFilters(nextFilters); setPagedData(pagedDataResult); - } else { - setLoaded(false); } }; @@ -128,7 +114,7 @@ const CustomFields: React.FC = () => { ); return ( - + <>
- - - + ); }; diff --git a/src/modules/manager/users/components/GeneralTab.tsx b/src/modules/manager/users/components/GeneralTab.tsx index 358e02b..4ab7b39 100644 --- a/src/modules/manager/users/components/GeneralTab.tsx +++ b/src/modules/manager/users/components/GeneralTab.tsx @@ -8,7 +8,6 @@ import { InputType } from "../../../../components/common/Input"; import { GeneralIdRef, MakeGeneralIdRef } from "../../../../utils/GeneralIdRef"; import authentication from "../../../frame/services/authenticationService"; import userService from "../services/usersService"; -import Loading from "../../../../components/common/Loading"; import { CustomFieldValue } from "../../glossary/services/glossaryService"; import { renderInput, @@ -145,7 +144,7 @@ const GeneralTab: React.FC = ({ isEditMode }) => { if (redirect) return ; return ( - + <>
{renderError("_general", form.state.errors)} {isEditMode && @@ -235,7 +234,7 @@ const GeneralTab: React.FC = ({ isEditMode }) => { {isEditMode && renderButton(labelApply, form.state.errors, "save")} {renderButton(labelSave, form.state.errors, "save")} -
+ ); }; diff --git a/src/modules/manager/users/users.tsx b/src/modules/manager/users/users.tsx index d56f331..f9f25af 100644 --- a/src/modules/manager/users/users.tsx +++ b/src/modules/manager/users/users.tsx @@ -7,12 +7,10 @@ import UsersTable from "./components/usersTable"; import userService, { GetUser } from "./services/usersService"; import Button, { ButtonType } from "../../../components/common/Button"; import { toast } from "react-toastify"; -import Loading from "../../../components/common/Loading"; import Permission from "../../../components/common/Permission"; const Users: React.FC = () => { const { t } = useTranslation(Namespaces.Common); - const [loaded, setLoaded] = useState(false); const [pagedData, setPagedData] = useState>({ page: 1, pageSize: 10, @@ -39,10 +37,7 @@ const Users: React.FC = () => { filters, ); if (data) { - setLoaded(true); setPagedData(data); - } else { - setLoaded(false); } }, [filters, sortColumn.key, sortColumn.order], @@ -59,11 +54,8 @@ const Users: React.FC = () => { ); if (data) { - setLoaded(true); setPagedData(data); setSortColumn(newSortColumn); - } else { - setLoaded(false); } }; @@ -80,11 +72,8 @@ const Users: React.FC = () => { ); if (data) { - setLoaded(true); setFilters(newFilters); setPagedData(data); - } else { - setLoaded(false); } }; @@ -112,10 +101,7 @@ const Users: React.FC = () => { filters, ); if (data) { - setLoaded(true); setPagedData(data); - } else { - setLoaded(false); } }; @@ -123,7 +109,7 @@ const Users: React.FC = () => { }, []); // eslint-disable-line react-hooks/exhaustive-deps return ( - + <>