Fix: slow suggest Host Address (#1746)

load on client instead of block

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>

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>
 

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>

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",