Add inProgress/ready states to EditListingPhotosForm

src/containers/EditListingPhotosForm/EditListingPhotosForm.js

@@ -147,11 +147,12 @@ export class EditListingPhotosFormComponent extends Component {
 
     const classes = classNames(css.root, className);
 
-    const disableForm = invalid ||
-      submitting ||
+    const submitReady = updated;
+    const submitInProgress = submitting || updateInProgress;
+    const submitDisabled = invalid ||
       disabled ||
-      this.state.imageUploadRequested ||
-      updateInProgress;
+      submitInProgress ||
+      this.state.imageUploadRequested;
 
     return (
       <form className={classes} onSubmit={handleSubmit}>
@@ -198,8 +199,14 @@ export class EditListingPhotosFormComponent extends Component {
         {createListingFailed}
         {showListingFailed}
 
-        <Button className={css.submitButton} type="submit" disabled={disableForm}>
-          {updated ? <FormattedMessage id="EditListingPhotosForm.updated" /> : saveActionMsg}
+        <Button
+          className={css.submitButton}
+          type="submit"
+          inProgress={submitInProgress}
+          disabled={submitDisabled}
+          ready={submitReady}
+        >
+          {saveActionMsg}
         </Button>
       </form>
     );

src/translations/en.json

@@ -94,7 +94,6 @@
   "EditListingPhotosForm.savedImageAltText": "Saved listing image",
   "EditListingPhotosForm.showListingFailed": "Fetching listing data failed",
   "EditListingPhotosForm.updateFailed": "Failed to update listing. Please try again.",
-  "EditListingPhotosForm.updated": "Updated!",
   "EditListingPhotosPanel.createListingTitle": "Add a few photos",
   "EditListingPhotosPanel.payoutModalInfo": "Since this was the first listing you created, we need to know bit more information about you in order to send you money. We only ask these once.",
   "EditListingPhotosPanel.payoutModalTitleOneMoreThing": "One more thing:",