Fix crash/hang when showing emoji autocomplete with very many emojis

Closes #424

Packages/ComposeUI/Sources/ComposeUI/Controllers/AutocompleteEmojisController.swift

@@ -18,19 +18,7 @@ class AutocompleteEmojisController: ViewController {
     
     @Published var expanded = false
     @Published var emojis: [Emoji] = []
-    
-    var emojisBySection: [String: [Emoji]] {
-        var values: [String: [Emoji]] = [:]
-        for emoji in emojis {
-            let key = emoji.category ?? ""
-            if !values.keys.contains(key) {
-                values[key] = [emoji]
-            } else {
-                values[key]!.append(emoji)
-            }
-        }
-        return values
-    }
+    @Published var emojisBySection: [String: [Emoji]] = [:]
     
     init(composeController: ComposeController) {
         self.composeController = composeController
@@ -77,11 +65,20 @@ class AutocompleteEmojisController: ViewController {
         
         var shortcodes = Set<String>()
         var newEmojis = [Emoji]()
+        var newEmojisBySection = [String: [Emoji]]()
         for emoji in emojis where !shortcodes.contains(emoji.shortcode) {
             newEmojis.append(emoji)
             shortcodes.insert(emoji.shortcode)
+            
+            let category = emoji.category ?? ""
+            if newEmojisBySection.keys.contains(category) {
+                newEmojisBySection[category]!.append(emoji)
+            } else {
+                newEmojisBySection[category] = [emoji]
+            }
         }
         self.emojis = newEmojis
+        self.emojisBySection = newEmojisBySection
     }
     
     private func toggleExpanded() {
@@ -160,7 +157,7 @@ class AutocompleteEmojisController: ViewController {
         
         private var horizontalScrollView: some View {
             ScrollView(.horizontal) {
-                HStack(spacing: 8) {
+                LazyHStack(spacing: 8) {
                     ForEach(controller.emojis, id: \.shortcode) { emoji in
                         Button(action: { controller.autocomplete(with: emoji) }) {
                             HStack(spacing: 4) {
@@ -174,8 +171,6 @@ class AutocompleteEmojisController: ViewController {
                         .frame(height: emojiSize)
                     }
                     .animation(.linear(duration: 0.2), value: controller.emojis)
-                    
-                    Spacer(minLength: emojiSize)
                 }
                 .padding(.horizontal, 8)
                 .frame(height: emojiSize + 16)