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

This commit is contained in:
Mark VanLandingham
2024-02-12 08:23:46 -06:00
committed by GitHub
parent a48bf1aaec
commit 9c36d6ec48
2 changed files with 13 additions and 5 deletions

View File

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

View File

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