WP-38: Prevent multiple clicks to button, add spinner (#819)

* disabled after one click; added spinner

* fixed prettier

* using isLoading to handle spinner

* prettier

---------

Co-authored-by: Shayan Khan <shayanaijaz@gmail.com>
Co-authored-by: Sal Tijerina <r.sal.tijerina@gmail.com>

client/src/components/DataFiles/DataFilesModals/DataFilesMkdirModal.jsx

@@ -58,22 +58,30 @@ const DataFilesMkdirModal = () => {
           validationSchema={validationSchema}
           onSubmit={mkdirCallback}
         >
-          <Form>
-            <ModalHeader toggle={toggle} charCode="&#xe912;">
-              Creating folder in {systemDisplayName}/{params.path}
-            </ModalHeader>
-            <ModalBody>
-              <FormField
-                name="dirname"
-                label="Enter a name for the new folder:"
-              />
-            </ModalBody>
-            <ModalFooter>
-              <Button type="primary" size="long" attr="submit">
-                Create Folder
-              </Button>
-            </ModalFooter>
-          </Form>
+          {({ isSubmitting }) => (
+            <Form>
+              <ModalHeader toggle={toggle} charCode="&#xe912;">
+                Creating folder in {systemDisplayName}/{params.path}
+              </ModalHeader>
+              <ModalBody>
+                <FormField
+                  name="dirname"
+                  label="Enter a name for the new folder:"
+                />
+              </ModalBody>
+              <ModalFooter>
+                <Button
+                  type="primary"
+                  size="long"
+                  attr="submit"
+                  disabled={isSubmitting}
+                  isLoading={isSubmitting}
+                >
+                  Create Folder
+                </Button>
+              </ModalFooter>
+            </Form>
+          )}
         </Formik>
       </Modal>
     </>