[516] Reduces stuttering issues for 516 users (#29078)

* Initial commit

* chat saving toggle

* value store fix

* attempt 2

* we go again

* This is actually the fix

tgui/packages/tgui-panel/chat/constants.js

@@ -5,8 +5,8 @@
  */
 
 export const MAX_VISIBLE_MESSAGES = 2500;
-export const MAX_PERSISTED_MESSAGES = 1000;
-export const MESSAGE_SAVE_INTERVAL = 10000;
+export const MAX_PERSISTED_MESSAGES = 500;
+export const MESSAGE_SAVE_INTERVAL = 60000;
 export const MESSAGE_PRUNE_INTERVAL = 60000;
 export const COMBINE_MAX_TIME_WINDOW = 5000;
 export const COMBINE_MAX_MESSAGES = 5;

tgui/packages/tgui-panel/chat/middleware.js

@@ -37,6 +37,12 @@ import { selectChat, selectCurrentChatPage } from './selectors';
 const blacklisted_tags = ['a', 'iframe', 'link', 'video'];
 
 const saveChatToStorage = async (store) => {
+  // Early return if chat saving is disabled
+  const chatSavingEnabled = await storage.get('chat-saving-enabled');
+  if (chatSavingEnabled === false) {
+    return;
+  }
+
   const state = selectChat(store.getState());
   const fromIndex = Math.max(0, chatRenderer.messages.length - MAX_PERSISTED_MESSAGES);
   const messages = chatRenderer.messages.slice(fromIndex).map((message) => serializeMessage(message));
@@ -45,6 +51,13 @@ const saveChatToStorage = async (store) => {
 };
 
 const loadChatFromStorage = async (store) => {
+  // Early return if chat saving is disabled
+  const chatSavingEnabled = await storage.get('chat-saving-enabled');
+  if (chatSavingEnabled === false) {
+    store.dispatch(loadChat());
+    return;
+  }
+
   const [state, messages] = await Promise.all([storage.get('chat-state'), storage.get('chat-messages')]);
   // Discard incompatible versions
   if (state && state.version <= 4) {

tgui/packages/tgui-panel/settings/SettingsPanel.js

@@ -35,6 +35,7 @@ import {
 import { SETTINGS_TABS, FONTS, MAX_HIGHLIGHT_SETTINGS } from './constants';
 import { selectActiveTab, selectSettings, selectHighlightSettings, selectHighlightSettingById } from './selectors';
 import { SettingsStatPanel } from './SettingsStatPanel';
+import { storage } from 'common/storage';
 
 export const SettingsPanel = (props, context) => {
   const activeTab = useSelector(context, selectActiveTab);
@@ -73,9 +74,20 @@ export const SettingsPanel = (props, context) => {
 };
 
 export const SettingsGeneral = (props, context) => {
-  const { theme, fontFamily, fontSize, lineHeight } = useSelector(context, selectSettings);
+  const { theme, fontFamily, fontSize, lineHeight, chatSaving } = useSelector(context, selectSettings);
   const dispatch = useDispatch(context);
   const [freeFont, setFreeFont] = useLocalState(context, 'freeFont', false);
+
+  const updateChatSaving = (value) => {
+    const boolValue = value === true;
+    dispatch(
+      updateSettings({
+        chatSaving: boolValue,
+      })
+    );
+    storage.set('chat-saving-enabled', boolValue);
+  };
+
   return (
     <Section fill>
       <Stack fill vertical>
@@ -194,6 +206,14 @@ export const SettingsGeneral = (props, context) => {
         </LabeledList>
         <Divider />
         <Stack>
+          <Stack.Item>
+            <Button.Checkbox
+              checked={chatSaving === true}
+              content="Persistent Chat"
+              tooltip="Enable chat persistence"
+              onClick={() => updateChatSaving(!chatSaving)}
+            />
+          </Stack.Item>
           <Stack.Item grow>
             <Button
               content="Save chat log"

tgui/packages/tgui-panel/settings/reducer.js

@@ -16,6 +16,7 @@ import {
 } from './actions';
 import { createDefaultHighlightSetting } from './model';
 import { SETTINGS_TABS, FONTS, MAX_HIGHLIGHT_SETTINGS } from './constants';
+import { storage } from 'common/storage';
 
 const defaultHighlightSetting = createDefaultHighlightSetting();
 
@@ -44,6 +45,9 @@ const initialState = {
   statFontFamily: FONTS[0],
   statTabsStyle: 'default',
   // End of Stat Panel settings
+
+  // Chat persistence setting - default is false, but use stored value if available
+  chatSaving: storage.get('chat-saving-enabled') === true,
 };
 
 export const settingsReducer = (state = initialState, action) => {