Correctly set busy state when toggling dyndns feature

dashboard/src/views/EventlogView.vue

@@ -148,14 +148,14 @@ onMounted(async () => {
   <div class="content" style="height: 100%; overflow: hidden; display: flex; flex-direction: column;">
     <!-- cant use Section component as we need control over vertical scrolling -->
     <div class="section" style="overflow: hidden; display: flex; flex-direction: column;">
-      <h2 class="section-header">
+      <h1 class="section-header">
         {{ $t('eventlog.title') }}
         <div>
           <TextInput :placeholder="$t('main.searchPlaceholder')" style="flex-grow: 1;" v-model="search"/>
-          <MultiSelect v-model="actions" :options="availableActions" option-label="id" :selected-label="actions.length ? $t('main.multiselect.selected', { n: actions.length }) : $t('eventlog.filterAllEvents')"/>
+          <MultiSelect :search-threshold="10" v-model="actions" :options="availableActions" option-label="id" :selected-label="actions.length ? $t('main.multiselect.selected', { n: actions.length }) : $t('eventlog.filterAllEvents')"/>
           <Button tool secondary @click="onRefresh()" :loading="refreshBusy" icon="fa-solid fa-sync-alt" />
         </div>
-      </h2>
+      </h1>
       <div class="section-body" style="overflow: auto; padding-top: 0" @scroll="onScroll">
         <table class="eventlog-table">
           <thead>
@@ -220,7 +220,7 @@ onMounted(async () => {
 
 .eventlog-table th,
 .eventlog-table td {
-  padding: 5px;
+  padding: 6px;
 }
 
 .eventlog-filter {

dashboard/src/views/NetworkView.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, onMounted, watch } from 'vue';
+import { ref, onMounted } from 'vue';
 import { Switch } from 'pankow';
 import Section from  '../components/Section.vue';
 import SettingsItem from  '../components/SettingsItem.vue';
@@ -11,17 +11,28 @@ import NetworkModel from  '../models/NetworkModel.js';
 
 const networkModel = NetworkModel.create();
 
+const busy = ref(true);
 const dynDnsIsEnabled = ref(false);
-watch(dynDnsIsEnabled, async (newValue) => {
-  const [error] = await networkModel.setDynDnsConfig(newValue);
-  if (error) return console.error(error);
-});
+
+async function onToggleDynDns(value) {
+  busy.value = true;
+
+  const [error] = await networkModel.setDynDnsConfig(value);
+  if (error) {
+    dynDnsIsEnabled.value = !value;
+    return console.error(error);
+  }
+
+  busy.value = false;
+}
 
 onMounted(async () => {
   const [error, result] = await networkModel.getDynDnsConfig();
   if (error) return console.error(error);
 
   dynDnsIsEnabled.value = result.enabled;
+
+  busy.value = false;
 });
 
 </script>
@@ -37,7 +48,7 @@ onMounted(async () => {
     <Section :title="$t('network.dyndns.title')" :padding="false">
       <SettingsItem>
         <p>{{ $t('network.dyndns.description') }}</p>
-        <Switch v-model="dynDnsIsEnabled"/>
+        <Switch v-model="dynDnsIsEnabled" @change="onToggleDynDns" :busy="busy"/>
       </SettingsItem>
     </Section>
   </div>