feat: spinner for imports (#15055)

* Update tests

* feat: spinner for imports

* Use loading button instead

* Small fixes

* Small fix
This commit is contained in:
Beto Dealmeida 2021-06-09 16:14:49 -07:00 committed by GitHub
parent 2d3f552b51
commit 1db92cc13a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 2 deletions

View File

@ -62,6 +62,7 @@ export interface ButtonProps {
href?: string;
htmlType?: 'button' | 'submit' | 'reset';
cta?: boolean;
loading?: boolean | { delay?: number | undefined } | undefined;
}
export default function Button(props: ButtonProps) {

View File

@ -136,6 +136,7 @@ const ImportModelsModal: FunctionComponent<ImportModelsModalProps> = ({
);
const [confirmedOverwrite, setConfirmedOverwrite] = useState<boolean>(false);
const [fileList, setFileList] = useState<UploadFile[]>([]);
const [importingModel, setImportingModel] = useState<boolean>(false);
const clearModal = () => {
setFileList([]);
@ -143,6 +144,7 @@ const ImportModelsModal: FunctionComponent<ImportModelsModalProps> = ({
setPasswords({});
setNeedsOverwriteConfirm(false);
setConfirmedOverwrite(false);
setImportingModel(false);
};
const handleErrorMsg = (msg: string) => {
@ -157,10 +159,16 @@ const ImportModelsModal: FunctionComponent<ImportModelsModalProps> = ({
useEffect(() => {
setPasswordFields(passwordsNeeded);
if (passwordsNeeded.length > 0) {
setImportingModel(false);
}
}, [passwordsNeeded, setPasswordFields]);
useEffect(() => {
setNeedsOverwriteConfirm(alreadyExists.length > 0);
if (alreadyExists.length > 0) {
setImportingModel(false);
}
}, [alreadyExists, setNeedsOverwriteConfirm]);
// Functions
@ -175,6 +183,7 @@ const ImportModelsModal: FunctionComponent<ImportModelsModalProps> = ({
return;
}
setImportingModel(true);
importResource(
fileList[0].originFileObj,
passwords,
@ -270,7 +279,9 @@ const ImportModelsModal: FunctionComponent<ImportModelsModalProps> = ({
name="model"
className="import-model-modal"
disablePrimaryButton={
fileList.length === 0 || (needsOverwriteConfirm && !confirmedOverwrite)
fileList.length === 0 ||
(needsOverwriteConfirm && !confirmedOverwrite) ||
importingModel
}
onHandledPrimaryAction={onUpload}
onHide={hide}
@ -292,7 +303,7 @@ const ImportModelsModal: FunctionComponent<ImportModelsModalProps> = ({
// upload is handled by hook
customRequest={() => {}}
>
<Button>Select file</Button>
<Button loading={importingModel}>Select file</Button>
</Upload>
</StyledInputContainer>
{renderPasswordFields()}