Extract function to get scrollbar size

src/components/reader/Page.tsx

@@ -6,13 +6,13 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { CSSProperties, forwardRef, useCallback, useState } from 'react';
+import { CSSProperties, forwardRef } from 'react';
 import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { IReaderSettings, ReaderType } from '@/typings';
 import { SpinnerImage } from '@/components/util/SpinnerImage';
-import { useResizeObserver } from '@/util/useResizeObserver';
+import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
 
 export const isHorizontalReaderType = (readerType: ReaderType): boolean =>
     ['ContinuesHorizontalLTR', 'ContinuesHorizontalRTL'].includes(readerType);
@@ -20,11 +20,9 @@ export const isHorizontalReaderType = (readerType: ReaderType): boolean =>
 export function imageStyle(settings: IReaderSettings): CSSProperties {
     const isVertical = settings.readerType === 'ContinuesVertical';
     const isHorizontal = isHorizontalReaderType(settings.readerType);
-    const [scrollbarHeight, setScrollbarHeight] = useState(0);
+
-    useResizeObserver(
+    const scrollbarHeight = MediaQuery.useGetScrollbarSize();
-        document.documentElement,
+
-        useCallback(() => setScrollbarHeight(window.innerHeight - document.documentElement.clientHeight), []),
-    );
     const baseStyling: CSSProperties = {
         margin: 0,
         width: `${settings.readerWidth}%`,

src/lib/ui/MediaQuery.tsx

@@ -8,9 +8,11 @@
 
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { Breakpoint } from '@mui/material/styles';
+import { useCallback, useState } from 'react';
 import { getCurrentTheme } from '@/theme.ts';
 import { ThemeMode } from '@/components/context/ThemeModeContext.tsx';
 import { AppStorage } from '@/util/AppStorage.ts';
+import { useResizeObserver } from '@/util/useResizeObserver.tsx';
 
 export class MediaQuery {
     static useIsTouchDevice(): boolean {
@@ -25,6 +27,17 @@ export class MediaQuery {
         return this.useIsBelowWidth('sm');
     }
 
+    static useGetScrollbarSize(): number {
+        const [scrollbarSize, setScrollbarSize] = useState(0);
+
+        useResizeObserver(
+            document.documentElement,
+            useCallback(() => setScrollbarSize(window.innerHeight - document.documentElement.clientHeight), []),
+        );
+
+        return scrollbarSize;
+    }
+
     static getSystemThemeMode(): Exclude<ThemeMode, 'system'> {
         const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
         return prefersDarkMode ? ThemeMode.DARK : ThemeMode.LIGHT;

src/screens/Reader.tsx

@@ -42,7 +42,7 @@ import { GET_CHAPTERS_READER } from '@/lib/graphql/queries/ChapterQuery.ts';
 import { GET_MANGA_READER } from '@/lib/graphql/queries/MangaQuery.ts';
 import { TMangaReader } from '@/lib/data/Mangas.ts';
 import { CHAPTER_READER_FIELDS } from '@/lib/graphql/fragments/ChapterFragments.ts';
-import { useResizeObserver } from '@/util/useResizeObserver';
+import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
 
 type TChapter = GetChaptersReaderQuery['chapters']['nodes'][number];
 
@@ -488,11 +488,7 @@ export function Reader() {
         openNextChapter(ChapterOffset.PREV);
     }, [openNextChapter]);
 
-    const [scrollbarHeight, setScrollbarHeight] = useState(0);
+    const scrollbarHeight = MediaQuery.useGetScrollbarSize();
-    useResizeObserver(
-        document.documentElement,
-        useCallback(() => setScrollbarHeight(window.innerHeight - document.documentElement.clientHeight), []),
-    );
 
     if (isLoading) {
         return (