DEV: Sort styleguide icons alphabetically and fix render on refresh (#14463)

DEV: Sort styleguide icons alphabetically and fix render on refresh (#14463)

Co-authored-by: Jarek Radosz jradosz@gmail.com

diff --git a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js.es6 b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js.es6
index ab2be7e..716e3d3 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js.es6
+++ b/plugins/styleguide/assets/javascripts/discourse/components/styleguide-icons.js.es6
@@ -1,4 +1,5 @@
 import { afterRender } from "discourse-common/utils/decorators";
+import { later } from "@ember/runloop";
 
 export default Ember.Component.extend({
   tagName: "section",
@@ -13,8 +14,12 @@ export default Ember.Component.extend({
   @afterRender
   setIconIds() {
     let symbols = document.querySelectorAll("#svg-sprites symbol");
-    let ids = Array.from(symbols).mapBy("id");
-
-    this.set("iconIds", ids);
+    if (symbols.length > 0) {
+      let ids = Array.from(symbols).mapBy("id");
+      this.set("iconIds", ids.sort());
+    } else {
+      // Let's try again a short time later if there are no svgs loaded yet
+      later(this, this.setIconIds, 1500);
+    }
   },
 });

GitHub sha: 574cb28b0e0ad659a6c08b81b428c69218931bd5

This commit appears in #14463 which was approved by CvX. It was merged by pmusaraj.