mirror of
https://github.com/discourse/discourse.git
synced 2025-03-01 18:03:09 +08:00
d0498c9e1d
Follow-up to https://github.com/discourse/discourse/pull/31271 In the linked PR, we made `<GroupChooser />` use the site's preloaded list of groups instead of fetching the list from the servers every time the component is triggered. However, when a site has thousands of groups, the performance issue has shifted from the server to the browser — `<GroupChooser />` takes several seconds to render in the browser for a site with thousands of groups and the sites becomes completely unresponsive while the component is rendering. This PR changes the `<GroupChooser />` so it limits the displayed groups to 100, with ability to filter the list to show more groups when there are more than 100 groups.
53 lines
1.3 KiB
JavaScript
53 lines
1.3 KiB
JavaScript
import { classNames } from "@ember-decorators/component";
|
|
import FilterForMore from "select-kit/components/filter-for-more";
|
|
import MultiSelectComponent from "select-kit/components/multi-select";
|
|
import {
|
|
MAIN_COLLECTION,
|
|
pluginApiIdentifiers,
|
|
selectKitOptions,
|
|
} from "select-kit/components/select-kit";
|
|
|
|
const FILTER_FOR_MORE_GROUPS_COLLECTION = "MORE_GROUPS_COLLECTION";
|
|
|
|
@classNames("group-chooser")
|
|
@selectKitOptions({
|
|
allowAny: false,
|
|
displayedGroupsLimit: 100,
|
|
})
|
|
@pluginApiIdentifiers("group-chooser")
|
|
export default class GroupChooser extends MultiSelectComponent {
|
|
init() {
|
|
super.init(...arguments);
|
|
|
|
this.insertAfterCollection(
|
|
MAIN_COLLECTION,
|
|
FILTER_FOR_MORE_GROUPS_COLLECTION
|
|
);
|
|
}
|
|
|
|
modifyComponentForCollection(identifier) {
|
|
if (identifier === FILTER_FOR_MORE_GROUPS_COLLECTION) {
|
|
return FilterForMore;
|
|
}
|
|
}
|
|
|
|
modifyContent(content) {
|
|
const limit = this.selectKit.options.displayedGroupsLimit;
|
|
if (content.length > limit) {
|
|
this.showFilterForMore = true;
|
|
content = content.slice(0, limit);
|
|
} else {
|
|
this.showFilterForMore = false;
|
|
}
|
|
return content;
|
|
}
|
|
|
|
modifyContentForCollection(identifier) {
|
|
if (identifier === FILTER_FOR_MORE_GROUPS_COLLECTION) {
|
|
return {
|
|
shouldShowMoreTip: this.showFilterForMore,
|
|
};
|
|
}
|
|
}
|
|
}
|