Fix/library manga grid infinite item size on category switch (#378)

* Revert "Fix/manga grid infinite item width (#376)"

This reverts commit 48d559ec

This fixed (and worked as expected in dev mode) the very rare issue in dev mode (you had to load the page with a small screen size and increase the screen size before the grid and grid items were rendered) and caused it frequently in production build in the Library grid when switching categories

* Fallback grid dimensions to current window dimensions

Hook only run once, which could lead to an issue where the grid item width was calculated to be infinite (e.g. in SearchAll due to strict-mode behaviour in the dev mode).
Could be that this is only an issue in dev mode due to react-strict mode.

* Remove unused "height" grid dimensions property
This commit is contained in:
schroda
2023-06-17 22:31:59 +02:00
committed by GitHub
parent cdacc4b2a9
commit 0f029cb625

View File

@@ -176,22 +176,19 @@ const MangaGrid: React.FC<IMangaGridProps> = (props) => {
inLibraryIndicator,
} = props;
const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
const [dimensions, setDimensions] = useState(document.documentElement.offsetWidth);
const [gridItemWidth] = useLocalStorage<number>('ItemWidth', 300);
const gridRef = useRef<HTMLDivElement>(null);
const GridItemContainer = useMemo(
() => GridItemContainerWithDimension(dimensions.width, gridItemWidth, gridLayout),
() => GridItemContainerWithDimension(dimensions, gridItemWidth, gridLayout),
[dimensions, gridItemWidth, gridLayout],
);
const updateGridWidth = () => {
setDimensions({
width: gridRef.current?.offsetWidth ?? 0,
height: gridRef.current?.offsetHeight ?? 0,
});
setDimensions(gridRef.current?.offsetWidth ?? document.documentElement.offsetWidth);
};
useLayoutEffect(() => updateGridWidth, [gridRef.current?.offsetWidth, gridRef.current?.offsetHeight]);
useLayoutEffect(updateGridWidth, []);
useEffect(() => {
let movementTimer: NodeJS.Timeout;