diff --git a/src/components/common/helpers/Helpers.tsx b/src/components/common/helpers/Helpers.tsx index e0766aaf33..f4df407f35 100644 --- a/src/components/common/helpers/Helpers.tsx +++ b/src/components/common/helpers/Helpers.tsx @@ -1112,32 +1112,6 @@ export const reloadToastBody = () => { ) } -export function useHeightObserver(callback): [RefObject] { - const ref = useRef(null) - const callbackRef = useRef(callback) - - useLayoutEffect(() => { - callbackRef.current = callback - }, [callback]) - - const handleHeightChange = useCallback(() => { - callbackRef.current?.(ref.current.clientHeight) - }, [callbackRef]) - - useLayoutEffect(() => { - if (!ref.current) { - return - } - const observer = new ResizeObserver(handleHeightChange) - observer.observe(ref.current) - return () => { - observer.disconnect() - } - }, [handleHeightChange, ref]) - - return [ref] -} - export const getDeploymentAppType = ( allowedDeploymentTypes: DeploymentAppTypes[], selectedDeploymentAppType: string, diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/Terminal.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/Terminal.tsx index 90f816ad40..22d3b8e577 100644 --- a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/Terminal.tsx +++ b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/terminal/Terminal.tsx @@ -5,7 +5,7 @@ import * as XtermWebfont from 'xterm-webfont' import SockJS from 'sockjs-client' import moment from 'moment' import CopyToast, { handleSelectionChange } from '../CopyToast' -import { elementDidMount, useHeightObserver } from '../../../../../../common/helpers/Helpers' +import { elementDidMount } from '../../../../../../common/helpers/Helpers' import { CLUSTER_STATUS, SocketConnectionType } from '../../../../../../ClusterNodes/constants' import { TERMINAL_STATUS } from './constants' import './terminal.scss' @@ -27,6 +27,7 @@ export default function TerminalView({ dataTestId, }: TerminalViewType) { const socket = useRef(null) + const termDiv = useRef(null) const [firstMessageReceived, setFirstMessageReceived] = useState(false) const [isReconnection, setIsReconnection] = useState(false) const [popupText, setPopupText] = useState(false) @@ -42,7 +43,13 @@ export default function TerminalView({ } } - const [myDivRef] = useHeightObserver(resizeSocket) + useEffect(() => { + /* requestAnimationFrame: will defer the resizeSocket callback to the next repaint; + * sparing us from - ResizeObserver loop completed with undelivered notifications */ + const observer = new ResizeObserver(() => window.requestAnimationFrame(resizeSocket)) + observer.observe(termDiv.current) + return () => observer.disconnect() + }, []) useEffect(() => { if (!terminalRef.current) { @@ -240,7 +247,7 @@ export default function TerminalView({
{renderConnectionStrip()}