From 742dff3698ca4ba2308416a779b99b9ed0e2a1b3 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sun, 5 May 2024 01:00:23 +0200
Subject: [PATCH] Always show local server settings

The local server settings were not shown in case the actual server settings were loading or the request failed.
E.g. in case the "server url" was set to an invalid url, it was not possible to correct it again
---
 src/screens/settings/ServerSettings.tsx | 53 ++++++++++++++++---------
 1 file changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/screens/settings/ServerSettings.tsx b/src/screens/settings/ServerSettings.tsx
index a48ae391..b1279ec3 100644
--- a/src/screens/settings/ServerSettings.tsx
+++ b/src/screens/settings/ServerSettings.tsx
@@ -7,7 +7,7 @@
  */
 
 import { useTranslation, Trans } from 'react-i18next';
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 import Link from '@mui/material/Link';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
@@ -106,24 +106,8 @@ export const ServerSettings = () => {
         mutateSettings({ variables: { input: { settings: { [setting]: value } } } });
     };
 
-    if (loading) {
-        return <LoadingPlaceholder />;
-    }
-
-    if (error) {
-        return (
-            <EmptyViewAbsoluteCentered
-                message={t('global.error.label.failed_to_load_data')}
-                messageExtra={error.message}
-                retry={() => refetch().catch(defaultPromiseErrorHandler('ServerSettings::refetch'))}
-            />
-        );
-    }
-
-    const serverSettings = extractServerSettings(data!.settings);
-
-    return (
-        <List>
+    const localSettings = useMemo(
+        () => (
             <List
                 subheader={
                     <ListSubheader component="div" id="server-settings-client">
@@ -138,6 +122,37 @@ export const ServerSettings = () => {
                     placeholder="http://localhost:4567"
                 />
             </List>
+        ),
+        [],
+    );
+
+    if (loading) {
+        return (
+            <>
+                {localSettings}
+                <LoadingPlaceholder />
+            </>
+        );
+    }
+
+    if (error) {
+        return (
+            <>
+                {localSettings}
+                <EmptyViewAbsoluteCentered
+                    message={t('global.error.label.failed_to_load_data')}
+                    messageExtra={error.message}
+                    retry={() => refetch().catch(defaultPromiseErrorHandler('ServerSettings::refetch'))}
+                />
+            </>
+        );
+    }
+
+    const serverSettings = extractServerSettings(data!.settings);
+
+    return (
+        <List>
+            {localSettings}
             <List
                 subheader={
                     <ListSubheader component="div" id="server-settings-server-address">