From 296414a14f50b3f4b9fc607bb1d891959506cde1 Mon Sep 17 00:00:00 2001
From: blattersturm <peachypies@protonmail.ch>
Date: Sun, 4 Jun 2023 03:13:22 +0200
Subject: [PATCH] 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.
---
 .../resources/chat/cl_chat.lua                | 10 +++---
 .../resources/chat/html/App.ts                | 32 +++++++++++--------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/ext/system-resources/resources/chat/cl_chat.lua b/ext/system-resources/resources/chat/cl_chat.lua
index 60bc7874cf..b1f3e75030 100644
--- 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
index 492b1171a6..7cb9ab98c8 100644
--- 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) {