diff --git a/packages/web/src/query/MessagesView.js b/packages/web/src/query/MessagesView.js
index 2d662d7de..fb5358e4a 100644
--- a/packages/web/src/query/MessagesView.js
+++ b/packages/web/src/query/MessagesView.js
@@ -51,7 +51,7 @@ function formatDuration(duration) {
return `${Math.round(duration / 1000)} s`;
}
-export default function MessagesView({ items, onMessageClick }) {
+function MessagesView({ items, onMessageClick }) {
const handleClick = (row) => {
if (onMessageClick) onMessageClick(row);
};
@@ -99,3 +99,5 @@ export default function MessagesView({ items, onMessageClick }) {
);
}
+
+export default React.memo(MessagesView);
\ No newline at end of file
diff --git a/packages/web/src/query/SessionMessagesView.js b/packages/web/src/query/SessionMessagesView.js
index 82c8afbfc..9153342f6 100644
--- a/packages/web/src/query/SessionMessagesView.js
+++ b/packages/web/src/query/SessionMessagesView.js
@@ -1,15 +1,29 @@
+import _ from 'lodash';
import React from 'react';
import MessagesView from './MessagesView';
import useSocket from '../utility/SocketProvider';
export default function SessionMessagesView({ sessionId, onMessageClick, executeNumber }) {
- const [messages, setMessages] = React.useState([]);
+ const [displayedMessages, setDisplayedMessages] = React.useState([]);
+ const cachedMessagesRef = React.useRef([]);
const socket = useSocket();
- const handleInfo = React.useCallback((info) => setMessages((items) => [...items, info]), []);
+ const displayCachedMessages = React.useMemo(
+ () =>
+ _.throttle(() => {
+ setDisplayedMessages([...cachedMessagesRef.current]);
+ }, 500),
+ []
+ );
+
+ const handleInfo = React.useCallback((info) => {
+ cachedMessagesRef.current.push(info);
+ displayCachedMessages();
+ }, []);
React.useEffect(() => {
- setMessages([]);
+ setDisplayedMessages([]);
+ cachedMessagesRef.current = [];
}, [executeNumber]);
React.useEffect(() => {
@@ -21,5 +35,5 @@ export default function SessionMessagesView({ sessionId, onMessageClick, execute
}
}, [sessionId, socket]);
- return ;
+ return ;
}