Properly update manga grid items width

After closing the Reader, the grid width changes weren't correctly detected and thus, the manga grid items shrank in size

src/components/MangaGrid.tsx

@@ -32,6 +32,7 @@ import { AppStorage } from '@/util/AppStorage.ts';
 import { MangaCardProps } from '@/components/manga/MangaCard.types.tsx';
 import { MangaType } from '@/lib/graphql/generated/graphql.ts';
 import { useResizeObserver } from '@/util/useResizeObserver.tsx';
+import { useDebounce } from '@/util/useDebounce.ts';
 
 const GridContainer = React.forwardRef<HTMLDivElement, GridTypeMap['props']>(({ children, ...props }, ref) => (
     <Grid {...props} ref={ref} container sx={{ paddingLeft: '5px', paddingRight: '13px' }}>
@@ -254,7 +255,8 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
 
     const gridRef = useRef<HTMLDivElement>(null);
 
-    const [dimensions, setDimensions] = useState(document.documentElement.offsetWidth);
+    const [actualDimensions, setDimensions] = useState(document.documentElement.offsetWidth);
+    const dimensions = useDebounce(actualDimensions, 500);
     const [gridItemWidth] = useLocalStorage<number>('ItemWidth', 300);
     const gridWrapperRef = useRef<HTMLDivElement>(null);
     const GridItemContainer = useMemo(
@@ -262,22 +264,6 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
         [dimensions, gridItemWidth, gridLayout],
     );
 
-    const updateGridWidth = () => {
-        const getDimensions = () => {
-            const gridWidth = gridWrapperRef.current?.offsetWidth;
-
-            if (!gridWidth) {
-                return document.documentElement.offsetWidth;
-            }
-
-            return gridWidth;
-        };
-
-        setDimensions(getDimensions());
-    };
-
-    useLayoutEffect(updateGridWidth, []);
-
     // always show vertical scrollbar to prevent https://github.com/Suwayomi/Suwayomi-WebUI/issues/758
     useLayoutEffect(() => {
         // in case "overflow" is currently set to "hidden" that (most likely) means that a MUI modal is open and locks the scrollbar
@@ -307,18 +293,22 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
         [],
     );
 
-    useEffect(() => {
+    useResizeObserver(
-        let movementTimer: NodeJS.Timeout;
+        gridWrapperRef,
+        useCallback(() => {
+            const getDimensions = () => {
+                const gridWidth = gridWrapperRef.current?.offsetWidth;
 
-        const onResize = () => {
+                if (!gridWidth) {
-            clearInterval(movementTimer);
+                    return document.documentElement.offsetWidth;
-            movementTimer = setTimeout(updateGridWidth, 100);
+                }
+
+                return gridWidth;
             };
 
-        window.addEventListener('resize', onResize);
+            setDimensions(getDimensions());
-
+        }, []),
-        return () => window.removeEventListener('resize', onResize);
+    );
-    }, []);
 
     useResizeObserver(
         gridRef,