From 0f029cb625bd69e0806aefcc8ad76c7d84147969 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sat, 17 Jun 2023 22:31:59 +0200
Subject: [PATCH] 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
---
 src/components/MangaGrid.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/MangaGrid.tsx b/src/components/MangaGrid.tsx
index 70acb043..6d76d1d9 100644
--- a/src/components/MangaGrid.tsx
+++ b/src/components/MangaGrid.tsx
@@ -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;