Extract fetch logic into parent setting components

src/screens/settings/DownloadSettings.tsx

@@ -65,12 +65,48 @@ export const DownloadSettings = () => {
         };
     }, [t]);
 
-    const { data, loading, error, refetch } = requestManager.useGetServerSettings({
-        notifyOnNetworkStatusChange: true,
-    });
-    const downloadSettings = data ? extractDownloadSettings(data.settings) : undefined;
+    const categories = requestManager.useGetCategories();
+    const serverSettings = requestManager.useGetServerSettings({ notifyOnNetworkStatusChange: true });
     const [mutateSettings] = requestManager.useUpdateServerSettings();
-    const { settings: metadataSettings } = useMetadataServerSettings();
+    const {
+        settings: metadataSettings,
+        loading: areMetadataServerSettingsLoading,
+        request: { error: metadataServerSettingsError, refetch: refetchMetadataServerSettings },
+    } = useMetadataServerSettings();
+
+    const loading = serverSettings.loading || areMetadataServerSettingsLoading || categories.loading;
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
+    const error = serverSettings.error ?? metadataServerSettingsError ?? categories.error;
+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => {
+                    if (serverSettings.error) {
+                        serverSettings
+                            .refetch()
+                            .catch(defaultPromiseErrorHandler('DownloadSettings::refetchServerSettings'));
+                    }
+
+                    if (metadataServerSettingsError) {
+                        refetchMetadataServerSettings().catch(
+                            defaultPromiseErrorHandler('refetchMetadataServerSettings::'),
+                        );
+                    }
+
+                    if (categories.error) {
+                        categories.refetch().catch(defaultPromiseErrorHandler('LibrarySettings::refetchCategories'));
+                    }
+                }}
+            />
+        );
+    }
+
+    const downloadSettings = extractDownloadSettings(serverSettings.data!.settings);
 
     const updateSetting = <Setting extends keyof DownloadSettingsType>(
         setting: Setting,
@@ -85,20 +121,6 @@ export const DownloadSettings = () => {
         makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
     );
 
-    if (loading) {
-        return <LoadingPlaceholder />;
-    }
-
-    if (error) {
-        return (
-            <EmptyView
-                message={t('global.error.label.failed_to_load_data')}
-                messageExtra={error.message}
-                retry={() => refetch().catch(defaultPromiseErrorHandler('DownloadSettings::refetch'))}
-            />
-        );
-    }
-
     return (
         <List>
             <TextSetting
@@ -204,6 +226,7 @@ export const DownloadSettings = () => {
                     />
                 </ListItem>
                 <CategoriesInclusionSetting
+                    categories={categories.data!.categories.nodes}
                     includeField="includeInDownload"
                     dialogText={t('download.settings.auto_download.categories.label.include_in_download')}
                 />
@@ -215,7 +238,7 @@ export const DownloadSettings = () => {
                     </ListSubheader>
                 }
             >
-                <DownloadAheadSetting />
+                <DownloadAheadSetting downloadAheadLimit={metadataSettings.downloadAheadLimit} />
             </List>
         </List>
     );

src/screens/settings/LibrarySettings.tsx

@@ -25,6 +25,9 @@ import {
 } from '@/lib/metadata/metadataServerSettings.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { Mangas } from '@/lib/data/Mangas.ts';
+import { EmptyView } from '@/components/util/EmptyView';
+import { defaultPromiseErrorHandler } from '@/util/defaultPromiseErrorHandler.ts';
+import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 
 const removeNonLibraryMangasFromCategories = async (): Promise<void> => {
     try {
@@ -61,12 +64,50 @@ export function LibrarySettings() {
 
     useSetDefaultBackTo('settings');
 
-    const { settings } = useMetadataServerSettings();
+    const categories = requestManager.useGetCategories();
+    const serverSettings = requestManager.useGetServerSettings({ notifyOnNetworkStatusChange: true });
+    const {
+        settings,
+        loading: areMetadataServerSettingsLoading,
+        request: { error: metadataServerSettingsError, refetch: refetchMetadataServerSettings },
+    } = useMetadataServerSettings();
 
     const setSettingValue = createUpdateMetadataServerSettings<keyof MetadataLibrarySettings>(() =>
         makeToast(t('search.error.label.failed_to_save_settings'), 'warning'),
     );
 
+    const loading = serverSettings.loading || areMetadataServerSettingsLoading || categories.loading;
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
+    const error = serverSettings.error ?? metadataServerSettingsError ?? categories.error;
+    if (error) {
+        return (
+            <EmptyView
+                message={t('global.error.label.failed_to_load_data')}
+                messageExtra={error.message}
+                retry={() => {
+                    if (serverSettings.error) {
+                        serverSettings
+                            ?.refetch()
+                            .catch(defaultPromiseErrorHandler('LibrarySettings::refetchServerSettings'));
+                    }
+
+                    if (metadataServerSettingsError) {
+                        refetchMetadataServerSettings().catch(
+                            defaultPromiseErrorHandler('LibrarySettings::refetchMetadataServerSettings'),
+                        );
+                    }
+
+                    if (categories.error) {
+                        categories.refetch().catch(defaultPromiseErrorHandler('LibrarySettings::refetchCategories'));
+                    }
+                }}
+            />
+        );
+    }
+
     return (
         <List>
             <List
@@ -112,7 +153,10 @@ export function LibrarySettings() {
                     />
                 </ListItem>
             </List>
-            <GlobalUpdateSettings />
+            <GlobalUpdateSettings
+                serverSettings={serverSettings.data!.settings}
+                categories={categories.data!.categories.nodes}
+            />
             <List
                 subheader={
                     <ListSubheader component="div" id="library-advanced">