dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-05-01 13:13:58 +00:00
Code Issues 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
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`; return `${Math.round(duration / 1000)} s`;
} }
export default function MessagesView({ items, onMessageClick }) { function MessagesView({ items, onMessageClick }) {
const handleClick = (row) => { const handleClick = (row) => {
if (onMessageClick) onMessageClick(row); if (onMessageClick) onMessageClick(row);
}; };
@@ -99,3 +99,5 @@ export default function MessagesView({ items, onMessageClick }) {
</MainContainer> </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 React from 'react';
import MessagesView from './MessagesView'; import MessagesView from './MessagesView';
import useSocket from '../utility/SocketProvider'; import useSocket from '../utility/SocketProvider';
export default function SessionMessagesView({ sessionId, onMessageClick, executeNumber }) { 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 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(() => { React.useEffect(() => {
setMessages([]); setDisplayedMessages([]);
cachedMessagesRef.current = [];
}, [executeNumber]); }, [executeNumber]);
React.useEffect(() => { React.useEffect(() => {
@@ -21,5 +35,5 @@ export default function SessionMessagesView({ sessionId, onMessageClick, execute
} }
}, [sessionId, socket]); }, [sessionId, socket]);
return <MessagesView items={messages} onMessageClick={onMessageClick} />; return <MessagesView items={displayedMessages} onMessageClick={onMessageClick} />;
} }