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 ; }