Improve the Progressable Button

javascripts/src/components/common/ProgressableButton.tsx

@@ -26,13 +26,13 @@ class ProgressableButton extends React.Component<ProgressableButtonProps, {}> {
     if (this.props.inProgress){
       ourData.title = this.props.titleOnProgress || this.props.title
       ourData.disabled = ourData.disabled || this.props.disableOnProgress
-      ourData.prefix = <i className='fa fa-spin fa-spinner'></i>
+      ourData.prefix = <span><i className='fa fa-spin fa-spinner'></i> </span>
     }
 
     let props = _.omit(this.props, ['title', 'disableOnProgress', 'titleOnProgress', 'inProgress'])
 
 
-    return <button {...props} className="button"  disabled={ourData.disabled}>
+    return <button {...props} className="button" disabled={ourData.disabled}>
       <span>{ourData.prefix}{ourData.title}</span></button>;
   }
 }

javascripts/src/components/registration_page/NonprofitInfoForm.tsx

@@ -6,6 +6,7 @@ import {Field, FieldDefinition} from "../../../../types/mobx-react-form";
 import {BasicField} from "../common/fields";
 import {ThreeColumnFields, TwoColumnFields} from "../common/layout";
 import {Validations} from "../../lib/vjf_rules";
+import ProgressableButton from "../common/ProgressableButton";
 
 export interface NonprofitInfoFormProps
 {
@@ -71,8 +72,7 @@ class NonprofitInfoForm extends React.Component<NonprofitInfoFormProps & Injecte
          <BasicField field={this.props.form.$('state')}/>
          <BasicField field={this.props.form.$('zip')}/>
        </ThreeColumnFields>
-       <button onClick={this.props.form.onSubmit} className="button" disabled={!this.props.form.isValid || this.props.form.submitting}>
+       <ProgressableButton onClick={this.props.form.onSubmit} className="button" disabled={!this.props.form.isValid} title={this.props.intl.formatMessage({id: this.props.buttonText})} inProgress={this.props.form.submitting || this.props.form.container().submitting} disableOnProgress={true}/>
-         {this.props.intl.formatMessage({id: this.props.buttonText})}</button>
      </fieldset>
   }
 }

javascripts/src/components/registration_page/UserInfoForm.tsx

@@ -6,6 +6,8 @@ import {Validations} from "../../lib/vjf_rules";
 import {Field, FieldDefinition} from "mobx-react-form";
 import {TwoColumnFields} from "../common/layout";
 import {BasicField} from "../common/fields";
+import ProgressableButton from "../common/ProgressableButton";
+import {areWeOrAnyParentSubmitting} from "../../lib/houdini_form";
 
 export const FieldDefinitions : Array<FieldDefinition> = [
   {
@@ -53,9 +55,12 @@ class UserInfoForm extends React.Component<UserInfoFormProps & InjectedIntlProps
       <BasicField field={this.props.form.$('password_confirmation')}/>
 
 
-      <button onClick={this.props.form.onSubmit} className="button" disabled={!this.props.form.isValid || this.props.form.submitting}>
+      <ProgressableButton onClick={this.props.form.onSubmit}
-        {this.props.intl.formatMessage({id: this.props.buttonText})}
+                          className="button"
-      </button>
+                          disabled={!this.props.form.isValid}
+                          title={this.props.intl.formatMessage({id: this.props.buttonText})}
+                          inProgress={areWeOrAnyParentSubmitting(this.props.form)}
+                          disableOnProgress={true}/>
     </fieldset>;
   }
 }

javascripts/src/lib/houdini_form.ts

@@ -1,5 +1,5 @@
 // License: LGPL-3.0-or-later
-import {Form} from "mobx-react-form";
+import {Field, Form} from "mobx-react-form";
 import {action, runInAction} from 'mobx'
 import validator = require("validator")
 import * as _ from 'lodash'
@@ -17,6 +17,20 @@ export class HoudiniForm extends Form {
 }
 
 
+export function areWeOrAnyParentSubmitting(f:Field|Form ) : boolean
+{
+  let currentItem: Field|Form = f
+  let isSubmitting:boolean = f.submitting
+  while (!isSubmitting && currentItem && !(currentItem instanceof Form)){
+    currentItem = currentItem.container()
+    isSubmitting = currentItem.submitting
+  }
+
+  return isSubmitting
+}
+
+
+
 
 interface PathToFormField {
   [props: string]: string
@@ -84,4 +98,6 @@ export class StaticFormToErrorAndBackConverter<T> {
       })
     })
   }
-}
+}
+
+

types/mobx-react-form/index.d.ts

@@ -79,7 +79,7 @@ export declare class Field implements Base, FieldProperties, FieldMethods, Field
 
     clear();
 
-    container(): Form
+    container(): Form |Field
 
     del(key: any);