From 97dc0b576839f100a14e92765f5eab1211e74341 Mon Sep 17 00:00:00 2001
From: Van Go <35277477+van-go@users.noreply.github.com>
Date: Fri, 30 Jun 2023 10:55:55 -0500
Subject: [PATCH] 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>
---
 .../DataFilesModals/DataFilesMkdirModal.jsx   | 40 +++++++++++--------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/client/src/components/DataFiles/DataFilesModals/DataFilesMkdirModal.jsx b/client/src/components/DataFiles/DataFilesModals/DataFilesMkdirModal.jsx
index f244200d8..0807553d6 100644
--- a/client/src/components/DataFiles/DataFilesModals/DataFilesMkdirModal.jsx
+++ b/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>
     </>