Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-17 12:24:38 +03:00
Code Issues Packages Projects Releases Wiki Activity

Address resize loop (#5004)

Browse Source
This commit is contained in:
CJ
2024-06-24 01:03:29 -05:00
committed by WithoutPants
parent 205b24499b
commit c5bafeb15c
1 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
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];
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];