From c5c3a65bbf7fd3109025b36563941f7ee1b8a02d Mon Sep 17 00:00:00 2001
From: Bernd Storath <32197462+kaaax0815@users.noreply.github.com>
Date: Mon, 17 Mar 2025 14:28:03 +0100
Subject: [PATCH] Fix: slow suggest Host Address (#1746)

load on client instead of block
---
 src/app/components/Admin/SuggestDialog.vue | 13 ++++++-------
 src/app/components/Form/HostField.vue      | 18 ++++++++++--------
 src/app/pages/admin/config.vue             | 12 ++++++------
 src/i18n/locales/en.json                   |  2 +-
 4 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/app/components/Admin/SuggestDialog.vue b/src/app/components/Admin/SuggestDialog.vue
index 6b18612c..b0a7410e 100644
--- a/src/app/components/Admin/SuggestDialog.vue
+++ b/src/app/components/Admin/SuggestDialog.vue
@@ -3,12 +3,12 @@
     <template #trigger><slot /></template>
     <template #title>{{ $t('admin.config.suggest') }}</template>
     <template #description>
-      <p v-if="!values">
-        {{ $t('general.loading') }}
-      </p>
-      <div v-else class="flex flex-col items-start gap-2">
+      <div class="flex flex-col items-start gap-2">
         <p>{{ $t('admin.config.suggestDesc') }}</p>
-        <BaseSelect v-model="selected" :options="values" />
+        <p v-if="!data">
+          {{ $t('general.loading') }}
+        </p>
+        <BaseSelect v-else v-model="selected" :options="data" />
       </div>
     </template>
     <template #actions>
@@ -31,10 +31,9 @@ const props = defineProps<{
   url: '/api/admin/ip-info' | '/api/setup/4';
 }>();
 
-const { data } = await useFetch(props.url, {
+const { data } = useFetch(props.url, {
   method: 'get',
 });
 
 const selected = ref<string>();
-const values = toRef(data.value);
 </script>
diff --git a/src/app/components/Form/HostField.vue b/src/app/components/Form/HostField.vue
index 467da466..849b34d6 100644
--- a/src/app/components/Form/HostField.vue
+++ b/src/app/components/Form/HostField.vue
@@ -16,14 +16,16 @@
       class="w-full"
       :placeholder="placeholder"
     />
-    <AdminSuggestDialog :url="url" @change="data = $event">
-      <BaseButton as="span">
-        <div class="flex items-center gap-3">
-          <IconsSparkles class="w-4" />
-          <span>{{ $t('admin.config.suggest') }}</span>
-        </div>
-      </BaseButton>
-    </AdminSuggestDialog>
+    <ClientOnly>
+      <AdminSuggestDialog :url="url" @change="data = $event">
+        <BaseButton as="span">
+          <div class="flex items-center gap-3">
+            <IconsSparkles class="w-4" />
+            <span>{{ $t('admin.config.suggest') }}</span>
+          </div>
+        </BaseButton>
+      </AdminSuggestDialog>
+    </ClientOnly>
   </div>
 </template>
 
diff --git a/src/app/pages/admin/config.vue b/src/app/pages/admin/config.vue
index 05be9649..30b4fd14 100644
--- a/src/app/pages/admin/config.vue
+++ b/src/app/pages/admin/config.vue
@@ -18,18 +18,18 @@
         />
       </FormGroup>
       <FormGroup>
-        <FormHeading :description="$t('admin.config.allowedIpsDesc')">{{
-          $t('general.allowedIps')
-        }}</FormHeading>
+        <FormHeading :description="$t('admin.config.allowedIpsDesc')">
+          {{ $t('general.allowedIps') }}
+        </FormHeading>
         <FormArrayField
           v-model="data.defaultAllowedIps"
           name="defaultAllowedIps"
         />
       </FormGroup>
       <FormGroup>
-        <FormHeading :description="$t('admin.config.dnsDesc')">{{
-          $t('general.dns')
-        }}</FormHeading>
+        <FormHeading :description="$t('admin.config.dnsDesc')">
+          {{ $t('general.dns') }}
+        </FormHeading>
         <FormArrayField v-model="data.defaultDns" name="defaultDns" />
       </FormGroup>
       <FormGroup>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index f429034f..181a51d0 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -33,7 +33,7 @@
     "yes": "Yes",
     "no": "No",
     "confirmPassword": "Confirm Password",
-    "loading": "Loading"
+    "loading": "Loading..."
   },
   "setup": {
     "welcome": "Welcome to your first setup of wg-easy",