Closes #842 - Toast messages hanging

app/scenes/Settings/Security.js

@@ -2,11 +2,11 @@
 import * as React from 'react';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
+import { debounce } from 'lodash';
 
 import AuthStore from 'stores/AuthStore';
 import UiStore from 'stores/UiStore';
 import Checkbox from 'components/Checkbox';
-import Button from 'components/Button';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 import HelpText from 'components/HelpText';
@@ -31,33 +31,29 @@ class Security extends React.Component<Props> {
     }
   }
 
-  handleSubmit = async (ev: SyntheticEvent<*>) => {
-    ev.preventDefault();
+  handleChange = async (ev: SyntheticInputEvent<*>) => {
+    switch (ev.target.name) {
+      case 'sharing':
+        this.sharing = ev.target.checked;
+        break;
+      case 'documentEmbeds':
+        this.documentEmbeds = ev.target.checked;
+        break;
+      default:
+    }
 
     await this.props.auth.updateTeam({
       sharing: this.sharing,
       documentEmbeds: this.documentEmbeds,
     });
-    this.props.ui.showToast('Settings saved', 'success');
+    this.showSuccessMessage();
   };
 
-  handleChange = (ev: SyntheticInputEvent<*>) => {
-    switch (ev.target.name) {
-      case 'sharing':
-        return (this.sharing = ev.target.checked);
-      case 'documentEmbeds':
-        return (this.documentEmbeds = ev.target.checked);
-      default:
-    }
-  };
-
-  get isValid() {
-    return this.form && this.form.checkValidity();
-  }
+  showSuccessMessage = debounce(() => {
+    this.props.ui.showToast('Settings saved');
+  }, 500);
 
   render() {
-    const { isSaving } = this.props.auth;
-
     return (
       <CenteredContent>
         <PageTitle title="Security" />
@@ -67,25 +63,20 @@ class Security extends React.Component<Props> {
           knowledgebase.
         </HelpText>
 
-        <form onSubmit={this.handleSubmit} ref={ref => (this.form = ref)}>
-          <Checkbox
-            label="Public document sharing"
-            name="sharing"
-            checked={this.sharing}
-            onChange={this.handleChange}
-            note="When enabled documents can be shared publicly by any team member"
-          />
-          <Checkbox
-            label="Rich service embeds"
-            name="documentEmbeds"
-            checked={this.documentEmbeds}
-            onChange={this.handleChange}
-            note="Convert links to supported services into rich embeds within your documents"
-          />
-          <Button type="submit" disabled={isSaving || !this.isValid}>
-            {isSaving ? 'Saving…' : 'Save'}
-          </Button>
-        </form>
+        <Checkbox
+          label="Public document sharing"
+          name="sharing"
+          checked={this.sharing}
+          onChange={this.handleChange}
+          note="When enabled documents can be shared publicly by any team member"
+        />
+        <Checkbox
+          label="Rich service embeds"
+          name="documentEmbeds"
+          checked={this.documentEmbeds}
+          onChange={this.handleChange}
+          note="Convert links to supported services into rich embeds within your documents"
+        />
       </CenteredContent>
     );
   }