UX: Add loading indicator to 'new or updated' PM banner (#25676)

Same as 9883e6a0c8, but for lists of PMs

app/assets/javascripts/discourse/app/controllers/user-topics-list.js

@@ -3,6 +3,7 @@ import Controller from "@ember/controller";
 import { action } from "@ember/object";
 import { or, reads } from "@ember/object/computed";
 import { isNone } from "@ember/utils";
+import { popupAjaxError } from "discourse/lib/ajax-error";
 import BulkSelectHelper from "discourse/lib/bulk-select-helper";
 import { defineTrackedProperty } from "discourse/lib/tracked-tools";
 import Topic from "discourse/models/topic";
@@ -120,10 +121,20 @@ export default class UserTopicsListController extends Controller {
   }
 
   @action
-  showInserted(event) {
+  async showInserted(event) {
     event?.preventDefault();
-    this.model.loadBefore(this.pmTopicTrackingState.newIncoming);
-    this.pmTopicTrackingState.resetIncomingTracking();
+
+    if (this.model.loadingBefore) {
+      return;
+    }
+
+    try {
+      const topicIds = [...this.pmTopicTrackingState.newIncoming];
+      await this.model.loadBefore(topicIds);
+      this.pmTopicTrackingState.resetIncomingTracking(topicIds);
+    } catch (e) {
+      popupAjaxError(e);
+    }
   }
 
   @action

app/assets/javascripts/discourse/app/services/pm-topic-tracking-state.js

@@ -91,8 +91,18 @@ class PrivateMessageTopicTrackingState extends Service {
     });
   }
 
-  resetIncomingTracking() {
-    if (this.isTrackingIncoming) {
+  resetIncomingTracking(topicIds) {
+    if (!this.isTrackingIncoming) {
+      return;
+    }
+
+    if (topicIds) {
+      const topicIdSet = new Set(topicIds);
+      this.set(
+        "newIncoming",
+        this.newIncoming.filter((id) => !topicIdSet.has(id))
+      );
+    } else {
       this.set("newIncoming", []);
     }
   }

app/assets/javascripts/discourse/app/templates/user-topics-list.hbs

@@ -26,19 +26,23 @@
       }}
     />
 
-    {{#if (gt this.incomingCount 0)}}
+    {{#if (or this.model.loadingBefore this.incomingCount)}}
       <div class="show-mores">
         <a
           tabindex="0"
           href
           {{on "click" this.showInserted}}
-          class="alert alert-info clickable"
+          class="alert alert-info clickable
+            {{if this.model.loadingBefore 'loading'}}"
         >
           <CountI18n
             @key="topic_count_"
             @suffix="latest"
-            @count={{this.incomingCount}}
+            @count={{or this.model.loadingBefore this.incomingCount}}
           />
+          {{#if @model.loadingBefore}}
+            {{loading-spinner size="small"}}
+          {{/if}}
         </a>
       </div>
     {{/if}}

app/assets/stylesheets/common/base/user.scss

@@ -64,6 +64,15 @@
 
   .show-mores {
     width: 100%;
+
+    .alert-info.clickable {
+      gap: 0.5em;
+
+      &.loading {
+        color: var(--primary-medium);
+        cursor: default;
+      }
+    }
   }
 
   .d-icon-heart {