From d885b4904e3dfeb43fe020783093179ead0afcb6 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Tue, 31 Dec 2024 02:29:07 +0100
Subject: [PATCH] Render pages only once reader settings have been set

For the reader to be ready it's necessary that the settings not only have been loaded but also that the settings context is properly set
---
 src/modules/reader/screens/Reader.tsx | 34 ++++++++++++++-------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/modules/reader/screens/Reader.tsx b/src/modules/reader/screens/Reader.tsx
index 0dc05ffb..248d7071 100644
--- a/src/modules/reader/screens/Reader.tsx
+++ b/src/modules/reader/screens/Reader.tsx
@@ -127,6 +127,8 @@ const BaseReader = ({
 
     const scrollElementRef = useRef<HTMLDivElement | null>(null);
 
+    const [areSettingsSet, setAreSettingsSet] = useState(false);
+
     const { chapterIndex: paramChapterIndex, mangaId: paramMangaId } = useParams<{
         chapterIndex: string;
         mangaId: string;
@@ -164,6 +166,7 @@ const BaseReader = ({
         chapterIndex <= chapters.length - 1;
 
     const isLoading =
+        !areSettingsSet ||
         mangaResponse.loading ||
         chaptersResponse.loading ||
         defaultSettingsResponse.loading ||
@@ -248,7 +251,6 @@ const BaseReader = ({
     }, [pagesResponse.data?.fetchChapterPages?.pages]);
 
     // set settings state
-    const [areSettingsSet, setAreSettingsSet] = useState(false);
     useEffect(() => {
         const mangaFromResponse = mangaResponse.data?.manga;
         if (!mangaFromResponse || defaultSettingsResponse.loading || defaultSettingsResponse.error) {
@@ -389,21 +391,6 @@ const BaseReader = ({
         return () => setOverride({ status: false, value: null });
     }, [isOverlayVisible, setIsOverlayVisible, scrollElementRef.current]);
 
-    if (isLoading) {
-        return (
-            <Box
-                sx={{
-                    height: '100vh',
-                    width: '100vw',
-                    display: 'grid',
-                    placeItems: 'center',
-                }}
-            >
-                <LoadingPlaceholder />
-            </Box>
-        );
-    }
-
     if (error) {
         return (
             <EmptyViewAbsoluteCentered
@@ -432,6 +419,21 @@ const BaseReader = ({
         );
     }
 
+    if (isLoading) {
+        return (
+            <Box
+                sx={{
+                    height: '100vh',
+                    width: '100vw',
+                    display: 'grid',
+                    placeItems: 'center',
+                }}
+            >
+                <LoadingPlaceholder />
+            </Box>
+        );
+    }
+
     if (currentChapter === null) {
         return <EmptyViewAbsoluteCentered message={t('reader.error.label.chapter_not_found')} />;
     }