🐛 prevent task-buttons dropping clicks when multiple tasks enqueued simultaneously (#222)

refs https://github.com/TryGhost/Ghost/issues/7255
- adds a `.appear-disabled` CSS class that doesn't prevent pointer events like `.disabled`
- updates `gh-task-button`:
  - use `.appear-disabled` class instead of actually disabling button
  - add check to guard against the button's assigned task being run multiple times whilst the spinner is running

This resolves the [user profile slug issue](https://github.com/TryGhost/Ghost/issues/7255) where clicking the Save button whilst the slug input has focus would only trigger the input's focus-out event due to it immediately disabling the button.

ghost/admin/app/components/gh-task-button.js

@@ -18,13 +18,27 @@ import layout from 'ghost-admin/templates/components/gh-spin-button';
 export default SpinButton.extend({
     layout, // This is used to we don't have to re-implement the template
 
+    classNameBindings: ['showSpinner:appear-disabled'],
+
     task: null,
 
     submitting: reads('task.last.isRunning'),
+    disabled: false,
 
     click() {
+        let task = this.get('task');
+        let taskName = this.get('task.name');
+        let lastTaskName = this.get('task.last.task.name');
+
+        // task-buttons are never truly disabled so that clicks when a taskGroup
+        // is running don't get dropped however that means we need to check here
+        // so we don't spam actions through multiple clicks
+        if (this.get('showSpinner') && taskName === lastTaskName) {
+            return;
+        }
+
         invokeAction(this, 'action');
 
-        return this.get('task').perform();
+        return task.perform();
     }
 });

ghost/admin/app/styles/patterns/buttons.css

@@ -59,6 +59,12 @@ fieldset[disabled] .btn {
     pointer-events: none;
 }
 
+.btn.appear-disabled {
+    box-shadow: none;
+    opacity: 0.65;
+    cursor: not-allowed;
+}
+
 .btn i {
     display: inline-block;
     vertical-align: middle;