UX: improves topic-notifications-button loading behavior (#9832)

app/assets/javascripts/discourse/app/models/topic-details.js

@@ -62,13 +62,14 @@ const TopicDetails = RestModel.extend({
   },
 
   updateNotifications(level) {
-    this.setProperties({
-      notification_level: level,
-      notifications_reason_id: null
-    });
     return ajax(`/t/${this.get("topic.id")}/notifications`, {
       type: "POST",
       data: { notification_level: level }
+    }).then(() => {
+      this.setProperties({
+        notification_level: level,
+        notifications_reason_id: null
+      });
     });
   },
 

app/assets/javascripts/select-kit/app/components/topic-notifications-button.js

@@ -1,6 +1,5 @@
 import Component from "@ember/component";
 import { action, computed } from "@ember/object";
-import { later, cancel } from "@ember/runloop";
 
 export default Component.extend({
   layoutName: "select-kit/templates/components/topic-notifications-button",
@@ -17,22 +16,13 @@ export default Component.extend({
     return this.isLoading ? "spinner" : null;
   }),
 
-  willDestroyElement() {
-    this._super(...arguments);
-
-    this._endLoadingHandler && cancel(this._endLoadingHandler);
-  },
-
   @action
   changeTopicNotificationLevel(levelId) {
     if (levelId !== this.notificationLevel) {
       this.set("isLoading", true);
-      this.topic.details.updateNotifications(levelId).finally(() => {
-        this._endLoadingHandler = later(
-          () => this.set("isLoading", false),
-          250
-        );
-      });
+      this.topic.details
+        .updateNotifications(levelId)
+        .finally(() => this.set("isLoading", false));
     }
   }
 });

app/assets/stylesheets/common/base/topic-post.scss

@@ -1026,14 +1026,6 @@ a.mention-group {
     margin-top: 0;
   }
 
-  .topic-notifications-button.is-loading {
-    pointer-events: none;
-    user-select: none;
-    .topic-notifications-options {
-      opacity: 0.5;
-    }
-  }
-
   .pinned-button,
   .topic-notifications-button {
     margin: 1em 0;

app/assets/stylesheets/common/select-kit/topic-notifications-button.scss

@@ -0,0 +1,18 @@
+.topic-notifications-button {
+  &.is-loading {
+    pointer-events: none;
+    user-select: none;
+
+    .d-icon-spinner {
+      margin: 0;
+    }
+
+    .selected-name .d-icon {
+      display: none;
+    }
+
+    .topic-notifications-options {
+      opacity: 0.5;
+    }
+  }
+}