From 1ec6d77598788890beea16245d59b5b65410440e Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 5 Jun 2023 01:24:56 +0200
Subject: [PATCH] Fix/library title size info initial render flickering (#350)

* Rename variable

* Hide size tag until tabs data was loaded

The wrong loading state (mangas) was being used to check if the size tag can be shown.
---
 src/screens/Library.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/screens/Library.tsx b/src/screens/Library.tsx
index 913c0e39..53b97541 100644
--- a/src/screens/Library.tsx
+++ b/src/screens/Library.tsx
@@ -35,7 +35,7 @@ export default function Library() {
 
     const { options } = useLibraryOptionsContext();
     const [lastLibraryUpdate, setLastLibraryUpdate] = useState(Date.now());
-    const { data: tabsData, error: tabsError, isLoading } = requestManager.useGetCategories();
+    const { data: tabsData, error: tabsError, isLoading: areCategoriesLoading } = requestManager.useGetCategories();
     const tabs = tabsData ?? [];
     const librarySize = useMemo(() => tabs.map((tab) => tab.size).reduce((prev, curr) => prev + curr, 0), [tabs]);
 
@@ -55,7 +55,7 @@ export default function Library() {
         const navBarTitle = (
             <TitleWithSizeTag>
                 {title}
-                {mangaLoading || !options.showTabSize ? null : <TitleSizeTag label={librarySize} />}
+                {areCategoriesLoading || !options.showTabSize ? null : <TitleSizeTag label={librarySize} />}
             </TitleWithSizeTag>
         );
         setTitle(navBarTitle, title);
@@ -70,7 +70,7 @@ export default function Library() {
             setTitle('');
             setAction(null);
         };
-    }, [t, librarySize, mangaLoading, options]);
+    }, [t, librarySize, areCategoriesLoading, options]);
 
     const handleTabChange = (newTab: number) => {
         setTabSearchParam(newTab === 0 ? undefined : newTab);
@@ -85,7 +85,7 @@ export default function Library() {
         );
     }
 
-    if (isLoading) {
+    if (areCategoriesLoading) {
         return <LoadingPlaceholder />;
     }