Replaced the custom loading code with reacts build in suspense

src/components/common/Loading.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import LoadingPanel from "./LoadingPanel";
-
-interface Loading2Props {
-  loaded: boolean;
-  children: React.ReactNode;
-}
-
-const Loading: React.FC<Loading2Props> = ({ loaded, children }) => {
-  if (!loaded) {
-    return <LoadingPanel />;
-  }
-
-  return <>{children}</>;
-};
-
-export default Loading;

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<TemplateFillerHandle, TemplateFillerProps>(
       parsedDefinition = parseDefinition(template.definition, customFields);
     else parsedDefinition = <></>;
 
-    return (
+    return <div className="ck-content form-editor">{parsedDefinition}</div>;
-      <Loading loaded={loaded}>
-        <div className="ck-content form-editor">{parsedDefinition}</div>
-      </Loading>
-    );
   },
 );
 

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<Paginated<AuditLogEntry>>({
     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<AuditLogEntry>) => {
     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 (
-    <Loading loaded={loaded}>
+    <>
       <div>
         <AuditTable
           data={pagedData}
@@ -119,6 +109,6 @@ export default function Audit() {
           onSearch={onSearch}
         />
       </div>
-    </Loading>
+    </>
   );
 }

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<MainFrameProps> = ({ title, children }) => {
         <div className="frame-leftMenu">
           <LeftMenu />
         </div>
-        <div className="frame-workArea">{children}</div>
+        <div className="frame-workArea">
+          <Suspense fallback={<LoadingPanel />}>{children}</Suspense>
+        </div>
       </div>
       <Sticker />
     </div>

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<CustomFieldDetailsProps> = ({
   }
 
   return (
-    <Loading loaded={form.state.loaded}>
+    <>
       <h1>
         {mode} {t("CustomField")}
       </h1>
@@ -637,7 +636,7 @@ const CustomFieldDetails: React.FC<CustomFieldDetailsProps> = ({
         {isEditMode() && renderButton(labelApply, form.state.errors, "apply")}
         {renderButton(labelSave, form.state.errors, "save")}
       </form>
-    </Loading>
+    </>
   );
 };
 

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<CustomField> = {
@@ -21,7 +20,6 @@ const initialPagedData: Paginated<CustomField> = {
 
 const CustomFields: React.FC = () => {
   const { t } = useTranslation(Namespaces.Common);
-  const [loaded, setLoaded] = useState(false);
   const [pagedData, setPagedData] =
     useState<Paginated<CustomField>>(initialPagedData);
 
@@ -47,10 +45,7 @@ const CustomFields: React.FC = () => {
         new Map<string, string>(),
       );
       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 (
-    <Loading loaded={loaded}>
+    <>
       <Permission privilegeKey="AddField">
         <div>
           <Button buttonType={ButtonType.primary} to="add">
@@ -145,7 +131,7 @@ const CustomFields: React.FC = () => {
         onSearch={onSearch}
         onDelete={onDelete}
       />
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/domains/Domains.tsx

@@ -6,7 +6,6 @@ import { Paginated } from "../../../services/Paginated";
 import DomainsTable from "./components/domainsTable";
 import domainsService, { GetDomain } from "./serrvices/domainsService";
 import Button, { ButtonType } from "../../../components/common/Button";
-import Loading from "../../../components/common/Loading";
 import Permission from "../../../components/common/Permission";
 
 const initialPagedData: Paginated<GetDomain> = {
@@ -19,7 +18,6 @@ const initialPagedData: Paginated<GetDomain> = {
 
 const Domains: React.FC = () => {
   const { t } = useTranslation(Namespaces.Common);
-  const [loaded, setLoaded] = useState(false);
   const [pagedData, setPagedData] =
     useState<Paginated<GetDomain>>(initialPagedData);
   const [sortColumn, setSortColumn] = useState<Column<GetDomain>>({
@@ -41,10 +39,7 @@ const Domains: React.FC = () => {
         filters,
       );
       if (pagedDataResult) {
-        setLoaded(true);
         setPagedData(pagedDataResult);
-      } else {
-        setLoaded(false);
       }
     },
     [filters, sortColumn.key, sortColumn.order],
@@ -68,11 +63,8 @@ const Domains: React.FC = () => {
       filters,
     );
     if (pagedDataResult) {
-      setLoaded(true);
       setPagedData(pagedDataResult);
       setSortColumn(nextSortColumn);
-    } else {
-      setLoaded(false);
     }
   };
 
@@ -89,11 +81,8 @@ const Domains: React.FC = () => {
       nextFilters,
     );
     if (pagedDataResult) {
-      setLoaded(true);
       setFilters(nextFilters);
       setPagedData(pagedDataResult);
-    } else {
-      setLoaded(false);
     }
   };
 
@@ -110,7 +99,7 @@ const Domains: React.FC = () => {
   const translatedSortColumn = { ...sortColumn, label: t("Name") };
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <Permission privilegeKey="AddDomain">
         <div>
           <Button buttonType={ButtonType.primary} to="add">
@@ -127,7 +116,7 @@ const Domains: React.FC = () => {
         onSearch={onSearch}
         onDelete={onDelete}
       />
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/domains/components/AddUserToRole.tsx

@@ -6,7 +6,6 @@ import { useTranslation } from "react-i18next";
 import { Namespaces } from "../../../../i18n/i18n";
 import { MakeGeneralIdRef } from "../../../../utils/GeneralIdRef";
 import roleService from "../serrvices/rolesService";
-import Loading from "../../../../components/common/Loading";
 import {
   renderError,
   renderButton,
@@ -73,21 +72,19 @@ const AddUserToRole: React.FC<LocAddUserToRoleProps> = ({ isEditMode }) => {
   if (redirect) return <Navigate to={redirect} />;
 
   return (
-    <Loading loaded={loaded}>
+    <form onSubmit={handleSubmit}>
-      <form onSubmit={handleSubmit}>
+      {renderError("_general", form.state.errors)}
-        {renderError("_general", form.state.errors)}
+      {renderUserPicker(
-        {renderUserPicker(
+        "userId",
-          "userId",
+        labelUserId,
-          labelUserId,
+        form.state.data,
-          form.state.data,
+        form.state.errors,
-          form.state.errors,
+        form.handleUserPickerChange,
-          form.handleUserPickerChange,
+      )}
-        )}
 
-        {isEditMode && renderButton(labelApply, form.state.errors, "apply")}
+      {isEditMode && renderButton(labelApply, form.state.errors, "apply")}
-        {renderButton(labelSave, form.state.errors, "save")}
+      {renderButton(labelSave, form.state.errors, "save")}
-      </form>
+    </form>
-    </Loading>
   );
 };
 

src/modules/manager/domains/components/GeneralTab.tsx

@@ -7,7 +7,6 @@ import { Namespaces } from "../../../../i18n/i18n";
 import { InputType } from "../../../../components/common/Input";
 import { MakeGeneralIdRef } from "../../../../utils/GeneralIdRef";
 import domainsService from "../serrvices/domainsService";
-import Loading from "../../../../components/common/Loading";
 import {
   renderError,
   renderButton,
@@ -161,91 +160,89 @@ const GeneralTab: React.FC<GeneralTabProps> = ({ isEditMode }) => {
   if (redirect) return <Navigate to={redirect} />;
 
   return (
-    <Loading loaded={loaded}>
+    <form onSubmit={handleSubmit}>
-      <form onSubmit={handleSubmit}>
+      {renderError("_general", form.state.errors)}
-        {renderError("_general", form.state.errors)}
+      {renderInput(
-        {renderInput(
+        "name",
-          "name",
+        labelName,
-          labelName,
+        form.state.data,
-          form.state.data,
+        form.state.errors,
-          form.state.errors,
+        InputType.text,
-          InputType.text,
+        false,
-          false,
+        "",
-          "",
+        "",
-          "",
+        0,
-          0,
+        true,
-          true,
+        undefined,
-          undefined,
+        form.handleChange,
-          form.handleChange,
+      )}
-        )}
+      {renderInput(
-        {renderInput(
+        "sunriseHostName",
-          "sunriseHostName",
+        labelSunriseHostName,
-          labelSunriseHostName,
+        form.state.data,
-          form.state.data,
+        form.state.errors,
-          form.state.errors,
+        InputType.text,
-          InputType.text,
+        false,
-          false,
+        "",
-          "",
+        "",
-          "",
+        0,
-          0,
+        true,
-          true,
+        undefined,
-          undefined,
+        form.handleChange,
-          form.handleChange,
+      )}
-        )}
+      {renderInput(
-        {renderInput(
+        "sunriseAppId",
-          "sunriseAppId",
+        labelSunriseAppId,
-          labelSunriseAppId,
+        form.state.data,
-          form.state.data,
+        form.state.errors,
-          form.state.errors,
+        InputType.text,
-          InputType.text,
+        false,
-          false,
+        "",
-          "",
+        "",
-          "",
+        0,
-          0,
+        true,
-          true,
+        undefined,
-          undefined,
+        form.handleChange,
-          form.handleChange,
+      )}
-        )}
+      {renderInput(
-        {renderInput(
+        "sunriseCategoryId",
-          "sunriseCategoryId",
+        labelSunriseCategoryId,
-          labelSunriseCategoryId,
+        form.state.data,
-          form.state.data,
+        form.state.errors,
-          form.state.errors,
+        InputType.text,
-          InputType.text,
+        false,
-          false,
+        "",
-          "",
+        "",
-          "",
+        0,
-          0,
+        true,
-          true,
+        undefined,
-          undefined,
+        form.handleChange,
-          form.handleChange,
+      )}
-        )}
+      {renderSsoProviderPicker(
-        {renderSsoProviderPicker(
+        "ssoProviderId",
-          "ssoProviderId",
+        labelSsoProvider,
-          labelSsoProvider,
+        form.state.data,
-          form.state.data,
+        form.state.errors,
-          form.state.errors,
+        form.handleSsoProviderPickerChange,
-          form.handleSsoProviderPickerChange,
+      )}
-        )}
+      {renderInput(
-        {renderInput(
+        "sigmaId",
-          "sigmaId",
+        labelSigmaId,
-          labelSigmaId,
+        form.state.data,
-          form.state.data,
+        form.state.errors,
-          form.state.errors,
+        InputType.number,
-          InputType.number,
+        false,
-          false,
+        "",
-          "",
+        "",
-          "",
+        0,
-          0,
+        true,
-          true,
+        undefined,
-          undefined,
+        form.handleChange,
-          form.handleChange,
+      )}
-        )}
 
-        {isEditMode && renderButton(labelApply, form.state.errors, "apply")}
+      {isEditMode && renderButton(labelApply, form.state.errors, "apply")}
-        {renderButton(labelSave, form.state.errors, "save")}
+      {renderButton(labelSave, form.state.errors, "save")}
-      </form>
+    </form>
-    </Loading>
   );
 };
 export default GeneralTab;

src/modules/manager/domains/components/MailTemplatesTab.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import mailTemplatesService from "../serrvices/mailTemplatesService";
 import HOCEmailTemplateEditor from "./EmailTemplateEditor";
-import Loading from "../../../../components/common/Loading";
 import { Namespaces } from "../../../../i18n/i18n";
 import { useTranslation } from "react-i18next";
 import { SelectableList } from "../../../../components/common/SelectableList";
@@ -43,7 +42,6 @@ const MailTemplatesTabContent: React.FC<{
 };
 
 const MailTemplatesTab: React.FC = () => {
-  const [loaded, setLoaded] = useState(false);
   const [currentMailType, setCurrentMailType] = useState<MailType | null>(null);
   const [types, setTypes] = useState<MailType[]>([]);
 
@@ -59,8 +57,6 @@ const MailTemplatesTab: React.FC = () => {
         }
       } catch (ex) {
         console.error(ex);
-      } finally {
-        setLoaded(true);
       }
     };
 
@@ -74,14 +70,12 @@ const MailTemplatesTab: React.FC = () => {
   const { domainId } = useParams<{ domainId: string }>();
 
   return (
-    <Loading loaded={loaded}>
+    <MailTemplatesTabContent
-      <MailTemplatesTabContent
+      types={types}
-        types={types}
+      currentMailType={currentMailType}
-        currentMailType={currentMailType}
+      domainId={domainId}
-        domainId={domainId}
+      onClick={onClick}
-        onClick={onClick}
+    />
-      />
-    </Loading>
   );
 };
 

src/modules/manager/domains/components/RoleAccessEditor.tsx

@@ -9,7 +9,6 @@ import roleService, {
   GetSecurityAccess,
 } from "../serrvices/rolesService";
 import RollAccessTable from "./RollAccessTable";
-import Loading from "../../../../components/common/Loading";
 
 const initialPagedData: Paginated<GetRoleSecurityAccess> = {
   page: 1,
@@ -33,7 +32,6 @@ interface RoleAccessEditorProps {
 
 const RoleAccessEditor: React.FC<RoleAccessEditorProps> = ({ role }) => {
   const { t } = useTranslation(Namespaces.Common);
-  const [loaded, setLoaded] = useState(false);
   const [accessList, setAccessList] =
     useState<Paginated<GetSecurityAccess>>(initialAccessList);
   const [pagedData, setPagedData] =
@@ -114,11 +112,8 @@ const RoleAccessEditor: React.FC<RoleAccessEditorProps> = ({ role }) => {
           accessRightsResponse?.data,
         );
         if (nextPagedData) {
-          setLoaded(true);
           setPagedData(nextPagedData);
         }
-      } else {
-        setLoaded(false);
       }
     },
     [accessList, compileAccessRightsPagedData, role?.id],
@@ -173,14 +168,12 @@ const RoleAccessEditor: React.FC<RoleAccessEditorProps> = ({ role }) => {
   const isAdministrator = role?.isAdministrator || role?.isSuperUser;
 
   return (
-    <Loading loaded={loaded}>
+    <RollAccessTable
-      <RollAccessTable
+      role={role?.id}
-        role={role?.id}
+      isAdministrator={isAdministrator}
-        isAdministrator={isAdministrator}
+      data={pagedData}
-        data={pagedData}
+      onSave={handleSave}
-        onSave={handleSave}
+    />
-      />
-    </Loading>
   );
 };
 

src/modules/manager/domains/components/RolesDetails.tsx

@@ -7,7 +7,6 @@ import { Namespaces } from "../../../../i18n/i18n";
 import { InputType } from "../../../../components/common/Input";
 import { MakeGeneralIdRef } from "../../../../utils/GeneralIdRef";
 import roleService from "../serrvices/rolesService";
-import Loading from "../../../../components/common/Loading";
 import {
   renderError,
   renderButton,
@@ -109,7 +108,7 @@ const RolesDetails: React.FC<RolesDetailsProps> = ({ isEditMode }) => {
   if (isEditMode) mode = t("Edit");
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <h1>
         {mode} {t("Role")}
       </h1>
@@ -133,7 +132,7 @@ const RolesDetails: React.FC<RolesDetailsProps> = ({ isEditMode }) => {
         {isEditMode && renderButton(labelApply, form.state.errors, "apply")}
         {renderButton(labelSave, form.state.errors, "save")}
       </form>
-    </Loading>
+    </>
   );
 };
 export default RolesDetails;

src/modules/manager/domains/components/RolesEditor.tsx

@@ -8,7 +8,6 @@ import { useParams } from "react-router-dom";
 import roleService, { GetRoleResponse } from "../serrvices/rolesService";
 import RolesTable from "./RolesTable";
 import Button, { ButtonType } from "../../../../components/common/Button";
-import Loading from "../../../../components/common/Loading";
 import Permission from "../../../../components/common/Permission";
 import { useHashSegment } from "../../../../utils/HashNavigationContext";
 
@@ -39,7 +38,6 @@ const RolesEditor: React.FC<RolesEditorProps> = ({
   const hashRoleId = useHashSegment(
     hashSegment !== undefined ? hashSegment : -1,
   );
-  const [loaded, setLoaded] = useState(false);
   const [pagedData, setPagedData] =
     useState<Paginated<GetRoleResponse>>(initialPagedData);
   const [sortColumn, setSortColumn] = useState<Column<GetRoleResponse>>({
@@ -68,10 +66,7 @@ const RolesEditor: React.FC<RolesEditorProps> = ({
         filters,
       );
       if (pagedDataResult) {
-        setLoaded(true);
         setPagedData(pagedDataResult);
-      } else {
-        setLoaded(false);
       }
     },
     [domainGeneralIdRef, filters, sortColumn.key, sortColumn.order],
@@ -112,11 +107,8 @@ const RolesEditor: React.FC<RolesEditorProps> = ({
       filters,
     );
     if (pagedDataResult) {
-      setLoaded(true);
       setPagedData(pagedDataResult);
       setSortColumn(nextSortColumn);
-    } else {
-      setLoaded(false);
     }
   };
 
@@ -134,11 +126,8 @@ const RolesEditor: React.FC<RolesEditorProps> = ({
       nextFilters,
     );
     if (pagedDataResult) {
-      setLoaded(true);
       setFilters(nextFilters);
       setPagedData(pagedDataResult);
-    } else {
-      setLoaded(false);
     }
   };
 
@@ -166,7 +155,7 @@ const RolesEditor: React.FC<RolesEditorProps> = ({
   const translatedSortColumn = { ...sortColumn, label: t("Name") };
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <Permission privilegeKey="AddRole">
         <Button
           id="btnAddRoleToDomain"
@@ -190,7 +179,7 @@ const RolesEditor: React.FC<RolesEditorProps> = ({
         canDelete={canDelete}
         onDelete={onDelete}
       />
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/domains/components/UserRoleEditor.tsx

@@ -7,7 +7,6 @@ import { MakeGeneralIdRef } from "../../../../utils/GeneralIdRef";
 import UserRolesTable from "./UserRolesTable";
 import roleService, { RoleUser } from "../serrvices/rolesService";
 import Button, { ButtonType } from "../../../../components/common/Button";
-import Loading from "../../../../components/common/Loading";
 import Permission from "../../../../components/common/Permission";
 
 const initialPagedData: Paginated<RoleUser> = {
@@ -24,7 +23,6 @@ interface UserRoleEditorProps {
 
 const UserRoleEditor: React.FC<UserRoleEditorProps> = ({ role }) => {
   const { t } = useTranslation(Namespaces.Common);
-  const [loaded, setLoaded] = useState(false);
   const [pagedData, setPagedData] =
     useState<Paginated<RoleUser>>(initialPagedData);
   const [sortColumn, setSortColumn] = useState<Column<RoleUser>>({
@@ -57,12 +55,9 @@ const UserRoleEditor: React.FC<UserRoleEditorProps> = ({ role }) => {
         nextFilters,
       );
       if (pagedDataResult) {
-        setLoaded(true);
         setFilters(nextFilters);
         setPagedData(pagedDataResult);
         setSortColumn(nextSortColumn);
-      } else {
-        setLoaded(false);
       }
     },
     [roleGeneralIdRef],
@@ -110,7 +105,7 @@ const UserRoleEditor: React.FC<UserRoleEditorProps> = ({ role }) => {
   const addLink = "editRole/" + role?.id + "/addUserToRole";
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <Permission privilegeKey="AddRoleUser">
         <div>
           <Button
@@ -131,7 +126,7 @@ const UserRoleEditor: React.FC<UserRoleEditorProps> = ({ role }) => {
         onSearch={onSearch}
         onDelete={onDelete}
       />
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/forms/Forms.tsx

@@ -7,12 +7,10 @@ import Permission from "../../../components/common/Permission";
 import { Paginated } from "../../../services/Paginated";
 import FormsTable from "./components/formsTable";
 import formsService, { GetFormResponse } from "./services/formsService";
-import Loading from "../../../components/common/Loading";
 
 const Forms: React.FC = () => {
   const { t } = useTranslation(Namespaces.Common);
 
-  const [loaded, setLoaded] = useState(false);
   const [pagedData, setPagedData] = useState<Paginated<GetFormResponse>>({
     page: 1,
     pageSize: 10,
@@ -39,10 +37,7 @@ const Forms: React.FC = () => {
         filters,
       );
       if (data) {
-        setLoaded(true);
         setPagedData(data);
-      } else {
-        setLoaded(false);
       }
     },
     [filters, sortColumn.key, sortColumn.order],
@@ -58,11 +53,8 @@ const Forms: React.FC = () => {
       filters,
     );
     if (data) {
-      setLoaded(true);
       setPagedData(data);
       setSortColumn(newSortColumn);
-    } else {
-      setLoaded(false);
     }
   };
 
@@ -79,11 +71,8 @@ const Forms: React.FC = () => {
       newFilters,
     );
     if (data) {
-      setLoaded(true);
       setFilters(newFilters);
       setPagedData(data);
-    } else {
-      setLoaded(false);
     }
   };
 
@@ -98,10 +87,7 @@ const Forms: React.FC = () => {
     const loadInitial = async () => {
       const data = await formsService.getForms(1, 10, "name", true, filters);
       if (data) {
-        setLoaded(true);
         setPagedData(data);
-      } else {
-        setLoaded(false);
       }
     };
 
@@ -109,7 +95,7 @@ const Forms: React.FC = () => {
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <Permission privilegeKey="AddFormTemplate">
         <div>
           <Button buttonType={ButtonType.primary} to="add">
@@ -126,7 +112,7 @@ const Forms: React.FC = () => {
         onSearch={onSearch}
         onDelete={onDelete}
       />
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/forms/FormsDetails.tsx

@@ -7,7 +7,6 @@ import { Namespaces } from "../../../i18n/i18n";
 import { InputType } from "../../../components/common/Input";
 import { MakeGeneralIdRef } from "../../../utils/GeneralIdRef";
 import formsService from "./services/formsService";
-import Loading from "../../../components/common/Loading";
 import {
   renderError,
   renderButton,
@@ -110,7 +109,7 @@ const FormsDetails: React.FC<{ editMode?: boolean }> = ({
   if (editMode) mode = t("Edit");
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <h1>
         {mode} {t("FormTemplate")}
       </h1>
@@ -141,7 +140,7 @@ const FormsDetails: React.FC<{ editMode?: boolean }> = ({
         {editMode && renderButton(labelApply, form.state.errors, "apply")}
         {renderButton(labelSave, form.state.errors, "save")}
       </form>
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/glossary/GlossariesDetails.tsx

@@ -12,7 +12,6 @@ import glossariesService, {
   SystemGlossaries,
 } from "./services/glossaryService";
 import { CustomField } from "../customfields/services/customFieldsService";
-import Loading from "../../../components/common/Loading";
 import {
   renderError,
   renderButton,
@@ -226,7 +225,7 @@ const GlossariesDetails: React.FC<GlossariesDetailsProps> = ({
   };
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <h1>
         {mode} {t("GlossaryItem")}
       </h1>
@@ -268,7 +267,7 @@ const GlossariesDetails: React.FC<GlossariesDetailsProps> = ({
         {editMode && renderButton(labelApply, form.state.errors, "apply")}
         {renderButton(labelSave, form.state.errors, "save")}
       </form>
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/glossary/Glossary.tsx

@@ -10,19 +10,16 @@ import glossariesService, {
 } from "./services/glossaryService";
 import { GeneralIdRef } from "./../../../utils/GeneralIdRef";
 import Button, { ButtonType } from "../../../components/common/Button";
-import Loading from "../../../components/common/Loading";
 import Permission from "../../../components/common/Permission";
 
 const Glossaries: React.FC = () => {
   const { t } = useTranslation(Namespaces.Common);
   const { glossaryId } = useParams<{ glossaryId: string }>();
 
-  const [loaded, setLoaded] = useState(false);
   const [data, setData] = useState<Glossary | undefined>(undefined);
   const [parentAddress, setParentAddress] = useState("");
 
   const loadData = useCallback(async () => {
-    setLoaded(false);
     let parentItem: GeneralIdRef = SystemGlossaries;
 
     if (glossaryId !== undefined) {
@@ -41,9 +38,6 @@ const Glossaries: React.FC = () => {
 
       setData(result);
       setParentAddress(nextParentAddress);
-      setLoaded(true);
-    } else {
-      setLoaded(false);
     }
   }, [glossaryId]);
 
@@ -130,7 +124,7 @@ const Glossaries: React.FC = () => {
   const pathBlock = createPathBlock();
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <div>
         <Permission privilegeKey="ViewGlossary">{upButton}</Permission>
         <Permission privilegeKey="AddGlossary">
@@ -143,7 +137,7 @@ const Glossaries: React.FC = () => {
       <hr />
       {pathBlock}
       {table}
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/organisations/Organisations.tsx

@@ -9,11 +9,9 @@ import OrganisationsTable from "./components/OrganisationsTable";
 import organisationsService, {
   ReadOrganisation,
 } from "./services/organisationsService";
-import Loading from "../../../components/common/Loading";
 
 const Organisations: React.FC = () => {
   const { t } = useTranslation(Namespaces.Common);
-  const [loaded, setLoaded] = useState(false);
   const [pagedData, setPagedData] = useState<Paginated<ReadOrganisation>>({
     page: 1,
     pageSize: 10,
@@ -40,10 +38,7 @@ const Organisations: React.FC = () => {
         filters,
       );
       if (data) {
-        setLoaded(true);
         setPagedData(data);
-      } else {
-        setLoaded(false);
       }
     },
     [filters, sortColumn.key, sortColumn.order],
@@ -60,11 +55,8 @@ const Organisations: React.FC = () => {
     );
 
     if (data) {
-      setLoaded(true);
       setPagedData(data);
       setSortColumn(newSortColumn);
-    } else {
-      setLoaded(false);
     }
   };
 
@@ -81,11 +73,8 @@ const Organisations: React.FC = () => {
       newFilters,
     );
     if (data) {
-      setLoaded(true);
       setFilters(newFilters);
       setPagedData(data);
-    } else {
-      setLoaded(false);
     }
   };
 
@@ -109,10 +98,7 @@ const Organisations: React.FC = () => {
         filters,
       );
       if (data) {
-        setLoaded(true);
         setPagedData(data);
-      } else {
-        setLoaded(false);
       }
     };
 
@@ -120,7 +106,7 @@ const Organisations: React.FC = () => {
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <Permission privilegeKey="AddOrganisation">
         <Button buttonType={ButtonType.primary} to="add">
           {t("Add")}
@@ -135,7 +121,7 @@ const Organisations: React.FC = () => {
         onSearch={onSearch}
         onDelete={onDelete}
       />
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/organisations/OrganisationsDetails.tsx

@@ -8,7 +8,6 @@ import { InputType } from "../../../components/common/Input";
 import { MakeGeneralIdRef } from "../../../utils/GeneralIdRef";
 import Option from "../../../components/common/option";
 import organisationsService from "./services/organisationsService";
-import Loading from "../../../components/common/Loading";
 import {
   renderError,
   renderButton,
@@ -129,7 +128,7 @@ const OrganisationsDetails: React.FC<{ editMode?: boolean }> = ({
   if (editMode) mode = t("Edit");
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <h1>
         {mode} {t("Organisation")}
       </h1>
@@ -174,7 +173,7 @@ const OrganisationsDetails: React.FC<{ editMode?: boolean }> = ({
         {editMode && renderButton(labelApply, form.state.errors, "apply")}
         {renderButton(labelSave, form.state.errors, "save")}
       </form>
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/sequence/SequenceDetails.tsx

@@ -15,7 +15,6 @@ import {
 import sequenceService from "./services/sequenceService";
 import Option from "../../../components/common/option";
 import { MakeGeneralIdRef } from "../../../utils/GeneralIdRef";
-import Loading from "../../../components/common/Loading";
 import { useFormWithGuard } from "../../../components/common/useFormRouter";
 
 interface SequenceDetailsProps {
@@ -141,7 +140,7 @@ const SequenceDetails: React.FC<SequenceDetailsProps> = ({
     form.handleSubmit(e, doSubmit);
   };
 
-  const { loaded, redirect } = form.state;
+  const { redirect } = form.state;
   if (redirect) return <Navigate to={redirect} />;
 
   const rolloverOptions: Option[] = [
@@ -154,7 +153,7 @@ const SequenceDetails: React.FC<SequenceDetailsProps> = ({
   const mode = editMode ? t("Edit") : t("Add");
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <h1>
         {mode} {t("Sequence")}
       </h1>
@@ -223,7 +222,7 @@ const SequenceDetails: React.FC<SequenceDetailsProps> = ({
         {editMode && renderButton(labelApply, form.state.errors, "save")}
         {renderButton(labelSave, form.state.errors, "save")}
       </form>
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/sequence/sequence.tsx

@@ -6,12 +6,10 @@ import SequenceTable from "./components/squenceTable";
 import Column from "../../../components/common/columns";
 import { Paginated } from "../../../services/Paginated";
 import Button, { ButtonType } from "../../../components/common/Button";
-import Loading from "../../../components/common/Loading";
 import Permission from "../../../components/common/Permission";
 
 const Sequence: React.FC = () => {
   const { t } = useTranslation(Namespaces.Common);
-  const [loaded, setLoaded] = useState(false);
   const [pagedData, setPagedData] = useState<Paginated<ReadSequence>>({
     page: 1,
     pageSize: 10,
@@ -38,10 +36,7 @@ const Sequence: React.FC = () => {
         filters,
       );
       if (data) {
-        setLoaded(true);
         setPagedData(data);
-      } else {
-        setLoaded(false);
       }
     },
     [filters, sortColumn.key, sortColumn.order],
@@ -57,11 +52,8 @@ const Sequence: React.FC = () => {
       filters,
     );
     if (data) {
-      setLoaded(true);
       setPagedData(data);
       setSortColumn(newSortColumn);
-    } else {
-      setLoaded(false);
     }
   };
 
@@ -78,11 +70,8 @@ const Sequence: React.FC = () => {
       newFilters,
     );
     if (data) {
-      setLoaded(true);
       setFilters(newFilters);
       setPagedData(data);
-    } else {
-      setLoaded(false);
     }
   };
 
@@ -103,10 +92,7 @@ const Sequence: React.FC = () => {
         filters,
       );
       if (data) {
-        setLoaded(true);
         setPagedData(data);
-      } else {
-        setLoaded(false);
       }
     };
 
@@ -114,7 +100,7 @@ const Sequence: React.FC = () => {
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <Permission privilegeKey="AddSequence">
         <div>
           <Button buttonType={ButtonType.primary} to="add">
@@ -131,7 +117,7 @@ const Sequence: React.FC = () => {
         onSearch={onSearch}
         onDelete={onDelete}
       />
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/sites/SiteDetails.tsx

@@ -14,7 +14,6 @@ import {
 import { MakeGeneralIdRef } from "../../../utils/GeneralIdRef";
 import Option from "../../../components/common/option";
 import siteService from "./services/sitessService";
-import Loading from "../../../components/common/Loading";
 import { useFormWithGuard } from "../../../components/common/useFormRouter";
 
 interface SiteDetailsProps {
@@ -128,7 +127,7 @@ const SiteDetails: React.FC<SiteDetailsProps> = ({ editMode = false }) => {
     form.handleSubmit(e, doSubmit);
   };
 
-  const { loaded, redirect } = form.state;
+  const { redirect } = form.state;
   if (redirect) return <Navigate to={redirect} />;
 
   const organisationStatusOptions: Option[] = [
@@ -140,7 +139,7 @@ const SiteDetails: React.FC<SiteDetailsProps> = ({ editMode = false }) => {
   const mode = editMode ? t("Edit") : t("Add");
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <h1>
         {mode} {t("Site")}
       </h1>
@@ -185,7 +184,7 @@ const SiteDetails: React.FC<SiteDetailsProps> = ({ editMode = false }) => {
         {editMode && renderButton(labelApply, form.state.errors, "save")}
         {renderButton(labelSave, form.state.errors, "save")}
       </form>
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/sites/Sites.tsx

@@ -7,7 +7,6 @@ import { Paginated } from "../../../services/Paginated";
 import Button, { ButtonType } from "../../../components/common/Button";
 import siteService, { ReadSite } from "./services/sitessService";
 import SitesTable from "./components/SitesTable";
-import Loading from "../../../components/common/Loading";
 import Permission from "../../../components/common/Permission";
 
 const initialPagedData: Paginated<ReadSite> = {
@@ -22,7 +21,6 @@ const Sites: React.FC = () => {
   const { t } = useTranslation(Namespaces.Common);
   const { organisationId } = useParams<{ organisationId: string }>();
 
-  const [loaded, setLoaded] = useState(false);
   const [pagedData, setPagedData] =
     useState<Paginated<ReadSite>>(initialPagedData);
   const [sortColumn, setSortColumn] = useState<Column<ReadSite>>({
@@ -56,11 +54,8 @@ const Sites: React.FC = () => {
         nextFilters,
       );
       if (pagedDataResult) {
-        setLoaded(true);
         setFilters(nextFilters);
         setPagedData(pagedDataResult);
-      } else {
-        setLoaded(false);
       }
     },
     [
@@ -84,11 +79,8 @@ const Sites: React.FC = () => {
         nextFilters,
       );
       if (pagedDataResult) {
-        setLoaded(true);
         setFilters(nextFilters);
         setPagedData(pagedDataResult);
-      } else {
-        setLoaded(false);
       }
     };
 
@@ -107,12 +99,9 @@ const Sites: React.FC = () => {
         nextFilters,
       );
       if (pagedDataResult) {
-        setLoaded(true);
         setFilters(nextFilters);
         setPagedData(pagedDataResult);
         setSortColumn(nextSortColumn);
-      } else {
-        setLoaded(false);
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -133,11 +122,8 @@ const Sites: React.FC = () => {
         updatedFilters,
       );
       if (pagedDataResult) {
-        setLoaded(true);
         setFilters(updatedFilters);
         setPagedData(pagedDataResult);
-      } else {
-        setLoaded(false);
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -163,7 +149,7 @@ const Sites: React.FC = () => {
   );
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <Permission privilegeKey="AddSite">
         <div>
           <Button buttonType={ButtonType.primary} to="add">
@@ -180,7 +166,7 @@ const Sites: React.FC = () => {
         onSearch={onSearch}
         onDelete={onDelete}
       />
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/specifications/Specifications.tsx

@@ -9,7 +9,6 @@ import specificationService, {
   ReadSpecification,
 } from "./services/specificationService";
 import SpecificationsTable from "./components/SpecificationsTable";
-import Loading from "../../../components/common/Loading";
 import Permission from "../../../components/common/Permission";
 
 const initialPagedData: Paginated<ReadSpecification> = {
@@ -23,8 +22,6 @@ const initialPagedData: Paginated<ReadSpecification> = {
 const Specifications: React.FC = () => {
   const { t } = useTranslation(Namespaces.Common);
   const { siteId } = useParams<{ siteId: string }>();
-
-  const [loaded, setLoaded] = useState(false);
   const [pagedData, setPagedData] =
     useState<Paginated<ReadSpecification>>(initialPagedData);
   const [sortColumn, setSortColumn] = useState<Column<ReadSpecification>>({
@@ -58,11 +55,8 @@ const Specifications: React.FC = () => {
         nextFilters,
       );
       if (pagedDataResult) {
-        setLoaded(true);
         setFilters(nextFilters);
         setPagedData(pagedDataResult);
-      } else {
-        setLoaded(false);
       }
     },
     [filters, sortColumn.key, sortColumn.order, updateFiltersWithSiteId],
@@ -79,11 +73,8 @@ const Specifications: React.FC = () => {
         nextFilters,
       );
       if (pagedDataResult) {
-        setLoaded(true);
         setFilters(nextFilters);
         setPagedData(pagedDataResult);
-      } else {
-        setLoaded(false);
       }
     };
 
@@ -102,12 +93,9 @@ const Specifications: React.FC = () => {
         nextFilters,
       );
       if (pagedDataResult) {
-        setLoaded(true);
         setFilters(nextFilters);
         setPagedData(pagedDataResult);
         setSortColumn(nextSortColumn);
-      } else {
-        setLoaded(false);
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -128,11 +116,8 @@ const Specifications: React.FC = () => {
         updatedFilters,
       );
       if (pagedDataResult) {
-        setLoaded(true);
         setFilters(updatedFilters);
         setPagedData(pagedDataResult);
-      } else {
-        setLoaded(false);
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -159,7 +144,7 @@ const Specifications: React.FC = () => {
   );
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <Permission privilegeKey="AddSpecification">
         <Button buttonType={ButtonType.primary} to="add">
           {t("Add")}
@@ -174,7 +159,7 @@ const Specifications: React.FC = () => {
         onSearch={onSearch}
         onDelete={onDelete}
       />
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/specifications/SpecificationsDetails.tsx

@@ -5,7 +5,6 @@ import { toast } from "react-toastify";
 import { useTranslation } from "react-i18next";
 import { Namespaces } from "../../../i18n/i18n";
 import { InputType } from "../../../components/common/Input";
-import Loading from "../../../components/common/Loading";
 import TemplateFiller, {
   TemplateFillerHandle,
 } from "../../../components/common/TemplateFiller";
@@ -203,13 +202,13 @@ const SpecificationsDetails: React.FC<SpecificationsDetailsProps> = ({
     form.handleSubmit(e, doSubmit);
   };
 
-  const { loaded, redirect } = form.state;
+  const { redirect } = form.state;
   if (redirect && redirect !== "") return <Navigate to={redirect} />;
 
   const mode = isEditMode() ? t("Edit") : t("Add");
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <h1>
         {mode} {t("Specifications")}
       </h1>
@@ -287,7 +286,7 @@ const SpecificationsDetails: React.FC<SpecificationsDetailsProps> = ({
           true,
         )}
       </form>
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/ssoManager/SsoProviderDetails.tsx

@@ -12,7 +12,6 @@ import {
   renderError,
 } from "../../../components/common/formHelpers";
 import { MakeGeneralIdRef } from "../../../utils/GeneralIdRef";
-import Loading from "../../../components/common/Loading";
 import ssoManagerService from "./services/ssoManagerService";
 
 interface SsoProviderDetailsProps {
@@ -179,7 +178,7 @@ const SsoProviderDetails: React.FC<SsoProviderDetailsProps> = ({
     ssoProviderId;
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <h1>
         {mode} {t("SsoProvider")}
       </h1>
@@ -291,7 +290,7 @@ const SsoProviderDetails: React.FC<SsoProviderDetailsProps> = ({
         {editMode && renderButton(labelApply, form.state.errors, "apply")}
         {renderButton(labelSave, form.state.errors, "save")}
       </form>
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/ssoManager/ssoManager.tsx

@@ -8,12 +8,10 @@ import ssoManagerService, {
   GetSsoProvider,
 } from "./services/ssoManagerService";
 import Button, { ButtonType } from "../../../components/common/Button";
-import Loading from "../../../components/common/Loading";
 import Permission from "../../../components/common/Permission";
 
 const SsoManager: React.FC = () => {
   const { t } = useTranslation(Namespaces.Common);
-  const [loaded, setLoaded] = useState(false);
   const [pagedData, setPagedData] = useState<Paginated<GetSsoProvider>>({
     page: 1,
     pageSize: 10,
@@ -40,10 +38,7 @@ const SsoManager: React.FC = () => {
         filters,
       );
       if (data) {
-        setLoaded(true);
         setPagedData(data);
-      } else {
-        setLoaded(false);
       }
     },
     [filters, sortColumn.key, sortColumn.order],
@@ -59,11 +54,8 @@ const SsoManager: React.FC = () => {
       filters,
     );
     if (data) {
-      setLoaded(true);
       setPagedData(data);
       setSortColumn(newSortColumn);
-    } else {
-      setLoaded(false);
     }
   };
 
@@ -80,11 +72,8 @@ const SsoManager: React.FC = () => {
       newFilters,
     );
     if (data) {
-      setLoaded(true);
       setFilters(newFilters);
       setPagedData(data);
-    } else {
-      setLoaded(false);
     }
   };
 
@@ -108,10 +97,7 @@ const SsoManager: React.FC = () => {
         filters,
       );
       if (data) {
-        setLoaded(true);
         setPagedData(data);
-      } else {
-        setLoaded(false);
       }
     };
 
@@ -119,7 +105,7 @@ const SsoManager: React.FC = () => {
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <Permission privilegeKey="AddSsoProvider">
         <div>
           <Button buttonType={ButtonType.primary} to="add">
@@ -136,7 +122,7 @@ const SsoManager: React.FC = () => {
         onSearch={onSearch}
         onDelete={onDelete}
       />
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/task/assignments/AssignmentComplete.tsx

@@ -3,7 +3,6 @@ import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { toast } from "react-toastify";
 import { Namespaces } from "../../../../i18n/i18n";
-import Loading from "../../../../components/common/Loading";
 import assignmentCompleteService, {
   GetAssignmentForCompletion,
 } from "./services/assignmentCompleteService";
@@ -11,13 +10,11 @@ import assignmentCompleteService, {
 const AssignmentComplete: React.FC = () => {
   const { assignmentId } = useParams<{ assignmentId: string }>();
   const { t } = useTranslation(Namespaces.Common);
-  const [loaded, setLoaded] = useState(false);
   const [assignment, setAssignment] =
     useState<GetAssignmentForCompletion | null>(null);
 
   const loadAssignment = useCallback(async () => {
     if (assignmentId === undefined) {
-      setLoaded(true);
       return;
     }
 
@@ -29,10 +26,8 @@ const AssignmentComplete: React.FC = () => {
       if (assignmentDetails) {
         setAssignment(assignmentDetails);
       }
-      setLoaded(true);
     } catch (ex: any) {
       toast.error(ex.message);
-      setLoaded(true);
     }
   }, [assignmentId]);
 
@@ -41,9 +36,9 @@ const AssignmentComplete: React.FC = () => {
   }, [loadAssignment]);
 
   return (
-    <Loading loaded={loaded}>
+    <>
       {assignment ? <>{assignment.taskName}</> : <>{t("CompleteAssignment")}</>}
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/tasks/tasks.tsx

@@ -4,15 +4,12 @@ import { Namespaces } from "../../../i18n/i18n";
 import Column from "../../../components/common/columns";
 import { Paginated } from "../../../services/Paginated";
 import Button, { ButtonType } from "../../../components/common/Button";
-import { toast } from "react-toastify";
-import Loading from "../../../components/common/Loading";
 import Permission from "../../../components/common/Permission";
 import tasksService, { GetMyAssignments } from "./services/tasksService";
 import TasksTable from "./components/tasksTable";
 
 const Tasks: React.FC = () => {
   const { t } = useTranslation(Namespaces.Common);
-  const [loaded, setLoaded] = useState(false);
   const [pagedData, setPagedData] = useState<Paginated<GetMyAssignments>>({
     page: 1,
     pageSize: 10,
@@ -39,10 +36,7 @@ const Tasks: React.FC = () => {
         filters,
       );
       if (data) {
-        setLoaded(true);
         setPagedData(data);
-      } else {
-        setLoaded(false);
       }
     },
     [filters, sortColumn.key, sortColumn.order],
@@ -59,11 +53,8 @@ const Tasks: React.FC = () => {
     );
 
     if (data) {
-      setLoaded(true);
       setPagedData(data);
       setSortColumn(newSortColumn);
-    } else {
-      setLoaded(false);
     }
   };
 
@@ -80,11 +71,8 @@ const Tasks: React.FC = () => {
     );
 
     if (data) {
-      setLoaded(true);
       setFilters(newFilters);
       setPagedData(data);
-    } else {
-      setLoaded(false);
     }
   };
 
@@ -98,10 +86,7 @@ const Tasks: React.FC = () => {
         filters,
       );
       if (data) {
-        setLoaded(true);
         setPagedData(data);
-      } else {
-        setLoaded(false);
       }
     };
 
@@ -115,15 +100,13 @@ const Tasks: React.FC = () => {
           {t("CreateActivity")}
         </Button>
       </Permission>
-      <Loading loaded={loaded}>
+      <TasksTable
-        <TasksTable
+        data={pagedData}
-          data={pagedData}
+        sortColumn={sortColumn}
-          sortColumn={sortColumn}
+        onChangePage={changePage}
-          onChangePage={changePage}
+        onSort={onSort}
-          onSort={onSort}
+        onSearch={onSearch}
-          onSearch={onSearch}
+      />
-        />
-      </Loading>
     </>
   );
 };

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<GeneralTabProps> = ({ isEditMode }) => {
   if (redirect) return <Navigate to={redirect} />;
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <form onSubmit={handleSubmit}>
         {renderError("_general", form.state.errors)}
         {isEditMode &&
@@ -235,7 +234,7 @@ const GeneralTab: React.FC<GeneralTabProps> = ({ isEditMode }) => {
         {isEditMode && renderButton(labelApply, form.state.errors, "save")}
         {renderButton(labelSave, form.state.errors, "save")}
       </form>
-    </Loading>
+    </>
   );
 };
 

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<Paginated<GetUser>>({
     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 (
-    <Loading loaded={loaded}>
+    <>
       <Permission privilegeKey="AddUser">
         <div>
           <Button buttonType={ButtonType.primary} to="add">
@@ -141,7 +127,7 @@ const Users: React.FC = () => {
         onDelete={onDelete}
         resendConfirmEmail={resentConfirmEmail}
       />
-    </Loading>
+    </>
   );
 };
 

src/modules/manager/workflowTemplates/WorkflowTemplateDetails.tsx

@@ -10,7 +10,6 @@ import templateVersionsService, {
   ReadWorkflowTemplateVersion,
   TaskDefinition,
 } from "./services/WorkflowTemplateService";
-import Loading from "../../../components/common/Loading";
 import { toast } from "react-toastify";
 import Joi from "joi";
 import {
@@ -154,7 +153,7 @@ const WorkflowTemplateDetails: React.FC<{ editMode: boolean }> = ({
     });
   }, []);
 
-  const { loaded, redirect, errors: formErrors, data } = form.state;
+  const { redirect, errors: formErrors, data } = form.state;
   if (redirect) return <Navigate to={redirect} />;
 
   let errors = { ...formErrors };
@@ -214,32 +213,30 @@ const WorkflowTemplateDetails: React.FC<{ editMode: boolean }> = ({
   ];
 
   return (
-    <Loading loaded={loaded}>
+    <div className="full-height-container">
-      <div className="full-height-container">
+      <form onSubmit={handleSubmit}>
-        <form onSubmit={handleSubmit}>
+        <h1>{heading}</h1>
-          <h1>{heading}</h1>
 
-          <div style={{ marginBottom: "1rem" }}>
+        <div style={{ marginBottom: "1rem" }}>
-            {editMode && renderButton(t("Save"), errors, "apply")}
+          {editMode && renderButton(t("Save"), errors, "apply")}
-            {renderButton(t("SaveAndClose"), errors, "save")}
+          {renderButton(t("SaveAndClose"), errors, "save")}
-          </div>
+        </div>
 
-          {Object.keys(errors).length > 0 && (
+        {Object.keys(errors).length > 0 && (
-            <ErrorBlock error={t("ResolveAllValidation")} />
+          <ErrorBlock error={t("ResolveAllValidation")} />
-          )}
+        )}
 
-          {renderError("_general", errors)}
+        {renderError("_general", errors)}
 
-          <HorizontalTabs
+        <HorizontalTabs
-            hashSegment={0}
+          hashSegment={0}
-            activeTab={activeTab}
+          activeTab={activeTab}
-            onTabChange={setActiveTab}
+          onTabChange={setActiveTab}
-          >
+        >
-            {tabs}
+          {tabs}
-          </HorizontalTabs>
+        </HorizontalTabs>
-        </form>
+      </form>
-      </div>
+    </div>
-    </Loading>
   );
 };
 

src/modules/manager/workflowTemplates/WorkflowTemplateManager.tsx

@@ -5,7 +5,6 @@ import Button, { ButtonType } from "../../../components/common/Button";
 import Column from "../../../components/common/columns";
 import Permission from "../../../components/common/Permission";
 import { Paginated } from "../../../services/Paginated";
-import Loading from "../../../components/common/Loading";
 import workflowTemplatesService, {
   ReadWorkflowTemplate,
 } from "./services/WorkflowTemplateService";
@@ -13,7 +12,6 @@ import WorkflowTemplateManagerTable from "./components/WorkflowTemplateTable";
 
 const WotkflowTemplateManager: React.FC = () => {
   const { t } = useTranslation(Namespaces.Common);
-  const [loaded, setLoaded] = useState(false);
   const [pagedData, setPagedData] = useState<Paginated<ReadWorkflowTemplate>>({
     page: 1,
     pageSize: 10,
@@ -40,10 +38,7 @@ const WotkflowTemplateManager: React.FC = () => {
         filters,
       );
       if (data) {
-        setLoaded(true);
         setPagedData(data);
-      } else {
-        setLoaded(false);
       }
     },
     [filters, sortColumn.key, sortColumn.order],
@@ -60,11 +55,8 @@ const WotkflowTemplateManager: React.FC = () => {
     );
 
     if (data) {
-      setLoaded(true);
       setPagedData(data);
       setSortColumn(newSortColumn);
-    } else {
-      setLoaded(false);
     }
   };
 
@@ -81,11 +73,8 @@ const WotkflowTemplateManager: React.FC = () => {
       newFilters,
     );
     if (data) {
-      setLoaded(true);
       setFilters(newFilters);
       setPagedData(data);
-    } else {
-      setLoaded(false);
     }
   };
 
@@ -109,10 +98,7 @@ const WotkflowTemplateManager: React.FC = () => {
         filters,
       );
       if (data) {
-        setLoaded(true);
         setPagedData(data);
-      } else {
-        setLoaded(false);
       }
     };
 
@@ -120,7 +106,7 @@ const WotkflowTemplateManager: React.FC = () => {
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <Permission privilegeKey="AddOrganisation">
         <Button buttonType={ButtonType.primary} to="add">
           {t("Add")}
@@ -140,7 +126,7 @@ const WotkflowTemplateManager: React.FC = () => {
         onSearch={onSearch}
         onDelete={onDelete}
       />
-    </Loading>
+    </>
   );
 };
 

src/modules/profile/components/InternalProfile.tsx

@@ -6,7 +6,6 @@ import { Namespaces } from "../../../i18n/i18n";
 import profileService from "../services/profileService";
 import { InputType } from "../../../components/common/Input";
 import { TwoFactorAuthenticationSettings } from "../models/TwoFactorAuthenticationSettings";
-import Loading from "../../../components/common/Loading";
 import {
   renderError,
   renderButton,
@@ -172,7 +171,6 @@ const InternalProfile: React.FC = () => {
     form.handleSubmit(e, doSubmit);
   };
 
-  const { loaded } = form.state;
   const { usingTwoFactorAuthentication, newPassword } = form.state.data;
   const passwordMaxLength = 255;
 
@@ -273,7 +271,7 @@ const InternalProfile: React.FC = () => {
     );
 
   return (
-    <Loading loaded={loaded}>
+    <>
       <h1>{t("Profile")}</h1>
       <form onSubmit={handleSubmit}>
         {renderError("_general", form.state.errors)}
@@ -345,7 +343,7 @@ const InternalProfile: React.FC = () => {
         <br />
         {renderButton(labelApply, form.state.errors, "apply")}
       </form>
-    </Loading>
+    </>
   );
 };