From b268c526b1be1d6c58551aed3e0a5b8bfd420ca6 Mon Sep 17 00:00:00 2001
From: Jesse Chan <jc@linux.com>
Date: Sat, 31 Oct 2020 23:17:57 +0800
Subject: [PATCH] DownloadRulesTab: show form submission indicator

---
 .../modals/feeds-modal/DownloadRulesTab.tsx   | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/client/src/javascript/components/modals/feeds-modal/DownloadRulesTab.tsx b/client/src/javascript/components/modals/feeds-modal/DownloadRulesTab.tsx
index bd0dad83..20f47798 100644
--- a/client/src/javascript/components/modals/feeds-modal/DownloadRulesTab.tsx
+++ b/client/src/javascript/components/modals/feeds-modal/DownloadRulesTab.tsx
@@ -41,6 +41,8 @@ interface DownloadRulesTabStates {
   errors?: {
     [field in ValidatedFields]?: string;
   };
+  isSubmitting: boolean;
+  isFormChanged: boolean;
   currentlyEditingRule: Partial<Rule> | null;
   doesPatternMatchTest: boolean;
 }
@@ -136,6 +138,8 @@ class DownloadRulesTab extends React.Component<WrappedComponentProps, DownloadRu
 
     this.state = {
       errors: {},
+      isSubmitting: false,
+      isFormChanged: false,
       currentlyEditingRule: null,
       doesPatternMatchTest: false,
     };
@@ -280,7 +284,7 @@ class DownloadRulesTab extends React.Component<WrappedComponentProps, DownloadRu
           <Button onClick={() => this.setState({currentlyEditingRule: null})}>
             <FormattedMessage id="button.cancel" />
           </Button>
-          <Button type="submit">
+          <Button type="submit" isLoading={this.state.isSubmitting}>
             <FormattedMessage id="button.save.feed" />
           </Button>
         </FormRow>
@@ -424,22 +428,25 @@ class DownloadRulesTab extends React.Component<WrappedComponentProps, DownloadRu
       ruleFormData.exclude != null ? ruleFormData.exclude : defaultRule.exclude,
       ruleFormData.check != null ? ruleFormData.check : '',
     );
+    this.setState({isFormChanged: true});
   };
 
-  handleFormSubmit = () => {
+  handleFormSubmit = async () => {
     const {errors, isValid} = this.validateForm();
 
+    this.setState({isSubmitting: true});
+
     if (!isValid) {
       this.setState({errors});
     } else {
       const currentRule = this.state.currentlyEditingRule;
       const formData = this.getAmendedFormData();
 
-      if (formData != null) {
+      if (formData != null && this.state.isFormChanged) {
         if (currentRule !== null && currentRule !== defaultRule && currentRule._id != null) {
-          FeedActions.removeFeedMonitor(currentRule._id);
+          await FeedActions.removeFeedMonitor(currentRule._id);
         }
-        FeedActions.addRule(formData);
+        await FeedActions.addRule(formData);
       }
 
       if (this.formRef != null) {
@@ -448,6 +455,8 @@ class DownloadRulesTab extends React.Component<WrappedComponentProps, DownloadRu
 
       this.setState({currentlyEditingRule: null});
     }
+
+    this.setState({isSubmitting: false});
   };
 
   handleAddRuleClick = () => {