Skip to content

Commit

Permalink
Fix/library manga grid infinite item size on category switch (#378)
Browse files Browse the repository at this point in the history
* Revert "Fix/manga grid infinite item width (#376)"

This reverts commit 48d559e

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
  • Loading branch information
schroda authored Jun 17, 2023
1 parent cdacc4b commit 0f029cb
Showing 1 changed file with 4 additions and 7 deletions.
11 changes: 4 additions & 7 deletions src/components/MangaGrid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 0f029cb

Please sign in to comment.