diff --git a/assets/src/components/AssignmentGoalInput.js b/assets/src/components/AssignmentGoalInput.js
index 496b3145..14c4bdf4 100644
--- a/assets/src/components/AssignmentGoalInput.js
+++ b/assets/src/components/AssignmentGoalInput.js
@@ -32,7 +32,7 @@ function AssignmentGoalInput (props) {
} = props
const [goalGradeInternal, setGoalGradeInternal] = useState(goalGrade)
- const debouncedGoalGrade = useRef(debounce(q => setGoalGrade(q), 500)).current
+ const debouncedGoalGrade = useRef(debounce(q => setGoalGrade(q), 250)).current
const updateGoalGradeInternal = (grade) => {
const v = { courseGoalGrade: grade }
if (goalGrade !== '') {
diff --git a/assets/src/components/UserSettingSnackbar.js b/assets/src/components/UserSettingSnackbar.js
index 85c4a0e7..333e5212 100644
--- a/assets/src/components/UserSettingSnackbar.js
+++ b/assets/src/components/UserSettingSnackbar.js
@@ -1,8 +1,9 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
import Snackbar from '@mui/material/Snackbar'
import IconButton from '@mui/material/IconButton'
import CloseIcon from '@mui/icons-material/Close'
import Slide from '@mui/material/Slide'
+import debounce from 'lodash.debounce'
function SlideTransition (props) {
return
@@ -13,22 +14,28 @@ function UserSettingSnackbar (props) {
saved,
response,
successMessage = 'Setting saved successfully!',
- failureMessage = 'Setting not saved.'
+ failureMessage = 'Setting not saved.',
+ debounceAmount = 0 // in milliseconds, for delaying when the toast is shown
} = props
const [savedSnackbarOpen, setSavedSnackbarOpen] = useState(false)
const [snackbarMessage, setSnackbarMessage] = useState('')
+ // if debounceAmount is 0, the snackbar will show immediately
+ const openSnackbarWithDebounce = useCallback(
+ debounce((message) => {
+ setSnackbarMessage(message)
+ setSavedSnackbarOpen(true)
+ }, debounceAmount),
+ [debounceAmount]
+ )
+
useEffect(() => {
if (saved) {
- if (response.default === 'success') {
- setSnackbarMessage(successMessage)
- } else {
- setSnackbarMessage(failureMessage)
- }
- setSavedSnackbarOpen(true)
+ const message = response.default === 'success' ? successMessage : failureMessage
+ openSnackbarWithDebounce(message)
}
- }, [saved])
+ }, [saved, openSnackbarWithDebounce])
const snackbarDuration = Math.max(snackbarMessage.length * 200, 4000)
@@ -38,9 +45,6 @@ function UserSettingSnackbar (props) {
vertical: 'bottom',
horizontal: 'left'
}}
- ContentProps={{
- role: 'alertdialog'
- }}
open={savedSnackbarOpen}
autoHideDuration={snackbarDuration}
TransitionComponent={SlideTransition}
diff --git a/assets/src/containers/AssignmentPlanningV2.js b/assets/src/containers/AssignmentPlanningV2.js
index 9939ef54..8b17356f 100644
--- a/assets/src/containers/AssignmentPlanningV2.js
+++ b/assets/src/containers/AssignmentPlanningV2.js
@@ -293,6 +293,7 @@ function AssignmentPlanningV2 (props) {