From 230acc23d50209fd49ebda47eb928316ac7abb93 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Fri, 24 May 2024 17:29:30 +0200
Subject: [PATCH] Prevent scrollbar from shortly disappearing on library
 category change

Due to the MangaGrid getting unmounted when changing the category, the "y overflow" value got reset to "auto" which caused the scrollbar from disappearing and immediately reappearing again.
This caused the site content to slightly "jump" due to the increase and immediate decrease in is width.

Related commit 871908eba91a8edc97a9719315f4f63cda0976ed
---
 src/components/MangaGrid.tsx                |  2 +-
 src/components/library/LibraryMangaGrid.tsx | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/MangaGrid.tsx b/src/components/MangaGrid.tsx
index 8de7e512..d2aaddff 100644
--- a/src/components/MangaGrid.tsx
+++ b/src/components/MangaGrid.tsx
@@ -288,7 +288,7 @@ export const MangaGrid: React.FC<IMangaGridProps> = ({
             clearTimeout(timeout);
         };
     }, [gridLayout]);
-    useEffect(
+    useLayoutEffect(
         () => () => {
             document.body.style.overflowY = 'auto';
         },
diff --git a/src/components/library/LibraryMangaGrid.tsx b/src/components/library/LibraryMangaGrid.tsx
index b1187d71..73c41712 100644
--- a/src/components/library/LibraryMangaGrid.tsx
+++ b/src/components/library/LibraryMangaGrid.tsx
@@ -6,11 +6,11 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useLayoutEffect } from 'react';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
 import { TManga } from '@/typings';
-import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
+import { GridLayout, useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
 import { IMangaGridProps, MangaGrid } from '@/components/MangaGrid';
 
 interface LibraryMangaGridProps
@@ -37,6 +37,13 @@ export const LibraryMangaGrid: React.FC<LibraryMangaGridProps> = ({
         window.scrollTo(0, 0);
     }, [query, unread, downloaded]);
 
+    useLayoutEffect(() => {
+        document.body.style.overflowY = options.gridLayout === GridLayout.List ? 'auto' : 'scroll';
+        return () => {
+            document.body.style.overflowY = 'auto';
+        };
+    }, []);
+
     return (
         <MangaGrid
             {...gridProps}