Resolve loading indicator issues in grading table (#3064)

* Use updated AGGrid API for async loading logo

Current implementation uses the outdated api.showLoadingOverlay(), which
causes issues in loading as the loading logo disappears even before
the data arrives. This commit uses the current method of using the
"loading" field in the AGGrid component, which solves the loading
mismatch issue.

* Block refreshing while loading

* Remove unnecesssary closing tag

* Update tooltip position for visibility

---------

Co-authored-by: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>

Author: josh1248

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>
     </>