UX: Don't display empty state while changing notification filter (#25631)

app/assets/javascripts/discourse/app/controllers/user-notifications.gjs

@@ -1,3 +1,4 @@
+import { tracked } from "@glimmer/tracking";
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
@@ -23,8 +24,9 @@ export default class UserNotificationsController extends Controller {
   @service site;
   @service siteSettings;
 
+  @tracked filter = "all";
+
   queryParams = ["filter"];
-  filter = "all";
 
   get listContainerClassNames() {
     return `user-notifications-list ${
@@ -61,9 +63,9 @@ export default class UserNotificationsController extends Controller {
     );
   }
 
-  @discourseComputed("isFiltered", "model.content.length")
-  doesNotHaveNotifications(isFiltered, contentLength) {
-    return !isFiltered && contentLength === 0;
+  @discourseComputed("isFiltered", "model.content.length", "loading")
+  doesNotHaveNotifications(isFiltered, contentLength, loading) {
+    return !loading && !isFiltered && contentLength === 0;
   }
 
   @discourseComputed("isFiltered", "model.content.length")
@@ -86,6 +88,12 @@ export default class UserNotificationsController extends Controller {
     this.model.forEach((notification) => notification.set("read", true));
   }
 
+  @action
+  updateFilter(value) {
+    this.loading = true;
+    this.filter = value;
+  }
+
   @action
   async resetNew() {
     if (this.currentUser.unread_high_priority_notifications > 0) {

app/assets/javascripts/discourse/app/templates/user/notifications-index.hbs

@@ -18,7 +18,7 @@
   <div class="user-notifications-filter">
     <NotificationsFilter
       @value={{this.filter}}
-      @onChange={{action (mut this.filter)}}
+      @onChange={{this.updateFilter}}
     />
     <PluginOutlet
       @name="user-notifications-after-filter"