Show missing loading placeholders

src/components/settings/DeviceSetting.tsx

@@ -19,6 +19,7 @@ import { MutableListSetting } from '@/components/settings/MutableListSetting.tsx
 import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext.tsx';
 import { ActiveDevice, DEFAULT_DEVICE } from '@/util/device.ts';
 import { Select } from '@/components/atoms/Select.tsx';
+import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 
 export const DeviceSetting = () => {
     const { t } = useTranslation();
@@ -39,6 +40,7 @@ export const DeviceSetting = () => {
     const {
         metadata,
         settings: { devices },
+        loading,
     } = useMetadataServerSettings();
 
     const { activeDevice, setActiveDevice } = useContext(ActiveDevice);
@@ -61,6 +63,10 @@ export const DeviceSetting = () => {
         );
     };
 
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
     return (
         <List>
             <MutableListSetting

src/screens/SourceConfigure.tsx

@@ -18,6 +18,7 @@ import { EditTextPreference } from '@/components/sourceConfiguration/EditTextPre
 import { MultiSelectListPreference } from '@/components/sourceConfiguration/MultiSelectListPreference';
 import { PreferenceProps } from '@/typings.ts';
 import { NavBarContext } from '@/components/context/NavbarContext.tsx';
+import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 
 function getPrefComponent(type: string) {
     switch (type) {
@@ -51,7 +52,7 @@ export function SourceConfigure() {
     }, [t]);
 
     const { sourceId } = useParams<{ sourceId: string }>();
-    const { data } = requestManager.useGetSource(sourceId);
+    const { data, loading } = requestManager.useGetSource(sourceId);
     const sourcePreferences = data?.source.preferences ?? [];
 
     const updateValue =
@@ -60,6 +61,10 @@ export function SourceConfigure() {
             requestManager.setSourcePreferences(sourceId, { position, [type]: value });
         };
 
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
     return (
         <List sx={{ padding: 0 }}>
             {sourcePreferences.map((it, index) => {

src/screens/settings/About.tsx

@@ -201,7 +201,7 @@ export function About() {
 
     useSetDefaultBackTo('settings');
 
-    const { data } = requestManager.useGetAbout();
+    const { data, loading } = requestManager.useGetAbout();
     const { aboutServer, aboutWebUI } = data ?? {};
 
     const {
@@ -235,6 +235,10 @@ export function About() {
         !!selectedServerChannelInfo?.tag && selectedServerChannelInfo.tag !== getVersion(aboutServer);
     const isWebUIUpdateAvailable = !!webUIUpdateData?.checkForWebUIUpdate.updateAvailable;
 
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
     return (
         <List>
             <List

src/screens/settings/Backup.tsx

@@ -31,6 +31,7 @@ import { TextSetting } from '@/components/settings/text/TextSetting.tsx';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { TimeSetting } from '@/components/settings/TimeSetting.tsx';
 import { ServerSettings } from '@/typings.ts';
+import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 
 type BackupSettingsType = Pick<ServerSettings, 'backupPath' | 'backupTime' | 'backupInterval' | 'backupTTL'>;
 
@@ -70,7 +71,7 @@ export function Backup() {
 
     useSetDefaultBackTo('settings');
 
-    const { data: settingsData } = requestManager.useGetServerSettings();
+    const { data: settingsData, loading } = requestManager.useGetServerSettings();
     const [mutateSettings] = requestManager.useUpdateServerSettings();
 
     const backupSettings = settingsData ? extractBackupSettings(settingsData.settings) : undefined;
@@ -223,6 +224,10 @@ export function Backup() {
         };
     }, []);
 
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
     return (
         <>
             <List sx={{ padding: 0 }}>

src/screens/settings/BrowseSettings.tsx

@@ -23,6 +23,7 @@ import {
     createUpdateMetadataServerSettings,
     useMetadataServerSettings,
 } from '@/lib/metadata/metadataServerSettings.ts';
+import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 
 type ExtensionsSettings = Pick<GqlServerSettings, 'maxSourcesInParallel' | 'localSourcePath' | 'extensionRepos'>;
 
@@ -45,7 +46,7 @@ export const BrowseSettings = () => {
 
     const [showNsfw, setShowNsfw] = useLocalStorage<boolean>('showNsfw', true);
 
-    const { data } = requestManager.useGetServerSettings();
+    const { data, loading } = requestManager.useGetServerSettings();
     const serverSettings = data ? extractBrowseSettings(data.settings) : undefined;
     const [mutateSettings] = requestManager.useUpdateServerSettings();
 
@@ -61,6 +62,10 @@ export const BrowseSettings = () => {
     } = useMetadataServerSettings();
     const updateMetadataServerSettings = createUpdateMetadataServerSettings<keyof MetadataBrowseSettings>();
 
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
     return (
         <List>
             <ListItem>

src/screens/settings/Categories.tsx

@@ -34,6 +34,7 @@ import { StrictModeDroppable } from '@/lib/StrictModeDroppable';
 import { DEFAULT_FULL_FAB_HEIGHT } from '@/components/util/StyledFab';
 import { NavBarContext, useSetDefaultBackTo } from '@/components/context/NavbarContext';
 import { TCategory } from '@/typings.ts';
+import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 
 const getItemStyle = (
     isDragging: boolean,
@@ -62,7 +63,7 @@ export function Categories() {
         };
     }, [t]);
 
-    const { data } = requestManager.useGetCategories();
+    const { data, loading } = requestManager.useGetCategories({ notifyOnNetworkStatusChange: true });
     const categories = useMemo(() => {
         const res = [...(data?.categories.nodes ?? [])];
         if (res.length > 0 && res[0].name === 'Default') {
@@ -135,6 +136,10 @@ export function Categories() {
         requestManager.deleteCategory(category.id);
     };
 
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
     return (
         <>
             <DragDropContext onDragEnd={onDragEnd}>

src/screens/settings/DownloadSettings.tsx

@@ -26,6 +26,7 @@ import { makeToast } from '@/components/util/Toast.tsx';
 import { DeleteChaptersWhileReadingSetting } from '@/components/settings/downloads/DeleteChaptersWhileReadingSetting.tsx';
 import { CategoriesInclusionSetting } from '@/components/settings/CategoriesInclusionSetting.tsx';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
+import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 
 type DownloadSettingsType = Pick<
     ServerSettings,
@@ -80,6 +81,10 @@ export const DownloadSettings = () => {
         makeToast(t('global.error.label.failed_to_save_changes'), 'error'),
     );
 
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
     return (
         <List>
             <TextSetting

src/screens/settings/ServerSettings.tsx

@@ -21,6 +21,7 @@ import { TextSetting } from '@/components/settings/text/TextSetting.tsx';
 import { ServerSettings as GqlServerSettings } from '@/typings.ts';
 import { NumberSetting } from '@/components/settings/NumberSetting.tsx';
 import { SelectSetting } from '@/components/settings/SelectSetting.tsx';
+import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 
 type ServerSettingsType = Pick<
     GqlServerSettings,
@@ -83,7 +84,7 @@ export const ServerSettings = () => {
         };
     }, [t]);
 
-    const { data } = requestManager.useGetServerSettings();
+    const { data, loading } = requestManager.useGetServerSettings();
     const serverSettings = data ? extractServerSettings(data.settings) : undefined;
     const [mutateSettings] = requestManager.useUpdateServerSettings();
 
@@ -102,6 +103,10 @@ export const ServerSettings = () => {
         mutateSettings({ variables: { input: { settings: { [setting]: value } } } });
     };
 
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
     return (
         <List>
             <List

src/screens/settings/WebUISettings.tsx

@@ -23,6 +23,7 @@ import {
     SelectSettingValueDisplayInfo,
 } from '@/components/settings/SelectSetting.tsx';
 import { WebUiChannel, WebUiFlavor, WebUiInterface } from '@/lib/graphql/generated/graphql.ts';
+import { LoadingPlaceholder } from '@/components/util/LoadingPlaceholder.tsx';
 
 type WebUISettingsType = Pick<
     ServerSettings,
@@ -124,7 +125,7 @@ export const WebUISettings = () => {
         };
     }, [t]);
 
-    const { data } = requestManager.useGetServerSettings();
+    const { data, loading } = requestManager.useGetServerSettings();
     const webUISettings = data ? extractWebUISettings(data.settings) : undefined;
     const [mutateSettings] = requestManager.useUpdateServerSettings();
 
@@ -141,6 +142,10 @@ export const WebUISettings = () => {
         mutateSettings({ variables: { input: { settings: { [setting]: value } } } });
     };
 
+    if (loading) {
+        return <LoadingPlaceholder />;
+    }
+
     return (
         <List>
             <SelectSetting<WebUiFlavor>