mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

throttle for messages view

Browse Source
This commit is contained in:
Jan Prochazka 2020-04-14 21:58:48 +02:00
parent 6e8ef35902
commit 52d2560c78
2 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/src/query/MessagesView.js
View File

@ -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 }) {
</MainContainer>
);
}
export default React.memo(MessagesView);

22
packages/web/src/query/SessionMessagesView.js
View File

@ -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 <MessagesView items={messages} onMessageClick={onMessageClick} />;
return <MessagesView items={displayedMessages} onMessageClick={onMessageClick} />;
}