feat: Add Loader and manage is active on submission

packages/react-formio-container/src/hooks/useSubmission.hook.tsx

@@ -10,7 +10,8 @@ import {
   selectForm,
   selectRoot,
   selectSubmission,
-  Submission
+  Submission,
+  selectIsActive
 } from "@tsed/react-formio";
 import { push } from "connected-react-router";
 import noop from "lodash/noop";
@@ -51,6 +52,8 @@ export function useSubmission(props: UseSubmissionProps) {
     selectSubmission(submissionType, state as any)
   );
 
+  const isActive = useSelector((state) => selectIsActive(type, state));
+
   const url = useSelector(
     (state) =>
       selectRoot(submissionAction === "edit" ? submissionType : type, state)
@@ -155,6 +158,7 @@ export function useSubmission(props: UseSubmissionProps) {
 
   return {
     ...props,
+    isActive,
     submissionId,
     submissionAction,
     auth,

packages/react-formio-container/src/interfaces/FormioContainerOptions.ts

@@ -75,4 +75,5 @@ export interface FormioContainerOptions extends Record<string, unknown> {
   SubmissionComponent?: React.ComponentType<any>;
   SubmissionsComponent?: React.ComponentType<any>;
   RemoveModalComponent?: React.ComponentType<any>;
+  LoaderComponent?: React.ComponentType<any>;
 }

packages/react-formio-container/src/views/submission.view.tsx

@@ -1,4 +1,10 @@
-import { Form, iconClass, RemoveModal, useTooltip } from "@tsed/react-formio";
+import {
+  Form,
+  iconClass,
+  RemoveModal,
+  useTooltip,
+  Loader
+} from "@tsed/react-formio";
 import classnames from "classnames";
 import React from "react";
 import { useParams } from "react-router";
@@ -12,6 +18,7 @@ export interface SubmissionViewProps extends UseFormProps {
 
 export function SubmissionComponent(props: ReturnType<typeof useSubmission>) {
   const {
+    isActive,
     formAction,
     submissionAction,
     form,
@@ -27,6 +34,7 @@ export function SubmissionComponent(props: ReturnType<typeof useSubmission>) {
   } = props;
 
   const RemoveModalComponent = props.RemoveModalComponent || RemoveModal;
+  const LoaderComponent = props.LoaderComponent || Loader;
 
   const copyRef = useTooltip({
     trigger: "hover",
@@ -41,7 +49,8 @@ export function SubmissionComponent(props: ReturnType<typeof useSubmission>) {
   });
 
   return (
-    <div className={"p-4"}>
+    <div className={"p-4 relative"}>
+      <LoaderComponent isActive={isActive} />
       <h2
         className={
           "border-b-1 border-gray-300 text-lg mb-4 pb-1 flex items-center"

packages/react-formio/src/components/index.ts

@@ -20,3 +20,4 @@ export * from "./select/select.component";
 export * from "./submissions-table/submissionsTable.component";
 export * from "./table/table.component";
 export * from "./tabs/tabs.component";
+export * from "./loader/loader.component";

packages/react-formio/src/components/loader/loader.component.spec.tsx

@@ -0,0 +1,21 @@
+import { render } from "@testing-library/react";
+import React from "react";
+import { Loader } from "./loader.component";
+
+describe("Loader", () => {
+  it("should render a component (with isActive = true)", () => {
+    const { getByTestId } = render(<Loader isActive={true} />);
+
+    const icon = getByTestId("icon");
+
+    expect(icon).toBeTruthy();
+  });
+
+  it("should render a component (with isActive = false)", () => {
+    const { queryByTestId } = render(<Loader isActive={false} />);
+
+    const icon = queryByTestId("icon");
+
+    expect(icon).toBeFalsy();
+  });
+});

packages/react-formio/src/components/loader/loader.component.tsx

@@ -0,0 +1,39 @@
+import classnames from "classnames";
+import PropTypes from "prop-types";
+import React from "react";
+import { iconClass } from "../../utils/iconClass";
+
+export interface LoaderProps {
+  isActive?: boolean;
+  color?: string;
+  icon?: string;
+  className?: string;
+}
+
+export function Loader({
+  isActive,
+  color = "blue",
+  icon = "radio-circle",
+  className = ""
+}: LoaderProps) {
+  return (
+    <div className={classnames("opacity-85 z-20 relative", className)}>
+      {isActive && (
+        <div className='flex items-center justify-center p-5 absolute top-0 right-0 left-0 bottom-0 bg-white'>
+          <span
+            data-testid={"icon"}
+            color={color}
+            className={`text-11xl ${iconClass(undefined, icon, true)}`}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+Loader.propTypes = {
+  isActive: PropTypes.bool,
+  icon: PropTypes.bool,
+  color: PropTypes.string,
+  className: PropTypes.string
+};

packages/react-formio/src/stores/root/root.selectors.spec.ts

@@ -1,4 +1,9 @@
-import { selectError, selectIsActive, selectRoot } from "./root.selectors";
+import {
+  oneOfIsActive,
+  selectError,
+  selectIsActive,
+  selectRoot
+} from "./root.selectors";
 
 describe("root Selectors", () => {
   describe("selectRoot()", () => {
@@ -48,4 +53,47 @@ describe("root Selectors", () => {
       ).toEqual(true);
     });
   });
+  describe("oneOfIsActive", () => {
+    it("should is active state", () => {
+      expect(
+        oneOfIsActive(
+          "loader",
+          "other"
+        )({
+          loader: {
+            isActive: false
+          },
+          other: {
+            isActive: true
+          }
+        })
+      ).toEqual(true);
+      expect(
+        oneOfIsActive(
+          "loader",
+          "other"
+        )({
+          loader: {
+            isActive: true
+          },
+          other: {
+            isActive: false
+          }
+        })
+      ).toEqual(true);
+      expect(
+        oneOfIsActive(
+          "loader",
+          "other"
+        )({
+          loader: {
+            isActive: false
+          },
+          other: {
+            isActive: false
+          }
+        })
+      ).toEqual(false);
+    });
+  });
 });

packages/react-formio/src/stores/root/root.selectors.ts

@@ -27,3 +27,15 @@ export const selectIsActive = (
   name: string,
   state: Record<string, any>
 ): boolean => get(selectRoot(name, state), "isActive");
+
+export function oneOfIsActive(...names: string[]) {
+  return (state: any) => {
+    return !!names.find((name) => {
+      return get(
+        state,
+        `${name}.isActive`,
+        get(state, `${name}.current.isActive`)
+      );
+    });
+  };
+}

packages/tailwind-formio/src/templates/tailwind/iconClass.ts

@@ -64,5 +64,12 @@ export default (
     }
   }
 
-  return spinning ? `${iconset} ${name} ${iconset}-spin` : `${iconset} ${name}`;
+  if (spinning) {
+    if (name === "bx-radio-circle") {
+      return `${iconset} ${name} bx-burst`;
+    }
+    return `${iconset} ${name} bx-spin`;
+  }
+
+  return `${iconset} ${name}`;
 };