From ae4dc79d36ddd760e3809828734453611d68cd5c Mon Sep 17 00:00:00 2001
From: Hel Nershing Thapa <helnershingthapa@gmail.com>
Date: Sun, 24 Jul 2022 16:24:56 +0545
Subject: [PATCH] Add loading indicator while the form is being saved

---
 .../src/components/user/forms/personalInformation.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/user/forms/personalInformation.js b/frontend/src/components/user/forms/personalInformation.js
index 02ee7b5172..b6b4f3fc56 100644
--- a/frontend/src/components/user/forms/personalInformation.js
+++ b/frontend/src/components/user/forms/personalInformation.js
@@ -62,15 +62,18 @@ function _PersonalInformationForm(props) {
       <FormattedMessage {...messages.urlDetectedError} />
     ) : undefined;
 
+  async function handleFormSubmit(values) {
+    await props.pushUserDetails(prepareUserDetailsToPush(values, formFields), props.token, true);
+  }
+
   return (
     <div className="bg-white shadow-4 pa4 mb3">
       <h3 className="f3 blue-dark mt0 fw6">
         <FormattedMessage {...messages.personalInfo} />
       </h3>
       <Form
-        onSubmit={(values) =>
-          props.pushUserDetails(prepareUserDetailsToPush(values, formFields), props.token, true)
-        }
+        subscription={{ submitting: true, pristine: true }}
+        onSubmit={handleFormSubmit}
         initialValues={props.userDetails}
         render={({ handleSubmit, pristine, form, submitting, values, hasValidationErrors }) => (
           <form onSubmit={handleSubmit} className="blue-grey">
@@ -287,9 +290,10 @@ function _PersonalInformationForm(props) {
               </div>
               <div className="pt2">
                 <FormSubmitButton
-                  disabled={submitting || pristine || hasValidationErrors}
+                  disabled={pristine || hasValidationErrors}
                   className="bg-blue-dark white mh1 mv2"
                   disabledClassName="bg-grey-light white mh1 mv2"
+                  loading={submitting}
                 >
                   <FormattedMessage {...messages.save} />
                 </FormSubmitButton>