@@ -99,6 +99,8 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
9999 // This is what that controls Grading Mode. If future feedback says it's better to default to filter mode, change it here.
100100 const [ filterMode , setFilterMode ] = useState < boolean > ( false ) ;
101101
102+ const isLoading = useMemo ( ( ) => requestCounter > 0 , [ requestCounter ] ) ;
103+
102104 const maxPage = useMemo ( ( ) => Math . ceil ( totalRows / pageSize ) - 1 , [ totalRows , pageSize ] ) ;
103105 const resetPage = useCallback ( ( ) => setPage ( 0 ) , [ setPage ] ) ;
104106
@@ -264,56 +266,52 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
264266
265267 useEffect ( ( ) => {
266268 if ( gridRef . current ?. api ) {
267- if ( requestCounter <= 0 ) {
268- const newData : IGradingTableRow [ ] = [ ] ;
269-
270- const sameData : boolean = submissions . reduce ( ( sameData , currentSubmission , index ) => {
271- const newRow : IGradingTableRow = {
272- assessmentName : currentSubmission . assessmentName ,
273- assessmentType : currentSubmission . assessmentType ,
274- studentName : currentSubmission . studentName
275- ? currentSubmission . studentName
276- : currentSubmission . studentNames
277- ? currentSubmission . studentNames . join ( ', ' )
278- : '' ,
279- studentUsername : currentSubmission . studentUsername
280- ? currentSubmission . studentUsername
281- : currentSubmission . studentUsernames
282- ? currentSubmission . studentUsernames . join ( ', ' )
283- : '' ,
284- groupName : currentSubmission . groupName ,
285- progressStatus : currentSubmission . progress ,
286- xp :
287- currentSubmission . currentXp +
288- ' (+' +
289- currentSubmission . xpBonus +
290- ') / ' +
291- currentSubmission . maxXp ,
292- actionsIndex : currentSubmission . submissionId ,
293- courseID : courseId !
294- } ;
295- newData . push ( newRow ) ;
296- return (
297- sameData &&
298- newRow . actionsIndex === rowData ?. [ index ] ?. actionsIndex &&
299- newRow . studentUsername === rowData ?. [ index ] ?. studentUsername &&
300- newRow . groupName === rowData ?. [ index ] ?. groupName &&
301- newRow . progressStatus === rowData ?. [ index ] ?. progressStatus &&
302- newRow . xp === rowData ?. [ index ] ?. xp
303- ) ;
304- } , submissions . length === rowData ?. length ) ;
305-
306- if ( ! sameData ) {
307- setRowData ( newData ) ;
308- }
269+ const newData : IGradingTableRow [ ] = [ ] ;
270+
271+ const sameData : boolean = submissions . reduce ( ( sameData , currentSubmission , index ) => {
272+ const newRow : IGradingTableRow = {
273+ assessmentName : currentSubmission . assessmentName ,
274+ assessmentType : currentSubmission . assessmentType ,
275+ studentName : currentSubmission . studentName
276+ ? currentSubmission . studentName
277+ : currentSubmission . studentNames
278+ ? currentSubmission . studentNames . join ( ', ' )
279+ : '' ,
280+ studentUsername : currentSubmission . studentUsername
281+ ? currentSubmission . studentUsername
282+ : currentSubmission . studentUsernames
283+ ? currentSubmission . studentUsernames . join ( ', ' )
284+ : '' ,
285+ groupName : currentSubmission . groupName ,
286+ progressStatus : currentSubmission . progress ,
287+ xp :
288+ currentSubmission . currentXp +
289+ ' (+' +
290+ currentSubmission . xpBonus +
291+ ') / ' +
292+ currentSubmission . maxXp ,
293+ actionsIndex : currentSubmission . submissionId ,
294+ courseID : courseId !
295+ } ;
296+ newData . push ( newRow ) ;
297+ return (
298+ sameData &&
299+ newRow . actionsIndex === rowData ?. [ index ] ?. actionsIndex &&
300+ newRow . studentUsername === rowData ?. [ index ] ?. studentUsername &&
301+ newRow . groupName === rowData ?. [ index ] ?. groupName &&
302+ newRow . progressStatus === rowData ?. [ index ] ?. progressStatus &&
303+ newRow . xp === rowData ?. [ index ] ?. xp
304+ ) ;
305+ } , submissions . length === rowData ?. length ) ;
306+
307+ if ( ! sameData ) {
308+ setRowData ( newData ) ;
309+ }
309310
310- gridRef . current ! . api . hideOverlay ( ) ;
311+ gridRef . current ! . api . hideOverlay ( ) ;
311312
312- if ( newData . length === 0 && requestCounter <= 0 ) {
313- gridRef . current ! . api . showNoRowsOverlay ( ) ;
314- }
315- } else {
316- gridRef . current ! . api . showLoadingOverlay ( ) ;
313+ if ( newData . length === 0 && requestCounter <= 0 ) {
314+ gridRef . current ! . api . showNoRowsOverlay ( ) ;
317315 }
318316 }
319317 // We ignore the dependency on rowData purposely as we setRowData above.
@@ -392,7 +390,7 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
392390 large = { true }
393391 value = { searchQuery }
394392 onChange = { handleSearchQueryUpdate }
395- > </ InputGroup >
393+ / >
396394 </ GradingFlex >
397395
398396 < div className = "ag-theme-quartz" style = { { margin : tableProperties . tableMargins } } >
@@ -404,6 +402,7 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
404402 components = { tableProperties . customComponents }
405403 defaultColDef = { tableProperties . defaultColDefs }
406404 headerHeight = { tableProperties . headerHeight }
405+ loading = { isLoading }
407406 overlayLoadingTemplate = { tableProperties . overlayLoadingTemplate }
408407 overlayNoRowsTemplate = { tableProperties . overlayNoRowsTemplate }
409408 pagination = { tableProperties . pagination }
@@ -445,14 +444,14 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
445444 minimal
446445 icon = { IconNames . DOUBLE_CHEVRON_LEFT }
447446 onClick = { ( ) => setPage ( 0 ) }
448- disabled = { page <= 0 }
447+ disabled = { page <= 0 || isLoading }
449448 />
450449 < Button
451450 small
452451 minimal
453452 icon = { IconNames . ARROW_LEFT }
454453 onClick = { ( ) => setPage ( page - 1 ) }
455- disabled = { page <= 0 }
454+ disabled = { page <= 0 || isLoading }
456455 />
457456 < H6 style = { { margin : 'auto 0' } } >
458457 Page { maxPage + 1 === 0 ? 0 : page + 1 } of { maxPage + 1 }
@@ -462,14 +461,14 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
462461 minimal
463462 icon = { IconNames . ARROW_RIGHT }
464463 onClick = { ( ) => setPage ( page + 1 ) }
465- disabled = { page >= maxPage }
464+ disabled = { page >= maxPage || isLoading }
466465 />
467466 < Button
468467 small
469468 minimal
470469 icon = { IconNames . DOUBLE_CHEVRON_RIGHT }
471470 onClick = { ( ) => setPage ( maxPage ) }
472- disabled = { page >= maxPage }
471+ disabled = { page >= maxPage || isLoading }
473472 />
474473 </ GradingFlex >
475474 </ >
0 commit comments