Tweak user bio editing UI

framework/core/js/forum/src/components/user-bio.js

@@ -14,6 +14,7 @@ export default class UserBio extends Component {
     super(props);
 
     this.editing = m.prop(false);
+    this.loading = m.prop(false);
   }
 
   view() {
@@ -21,16 +22,22 @@ export default class UserBio extends Component {
 
     return m('div.user-bio', {
       className: classList({editable: this.isEditable(), editing: this.editing()}),
-      onclick: this.edit.bind(this),
+      onclick: this.edit.bind(this)
-      config: this.element
     }, [
       this.editing()
-        ? m('textarea.form-control', {value: user.bio()})
+        ? m('textarea.form-control', {
-        : m('div.bio-content', [
+          value: user.bio(),
+          placeholder: 'Write something about yourself...',
+          rows: 3
+        })
+        : m('div.bio-content', this.loading()
+          ? m('p.placeholder', 'Saving...')
+          : [
             user.bioHtml()
               ? m.trust(user.bioHtml())
-            : (this.props.editable ? m('p', 'Write something about yourself...') : '')
+              : (this.props.editable ? m('p.placeholder', 'Write something about yourself...') : '')
-        ])
+          ]
+        )
     ]);
   }
 
@@ -42,7 +49,6 @@ export default class UserBio extends Component {
     if (!this.isEditable()) { return; }
 
     this.editing(true);
-    var height = this.$().height();
 
     m.redraw();
 
@@ -52,13 +58,20 @@ export default class UserBio extends Component {
       e.preventDefault();
       self.save($(this).val());
     };
-    this.$('textarea').css('height', height).focus().bind('blur', save).bind('keydown', 'return', save);
+    this.$('textarea').focus().bind('blur', save).bind('keydown', 'return', save);
   }
 
   save(value) {
     this.editing(false);
 
-    this.props.user.save({bio: value}).then(() => m.redraw());
+    if (this.props.user.bio() !== value) {
+      this.loading(true);
+      this.props.user.save({bio: value}).then(() => {
+        this.loading(false);
+        m.redraw();
+      });
+    }
+
     m.redraw();
   }
 }

framework/core/js/lib/components/text-editor.js

@@ -17,7 +17,7 @@ export default class TextEditor extends Component {
   }
 
   view() {
-    return m('div.text-editor', {config: this.element}, [
+    return m('div.text-editor', [
       m('textarea.form-control.flexible-height', {
         config: this.configTextarea.bind(this),
         oninput: m.withAttr('value', this.oninput.bind(this)),

framework/core/less/forum/user.less

@@ -107,7 +107,7 @@
       cursor: text;
 
       &:hover {
-        border-color: rgba(255, 255, 255, 0.5);
+        border-color: rgba(255, 255, 255, 0.2);
       }
     }
 
@@ -121,6 +121,10 @@
     & textarea {
       padding: 10px;
       font-size: 14px;
+      resize: none;
+    }
+    & .placeholder {
+      opacity: 0.3;
     }
   }
   & .user-last-seen {