fix(resources/chat): optimize multiple suggestion add

As mentioned in https://forum.cfx.re/t/5111873, when a resource starts, a lot of ON_SUGGESTION_ADD messages get spammed, which since they're Vue methods leads to the whole Vue change detection running for every posted message, hanging the entire NUI renderer process. As a workaroumd, we batch multi-add calls into a single Vue method. A proper fix would rather involve deferring Vue change detection until after a batch is done, or ideally a better platform queue for 'spammy' NUI messages instead of the CEF process message stuff.
citizenfx · Jun 4, 2023 · 296414a · 296414a
1 parent a7f8e6b
commit 296414a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 20 deletions.
diff --git a/ext/system-resources/resources/chat/cl_chat.lua b/ext/system-resources/resources/chat/cl_chat.lua
@@ -82,12 +82,10 @@ exports('addSuggestion', addSuggestion)
 AddEventHandler('chat:addSuggestion', addSuggestion)
 
 AddEventHandler('chat:addSuggestions', function(suggestions)
-  for _, suggestion in ipairs(suggestions) do
-    SendNUIMessage({
-      type = 'ON_SUGGESTION_ADD',
-      suggestion = suggestion
-    })
-  end
+  SendNUIMessage({
+    type = 'ON_SUGGESTION_ADD',
+    suggestion = suggestions
+  })
 end)
 
 AddEventHandler('chat:removeSuggestion', function(name)

diff --git a/ext/system-resources/resources/chat/html/App.ts b/ext/system-resources/resources/chat/html/App.ts
@@ -233,22 +233,26 @@ export default defineComponent({
       this.oldMessages = [];
       this.oldMessagesIndex = -1;
     },
-    ON_SUGGESTION_ADD({ suggestion }: { suggestion: Suggestion }) {
-      this.removedSuggestions = this.removedSuggestions.filter(a => a !== suggestion.name);
-      const duplicateSuggestion = this.backingSuggestions.find(
-        a => a.name == suggestion.name
-      );
-      if (duplicateSuggestion) {
-        if (suggestion.help || suggestion.params) {
-          duplicateSuggestion.help = suggestion.help || "";
-          duplicateSuggestion.params = suggestion.params || [];
+    ON_SUGGESTION_ADD({ suggestion }: { suggestion: Suggestion | Suggestion[] }) {
+      const suggestions = (Array.isArray(suggestion)) ? suggestion : [ suggestion ];
+
+      for (const suggestion of suggestions) {
+        this.removedSuggestions = this.removedSuggestions.filter(a => a !== suggestion.name);
+        const duplicateSuggestion = this.backingSuggestions.find(
+          a => a.name === suggestion.name
+        );
+        if (duplicateSuggestion) {
+          if (suggestion.help || suggestion.params) {
+            duplicateSuggestion.help = suggestion.help || "";
+            duplicateSuggestion.params = suggestion.params || [];
+          }
+          return;
         }
-        return;
-      }
-      if (!suggestion.params) {
-        suggestion.params = []; //TODO Move somewhere else
+        if (!suggestion.params) {
+          suggestion.params = []; //TODO Move somewhere else
+        }
+        this.backingSuggestions.push(suggestion);
       }
-      this.backingSuggestions.push(suggestion);
     },
     ON_SUGGESTION_REMOVE({ name }: { name: string }) {
       if (this.removedSuggestions.indexOf(name) <= -1) {