diff --git a/src/devtools/views/Components/OwnersStack.css b/src/devtools/views/Components/OwnersStack.css index 2af09bc30e..d2ebdde61e 100644 --- a/src/devtools/views/Components/OwnersStack.css +++ b/src/devtools/views/Components/OwnersStack.css @@ -60,7 +60,6 @@ position: absolute; top: calc(100% + 5px); left: 0; - min-height: 200px; background-color: var(--color-background); border: 1px solid var(--color-selected-border); overflow-y: auto; diff --git a/src/devtools/views/Components/OwnersStack.js b/src/devtools/views/Components/OwnersStack.js index 55afea5de3..295c3fd97d 100644 --- a/src/devtools/views/Components/OwnersStack.js +++ b/src/devtools/views/Components/OwnersStack.js @@ -7,6 +7,7 @@ import React, { createRef, forwardRef, } from 'react'; +import throttle from 'lodash.throttle'; import classNames from 'classnames'; import Button from '../Button'; import ButtonIcon from '../ButtonIcon'; @@ -175,14 +176,10 @@ function useElementsBarOverflowing( }, [elementsBarRef, elementsTotalWidth]); useEffect(() => { - let timeoutID = null; const handleResize = () => { callback(isElementsBarOverflowing()); }; - const debounceHandleResize = () => { - clearTimeout(((timeoutID: any): TimeoutID)); - timeoutID = setTimeout(handleResize, 100); - }; + const debounceHandleResize = throttle(handleResize, 100); handleResize(); // It's important to listen to the ownerDocument.defaultView to support the browser extension. @@ -192,9 +189,6 @@ function useElementsBarOverflowing( ownerWindow.addEventListener('resize', debounceHandleResize); return () => { ownerWindow.removeEventListener('resize', debounceHandleResize); - if (timeoutID !== null) { - clearTimeout(timeoutID); - } }; }, [elementsBarRef, isElementsBarOverflowing, callback]); }