From 67229a77397a0ed38c4260f1c57e19ce4859f4a9 Mon Sep 17 00:00:00 2001
From: Daniel Waterworth <me@danielwaterworth.com>
Date: Wed, 7 Feb 2024 12:07:32 -0600
Subject: [PATCH] DEV: switch to asyncFindByIds in category-list site-setting
 component (#25592)

We no longer want to rely on preloading every single category, which
means we need to do http requests for categories when we need them.
---
 .../site-settings/category-list.gjs           | 42 +++++++++++++++----
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/site-settings/category-list.gjs b/app/assets/javascripts/admin/addon/components/site-settings/category-list.gjs
index 7b0b15116f5..4c87947d21c 100644
--- a/app/assets/javascripts/admin/addon/components/site-settings/category-list.gjs
+++ b/app/assets/javascripts/admin/addon/components/site-settings/category-list.gjs
@@ -1,13 +1,37 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
+import didUpdate from "@ember/render-modifiers/modifiers/did-update";
 import Category from "discourse/models/category";
 import htmlSafe from "discourse-common/helpers/html-safe";
 import SettingValidationMessage from "admin/components/setting-validation-message";
 import CategorySelector from "select-kit/components/category-selector";
 
 export default class CategoryList extends Component {
-  get selectedCategories() {
-    return Category.findByIds(this.args.value.split("|").filter(Boolean));
+  @tracked selectedCategories = [];
+
+  constructor() {
+    super(...arguments);
+
+    this.pendingCategoriesRequest = Promise.resolve();
+    this.valueChanged();
+  }
+
+  get categoryIds() {
+    return this.args.value
+      .split("|")
+      .map((x) => parseInt(x, 10))
+      .filter(Boolean);
+  }
+
+  async updateSelectedCategories() {
+    await this.pendingCategoriesRequest;
+    this.selectedCategories = await Category.asyncFindByIds(this.categoryIds);
+  }
+
+  @action
+  valueChanged() {
+    this.pendingCategoriesRequest = this.updateSelectedCategories();
   }
 
   @action
@@ -16,12 +40,14 @@ export default class CategoryList extends Component {
   }
 
   <template>
-    <CategorySelector
-      @categories={{this.selectedCategories}}
-      @onChange={{this.onChangeSelectedCategories}}
-    />
+    <div ...attributes {{didUpdate this.valueChanged @value}}>
+      <CategorySelector
+        @categories={{this.selectedCategories}}
+        @onChange={{this.onChangeSelectedCategories}}
+      />
 
-    <div class="desc">{{htmlSafe this.setting.description}}</div>
-    <SettingValidationMessage @message={{this.validationMessage}} />
+      <div class="desc">{{htmlSafe this.setting.description}}</div>
+      <SettingValidationMessage @message={{this.validationMessage}} />
+    </div>
   </template>
 }