Handle submit button during query fetch

src/components/mapathon/mapathonReportForm.js

@@ -12,6 +12,7 @@ import { setLoading, setTriggerSubmit } from "../../features/form/formSlice";
 import { FormContext } from "../../context/formContext";
 import { getTimeZone } from "../../utils/timeUtils";
 import { validateMapathonFormData } from "../../utils/validationUtils";
+import { SpinnerIcon } from "../../assets/svgIcons";
 import messages from "../messages";
 
 export const MapathonReportForm = ({ fetch, error, loading }) => {
@@ -172,14 +173,22 @@ export const MapathonReportForm = ({ fetch, error, loading }) => {
             />
           </div>
         </div>
-        <div className="text-center mt-4">
-          <SubmitButton
-            styles="bg-red text-white py-3 px-10 text-xl"
-            disabled={loading}
-          >
-            <FormattedMessage {...messages.mapathonSubmitForm} />
-          </SubmitButton>
-        </div>
+        {!loading && (
+          <div className="text-center mt-4">
+            <SubmitButton
+              styles="bg-red text-white py-3 px-10 text-xl"
+              disabled={loading}
+            >
+              <FormattedMessage {...messages.mapathonSubmitForm} />
+            </SubmitButton>
+          </div>
+        )}
+        {loading && (
+          <div className="mx-auto text-center w-1/4 p-1 mt-5">
+            <SpinnerIcon className="animate-spin w-5 h-5 mr-2 mb-1 inline text-red" />
+            Loading...
+          </div>
+        )}
       </form>
       {formError && (
         <Error>

src/components/userGroup/userGroupForm.js

@@ -7,6 +7,7 @@ import { SubmitButton } from "../button";
 import { Error } from "../formResponses";
 import { UserGroupErrorMessage } from "./userGroupError";
 import { getTimeZone } from "../../utils/timeUtils";
+import { SpinnerIcon } from "../../assets/svgIcons";
 import messages from "./messages";
 
 export const UserGroupReportForm = ({
@@ -16,6 +17,8 @@ export const UserGroupReportForm = ({
   setUsers,
   formError,
   setFormError,
+  setLoading,
+  loading,
 }) => {
   const intl = useIntl();
 
@@ -34,6 +37,7 @@ export const UserGroupReportForm = ({
     event.preventDefault();
     if (formData.usernames.length > 0) {
       setUsers([]);
+      setLoading(true);
       fetch(formData); // API call
       setFormError(null);
     } else {
@@ -124,11 +128,19 @@ export const UserGroupReportForm = ({
             />
           </div>
         </div>
-        <div className="text-center mt-4">
-          <SubmitButton styles="bg-red text-white py-3 px-10 text-xl">
-            <FormattedMessage {...messages.Submit} />
-          </SubmitButton>
-        </div>
+        {!loading && (
+          <div className="text-center mt-4">
+            <SubmitButton styles="bg-red text-white py-3 px-10 text-xl">
+              <FormattedMessage {...messages.Submit} />
+            </SubmitButton>
+          </div>
+        )}
+        {loading && (
+          <div className="mx-auto text-center w-1/4 p-1 mt-5">
+            <SpinnerIcon className="animate-spin w-5 h-5 mr-2 mb-1 inline text-red" />
+            Loading...
+          </div>
+        )}
       </form>
       {formError && (
         <Error>

src/components/userGroup/userGroupResults.js

@@ -19,7 +19,7 @@ export function UserGroupResultsTable({
   columns,
   data,
   userDataCheck,
-  loading,
+  tableLoading,
 }) {
   const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
     useTable(
@@ -104,7 +104,7 @@ export function UserGroupResultsTable({
                     })}
                   </tbody>
                 </table>
-                {loading ? (
+                {tableLoading ? (
                   <div className="text-center w-11/12 mx-auto">
                     <SpinnerIcon className="animate-spin w-5 h-5 mt-2 inline text-red" />
                   </div>

src/views/MapathonReports.js

@@ -15,7 +15,6 @@ import { setTriggerSubmit } from "../features/form/formSlice";
 import { MiniNavBar } from "../components/nav/navbar";
 import { aggregateMapathonUserData } from "../utils/mapathonDataUtils";
 import { MapathonDetailedTableHeaders } from "../components/mapathon/constants";
-import { SpinnerIcon } from "../assets/svgIcons";
 
 const MAPATHON_PAGES = [
   { pageTitle: "Mapathon Summary Report", pageURL: "/mapathon-report/summary" },
@@ -51,12 +50,6 @@ export const MapathonSummaryReport = (props) => {
       <div className="text-center mt-4">
         <MapathonRedirectButton triggerFn={triggeredSubmit} />
       </div>
-      {isLoading && (
-        <div className="mx-auto text-center w-1/4 p-1 mt-5">
-          <SpinnerIcon className="animate-spin w-5 h-5 mr-2 mb-1 inline text-red" />
-          Loading...
-        </div>
-      )}
       {data && <MapathonSummaryResults data={data} />}
     </div>
   );
@@ -83,12 +76,6 @@ export const MapathonDetailedReport = () => {
         fetch={mutate}
         loading={isLoading || triggeredLoading}
       />
-      {(isLoading || triggeredLoading) && (
-        <div className="mx-auto text-center w-1/4 p-1 mt-5">
-          <SpinnerIcon className="animate-spin w-5 h-5 mr-2 mb-1 inline text-red" />
-          Loading...
-        </div>
-      )}
       {data && (
         <MapathonDetailedResultsTable
           data={aggregateMapathonUserData(data)}

src/views/UserGroupReport.js

@@ -9,7 +9,6 @@ import { getUserIds, getUserStats } from "../queries/getUserStats";
 import { MiniNavBar } from "../components/nav/navbar";
 import { UserGroupColumnHeadings } from "../components/userGroup/constants";
 import { aggregateUserGroupData } from "../utils/userGroupUtils";
-import { SpinnerIcon } from "../assets/svgIcons";
 
 const userGroupPage = [
   { pageTitle: "User Group Report", pageURL: "/user-report" },
@@ -19,12 +18,14 @@ export const UserGroupReport = () => {
   const { userGroupFormData, setUserGroupFormData } = useContext(FormContext);
   const [formError, setFormError] = useState(null);
   const [userIds, setUserIds] = useState([]);
-  const [users, setUsers] = useState();
+  const [users, setUsers] = useState(null);
+  const [loading, setLoading] = useState(false);
 
   const { mutate, data, isLoading, error } = useMutation(getUserIds);
 
   useEffect(() => {
     if (error) {
+      setLoading(false);
       if (error.response.status === 500) {
         setFormError(error.response.data);
       } else {
@@ -39,6 +40,8 @@ export const UserGroupReport = () => {
 
   const fetchUserStats = useCallback(
     (ids) => {
+      setLoading(true);
+      setUsers([]);
       ids.map((i) =>
         getUserStats(i.userId, userGroupFormData)
           .then((res) => {
@@ -59,9 +62,16 @@ export const UserGroupReport = () => {
     [userGroupFormData]
   );
 
+  useEffect(() => {
+    if (isLoading) {
+      setLoading(isLoading);
+    }
+  }, [isLoading]);
+
   useEffect(() => {
     if (userIds) {
       fetchUserStats(userIds);
+      setLoading(false);
     }
   }, [userIds]);
 
@@ -75,19 +85,15 @@ export const UserGroupReport = () => {
         setUsers={setUsers}
         formError={formError}
         setFormError={setFormError}
+        setLoading={setLoading}
+        loading={loading}
       />
-      {isLoading && (
-        <div className="mx-auto text-center w-1/4 p-1 mt-5">
-          <SpinnerIcon className="animate-spin w-5 h-5 mr-2 mb-1 inline text-red" />
-          Loading...
-        </div>
-      )}
       {data && (
         <UserGroupResultsTable
           columns={UserGroupColumnHeadings}
           data={aggregateUserGroupData(users)}
           userDataCheck={userIds && userIds.length > 0}
-          loading={userIds.length !== users.length}
+          tableLoading={userIds.length !== users.length}
         />
       )}
     </div>