Correctly set busy state when toggling dyndns feature

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>