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">
+      <div class="flex flex-col items-start gap-2">
+        <p>{{ $t('admin.config.suggestDesc') }}</p>
+        <p v-if="!data">
           {{ $t('general.loading') }}
         </p>
-      <div v-else class="flex flex-col items-start gap-2">
+        <BaseSelect v-else v-model="selected" :options="data" />
-        <p>{{ $t('admin.config.suggestDesc') }}</p>
-        <BaseSelect v-model="selected" :options="values" />
       </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,6 +16,7 @@
       class="w-full"
       :placeholder="placeholder"
     />
+    <ClientOnly>
       <AdminSuggestDialog :url="url" @change="data = $event">
         <BaseButton as="span">
           <div class="flex items-center gap-3">
@@ -24,6 +25,7 @@
           </div>
         </BaseButton>
       </AdminSuggestDialog>
+    </ClientOnly>
   </div>
 </template>
 

src/app/pages/admin/config.vue

@@ -18,18 +18,18 @@
         />
       </FormGroup>
       <FormGroup>
-        <FormHeading :description="$t('admin.config.allowedIpsDesc')">{{
+        <FormHeading :description="$t('admin.config.allowedIpsDesc')">
-          $t('general.allowedIps')
+          {{ $t('general.allowedIps') }}
-        }}</FormHeading>
+        </FormHeading>
         <FormArrayField
           v-model="data.defaultAllowedIps"
           name="defaultAllowedIps"
         />
       </FormGroup>
       <FormGroup>
-        <FormHeading :description="$t('admin.config.dnsDesc')">{{
+        <FormHeading :description="$t('admin.config.dnsDesc')">
-          $t('general.dns')
+          {{ $t('general.dns') }}
-        }}</FormHeading>
+        </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",