Show save indicator for language and timezone submission

dashboard/src/views/SystemSettingsView.vue

@@ -1,14 +1,11 @@
 <script setup>
 
-import { useI18n } from 'vue-i18n';
-const i18n = useI18n();
-const t = i18n.t;
-
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, useTemplateRef } from 'vue';
 import { SingleSelect } from '@cloudron/pankow';
 import { setLanguage } from '../i18n.js';
 import moment from 'moment-timezone';
 import SettingsItem from '../components/SettingsItem.vue';
+import SaveIndicator from '../components/SaveIndicator.vue';
 import Section from '../components/Section.vue';
 import CloudronModel from '../models/CloudronModel.js';
 import DashboardModel from '../models/DashboardModel.js';
@@ -25,18 +22,22 @@ const info = ref({});
 const allTimezones = moment.tz.names().map(t => { return { id: t }; });
 const timeZone = ref('');
 const currentTimeZone = ref('');
+const timezoneSaveIndicator = useTemplateRef('timezoneSaveIndicator');
 
 async function onTimeZoneChange(value) {
   const [error] = await cloudronModel.setTimeZone(value);
   if (error) return console.error(error);
 
   currentTimeZone.value = value;
+
+  timezoneSaveIndicator.value.success();
 }
 
 // Language
 const allLanguages = ref([]);
 const language = ref('');
 const currentLanguage = ref('');
+const languageSaveIndicator = useTemplateRef('languageSaveIndicator');
 
 async function onLanguageChange(value) {
   const [error] = await cloudronModel.setLanguage(value);
@@ -45,6 +46,8 @@ async function onLanguageChange(value) {
   currentLanguage.value = value;
 
   await setLanguage(value, false);
+
+  languageSaveIndicator.value.success();
 }
 
 onMounted(async () => {
@@ -98,6 +101,7 @@ onMounted(async () => {
         </div>
         <div style="display: flex; gap: 6px; align-items: center;">
           <SingleSelect style="min-width: 160px" v-model="timeZone" :searchThreshold="10" :options="allTimezones" option-key="id" option-label="id" @select="onTimeZoneChange" />
+          <SaveIndicator ref="timezoneSaveIndicator"/>
         </div>
       </SettingsItem>
 
@@ -108,6 +112,7 @@ onMounted(async () => {
         </div>
         <div style="display: flex; gap: 6px; align-items: center;">
           <SingleSelect v-model="language" :options="allLanguages" option-key="id" option-label="display" @select="onLanguageChange" />
+          <SaveIndicator ref="languageSaveIndicator"/>
         </div>
       </SettingsItem>
     </Section>