@@ -99,6 +99,8 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
99
99
// This is what that controls Grading Mode. If future feedback says it's better to default to filter mode, change it here.
100
100
const [ filterMode , setFilterMode ] = useState < boolean > ( false ) ;
101
101
102
+ const isLoading = useMemo ( ( ) => requestCounter > 0 , [ requestCounter ] ) ;
103
+
102
104
const maxPage = useMemo ( ( ) => Math . ceil ( totalRows / pageSize ) - 1 , [ totalRows , pageSize ] ) ;
103
105
const resetPage = useCallback ( ( ) => setPage ( 0 ) , [ setPage ] ) ;
104
106
@@ -264,56 +266,52 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
264
266
265
267
useEffect ( ( ) => {
266
268
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
+ }
309
310
310
- gridRef . current ! . api . hideOverlay ( ) ;
311
+ gridRef . current ! . api . hideOverlay ( ) ;
311
312
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 ( ) ;
317
315
}
318
316
}
319
317
// We ignore the dependency on rowData purposely as we setRowData above.
@@ -392,7 +390,7 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
392
390
large = { true }
393
391
value = { searchQuery }
394
392
onChange = { handleSearchQueryUpdate }
395
- > </ InputGroup >
393
+ / >
396
394
</ GradingFlex >
397
395
398
396
< div className = "ag-theme-quartz" style = { { margin : tableProperties . tableMargins } } >
@@ -404,6 +402,7 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
404
402
components = { tableProperties . customComponents }
405
403
defaultColDef = { tableProperties . defaultColDefs }
406
404
headerHeight = { tableProperties . headerHeight }
405
+ loading = { isLoading }
407
406
overlayLoadingTemplate = { tableProperties . overlayLoadingTemplate }
408
407
overlayNoRowsTemplate = { tableProperties . overlayNoRowsTemplate }
409
408
pagination = { tableProperties . pagination }
@@ -445,14 +444,14 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
445
444
minimal
446
445
icon = { IconNames . DOUBLE_CHEVRON_LEFT }
447
446
onClick = { ( ) => setPage ( 0 ) }
448
- disabled = { page <= 0 }
447
+ disabled = { page <= 0 || isLoading }
449
448
/>
450
449
< Button
451
450
small
452
451
minimal
453
452
icon = { IconNames . ARROW_LEFT }
454
453
onClick = { ( ) => setPage ( page - 1 ) }
455
- disabled = { page <= 0 }
454
+ disabled = { page <= 0 || isLoading }
456
455
/>
457
456
< H6 style = { { margin : 'auto 0' } } >
458
457
Page { maxPage + 1 === 0 ? 0 : page + 1 } of { maxPage + 1 }
@@ -462,14 +461,14 @@ const GradingSubmissionTable: React.FC<GradingSubmissionTableProps> = ({
462
461
minimal
463
462
icon = { IconNames . ARROW_RIGHT }
464
463
onClick = { ( ) => setPage ( page + 1 ) }
465
- disabled = { page >= maxPage }
464
+ disabled = { page >= maxPage || isLoading }
466
465
/>
467
466
< Button
468
467
small
469
468
minimal
470
469
icon = { IconNames . DOUBLE_CHEVRON_RIGHT }
471
470
onClick = { ( ) => setPage ( maxPage ) }
472
- disabled = { page >= maxPage }
471
+ disabled = { page >= maxPage || isLoading }
473
472
/>
474
473
</ GradingFlex >
475
474
</ >
0 commit comments