Rooba
/
stash
mirror of https://github.com/stashapp/stash.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Address resize loop (#5004)

This commit is contained in:
CJ 2024-06-24 01:03:29 -05:00 committed by GitHub
parent 3156191b83
commit d986a9eb4f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/v2.5/src/components/Shared/GridCard/GridCard.tsx
View File

@ -42,9 +42,9 @@ interface IDimension {
height: number;
}
export const useContainerDimensions = <
T extends HTMLElement = HTMLDivElement
>(): [MutableRefObject<T | null>, IDimension] => {
export const useContainerDimensions = <T extends HTMLElement = HTMLDivElement>(
sensitivityThreshold = 20
): [MutableRefObject<T | null>, IDimension] => {
const target = useRef<T | null>(null);
const [dimension, setDimension] = useState<IDimension>({
width: 0,
@ -53,7 +53,14 @@ export const useContainerDimensions = <
useResizeObserver(target, (entry) => {
const { inlineSize: width, blockSize: height } = entry.contentBoxSize[0];
setDimension({ width, height });
let difference = Math.abs(dimension.width - width);
// Only adjust when width changed by a significant margin. This addresses the cornercase that sees
// the dimensions toggle back and forward when the window is adjusted perfectly such that overflow
// is trigger then immediable disabled because of a resize event then continues this loop endlessly.
// the scrollbar size varies between platforms. Windows is apparently around 17 pixels.
if (difference > sensitivityThreshold) {
setDimension({ width, height });
}
});
return [target, dimension];