diff --git a/esp/src/src-react/components/forms/ZAPDialog.tsx b/esp/src/src-react/components/forms/ZAPDialog.tsx index d43147c8f3c..3d4e3e3c5c7 100644 --- a/esp/src/src-react/components/forms/ZAPDialog.tsx +++ b/esp/src/src-react/components/forms/ZAPDialog.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { Checkbox, DefaultButton, Dropdown, Icon, IDropdownProps, IOnRenderComboBoxLabelProps, IStackTokens, ITextFieldProps, mergeStyleSets, PrimaryButton, Stack, TextField, TooltipHost } from "@fluentui/react"; +import { Checkbox, DefaultButton, Dropdown, Icon, IDropdownProps, IOnRenderComboBoxLabelProps, IStackTokens, ITextFieldProps, mergeStyleSets, PrimaryButton, Spinner, Stack, TextField, TooltipHost } from "@fluentui/react"; import { useForm, Controller } from "react-hook-form"; import { LogType } from "@hpcc-js/comms"; import { scopedLogger } from "@hpcc-js/util"; @@ -164,6 +164,8 @@ export const ZAPDialog: React.FunctionComponent = ({ }), [theme]); const [emailDisabled, setEmailDisabled] = React.useState(true); + const [submitDisabled, setSubmitDisabled] = React.useState(false); + const [spinnerHidden, setSpinnerHidden] = React.useState(true); const [columnMode, setColumnMode] = React.useState(ColumnMode.DEFAULT); const [logFormat, setLogFormat] = React.useState(LogFormat.CSV); const [showCustomColumns, setShowCustomColumns] = React.useState(false); @@ -184,6 +186,8 @@ export const ZAPDialog: React.FunctionComponent = ({ const logFilter = data.LogFilter; delete data.LogFilter; + setSubmitDisabled(true); + setSpinnerHidden(false); for (const key in data) { formData.append(key, data[key]); @@ -223,6 +227,8 @@ export const ZAPDialog: React.FunctionComponent = ({ link.click(); link.remove(); + setSubmitDisabled(false); + setSpinnerHidden(true); closeForm(); if (logAccessorMessage !== "") { @@ -253,7 +259,8 @@ export const ZAPDialog: React.FunctionComponent = ({ return - + + closeForm()} /> }>