Resolve loading indicator issues in grading table

src/pages/academy/grading/Grading.tsx

@@ -1,6 +1,6 @@
 import { Button, Icon, NonIdealState, Position, Spinner, SpinnerSize } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Navigate, useParams } from 'react-router';
 import SessionActions from 'src/commons/application/actions/SessionActions';
@@ -57,6 +57,9 @@ const Grading: React.FC = () => {
   const dispatch = useDispatch();
   const allColsSortStates = useTypedSelector(state => state.workspaces.grading.allColsSortStates);
   const hasLoadedBefore = useTypedSelector(state => state.workspaces.grading.hasLoadedBefore);
+  const requestCounter = useTypedSelector(state => state.workspaces.grading.requestCounter);
+
+  const isLoading = useMemo(() => requestCounter > 0, [requestCounter]);
 
   const updateGradingOverviewsCallback = useCallback(
     (page: number, filterParams: object) => {
@@ -207,6 +210,7 @@ const Grading: React.FC = () => {
                   setAnimateRefresh(true);
                 }}
                 onAnimationEnd={e => setAnimateRefresh(false)}
+                disabled={isLoading}
               >
                 <Icon htmlTitle="Refresh" icon={IconNames.REFRESH} />
               </Button>

src/pages/academy/grading/subcomponents/GradingActions.tsx

@@ -1,4 +1,4 @@
-import { Button, Icon, Tooltip } from '@blueprintjs/core';
+import { Button, Icon, Position, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import React from 'react';
 import { useDispatch } from 'react-redux';
@@ -82,7 +82,7 @@ const GradingActions: React.FC<Props> = ({ submissionId, style, progress, filter
       {filterMode && (
         <Link to={`/courses/${courseId}/grading/${submissionId}`}>
           <GradingFlex alignItems="center" className="grading-action-icons grading-action-icons-bg">
-            <Tooltip content="Grade">
+            <Tooltip position={Position.TOP} content="Grade">
               <Icon icon={IconNames.EDIT} />
             </Tooltip>
           </GradingFlex>
@@ -96,7 +96,7 @@ const GradingActions: React.FC<Props> = ({ submissionId, style, progress, filter
           style={{ padding: 0 }}
           onClick={handleReautogradeClick}
         >
-          <Tooltip content="Reautograde">
+          <Tooltip position={Position.TOP} content="Reautograde">
             <Icon icon={IconNames.REFRESH} />
           </Tooltip>
         </Button>
@@ -109,23 +109,23 @@ const GradingActions: React.FC<Props> = ({ submissionId, style, progress, filter
           style={{ padding: 0 }}
           onClick={handleUnsubmitClick}
         >
-          <Tooltip content="Unsubmit">
+          <Tooltip position={Position.TOP} content="Unsubmit">
             <Icon icon={IconNames.UNDO} />
           </Tooltip>
         </Button>
       )}
 
       {isGraded && (
         <Button className="grading-action-icons" minimal onClick={handlePublishClick}>
-          <Tooltip content="Publish">
+          <Tooltip position={Position.TOP} content="Publish">
             <Icon icon={IconNames.SEND_TO_GRAPH} />
           </Tooltip>
         </Button>
       )}
 
       {isPublished && (
         <Button className="grading-action-icons" minimal onClick={handleUnpublishClick}>
-          <Tooltip content="Unpublish">
+          <Tooltip position={Position.TOP} content="Unpublish">
             <Icon icon={IconNames.EXCLUDE_ROW} />
           </Tooltip>
         </Button>

src/pages/academy/grading/subcomponents/GradingSubmissionsTable.tsx

@@ -99,6 +99,8 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
   // This is what that controls Grading Mode. If future feedback says it's better to default to filter mode, change it here.
   const [filterMode, setFilterMode] = useState<boolean>(false);
 
+  const isLoading = useMemo(() => requestCounter > 0, [requestCounter]);
+
   const maxPage = useMemo(() => Math.ceil(totalRows / pageSize) - 1, [totalRows, pageSize]);
   const resetPage = useCallback(() => setPage(0), [setPage]);
 
@@ -264,56 +266,52 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
 
   useEffect(() => {
     if (gridRef.current?.api) {
-      if (requestCounter <= 0) {
-        const newData: IGradingTableRow[] = [];
-
-        const sameData: boolean = submissions.reduce((sameData, currentSubmission, index) => {
-          const newRow: IGradingTableRow = {
-            assessmentName: currentSubmission.assessmentName,
-            assessmentType: currentSubmission.assessmentType,
-            studentName: currentSubmission.studentName
-              ? currentSubmission.studentName
-              : currentSubmission.studentNames
-                ? currentSubmission.studentNames.join(', ')
-                : '',
-            studentUsername: currentSubmission.studentUsername
-              ? currentSubmission.studentUsername
-              : currentSubmission.studentUsernames
-                ? currentSubmission.studentUsernames.join(', ')
-                : '',
-            groupName: currentSubmission.groupName,
-            progressStatus: currentSubmission.progress,
-            xp:
-              currentSubmission.currentXp +
-              ' (+' +
-              currentSubmission.xpBonus +
-              ') / ' +
-              currentSubmission.maxXp,
-            actionsIndex: currentSubmission.submissionId,
-            courseID: courseId!
-          };
-          newData.push(newRow);
-          return (
-            sameData &&
-            newRow.actionsIndex === rowData?.[index]?.actionsIndex &&
-            newRow.studentUsername === rowData?.[index]?.studentUsername &&
-            newRow.groupName === rowData?.[index]?.groupName &&
-            newRow.progressStatus === rowData?.[index]?.progressStatus &&
-            newRow.xp === rowData?.[index]?.xp
-          );
-        }, submissions.length === rowData?.length);
-
-        if (!sameData) {
-          setRowData(newData);
-        }
+      const newData: IGradingTableRow[] = [];
+
+      const sameData: boolean = submissions.reduce((sameData, currentSubmission, index) => {
+        const newRow: IGradingTableRow = {
+          assessmentName: currentSubmission.assessmentName,
+          assessmentType: currentSubmission.assessmentType,
+          studentName: currentSubmission.studentName
+            ? currentSubmission.studentName
+            : currentSubmission.studentNames
+              ? currentSubmission.studentNames.join(', ')
+              : '',
+          studentUsername: currentSubmission.studentUsername
+            ? currentSubmission.studentUsername
+            : currentSubmission.studentUsernames
+              ? currentSubmission.studentUsernames.join(', ')
+              : '',
+          groupName: currentSubmission.groupName,
+          progressStatus: currentSubmission.progress,
+          xp:
+            currentSubmission.currentXp +
+            ' (+' +
+            currentSubmission.xpBonus +
+            ') / ' +
+            currentSubmission.maxXp,
+          actionsIndex: currentSubmission.submissionId,
+          courseID: courseId!
+        };
+        newData.push(newRow);
+        return (
+          sameData &&
+          newRow.actionsIndex === rowData?.[index]?.actionsIndex &&
+          newRow.studentUsername === rowData?.[index]?.studentUsername &&
+          newRow.groupName === rowData?.[index]?.groupName &&
+          newRow.progressStatus === rowData?.[index]?.progressStatus &&
+          newRow.xp === rowData?.[index]?.xp
+        );
+      }, submissions.length === rowData?.length);
+
+      if (!sameData) {
+        setRowData(newData);
+      }
 
-        gridRef.current!.api.hideOverlay();
+      gridRef.current!.api.hideOverlay();
 
-        if (newData.length === 0 && requestCounter <= 0) {
-          gridRef.current!.api.showNoRowsOverlay();
-        }
-      } else {
-        gridRef.current!.api.showLoadingOverlay();
+      if (newData.length === 0 && requestCounter <= 0) {
+        gridRef.current!.api.showNoRowsOverlay();
       }
     }
     // We ignore the dependency on rowData purposely as we setRowData above.
@@ -392,7 +390,7 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
           large={true}
           value={searchQuery}
           onChange={handleSearchQueryUpdate}
-        ></InputGroup>
+        />
       </GradingFlex>
 
       <div className="ag-theme-quartz" style={{ margin: tableProperties.tableMargins }}>
@@ -404,6 +402,7 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
           components={tableProperties.customComponents}
           defaultColDef={tableProperties.defaultColDefs}
           headerHeight={tableProperties.headerHeight}
+          loading={isLoading}
           overlayLoadingTemplate={tableProperties.overlayLoadingTemplate}
           overlayNoRowsTemplate={tableProperties.overlayNoRowsTemplate}
           pagination={tableProperties.pagination}
@@ -445,14 +444,14 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
           minimal
           icon={IconNames.DOUBLE_CHEVRON_LEFT}
           onClick={() => setPage(0)}
-          disabled={page <= 0}
+          disabled={page <= 0 || isLoading}
         />
         <Button
           small
           minimal
           icon={IconNames.ARROW_LEFT}
           onClick={() => setPage(page - 1)}
-          disabled={page <= 0}
+          disabled={page <= 0 || isLoading}
         />
         <H6 style={{ margin: 'auto 0' }}>
           Page {maxPage + 1 === 0 ? 0 : page + 1} of {maxPage + 1}
@@ -462,14 +461,14 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
           minimal
           icon={IconNames.ARROW_RIGHT}
           onClick={() => setPage(page + 1)}
-          disabled={page >= maxPage}
+          disabled={page >= maxPage || isLoading}
         />
         <Button
           small
           minimal
           icon={IconNames.DOUBLE_CHEVRON_RIGHT}
           onClick={() => setPage(maxPage)}
-          disabled={page >= maxPage}
+          disabled={page >= maxPage || isLoading}
         />
       </GradingFlex>
     </>