Show save indicator for language and timezone submission

dashboard/src/components/SaveIndicator.vue

@@ -0,0 +1,57 @@
+<script setup>
+
+import { ref } from 'vue';
+import { Icon } from '@cloudron/pankow';
+
+const visible = ref(false);
+let timeoutId;
+
+defineExpose({
+  success() {
+    clearTimeout(timeoutId);
+
+    visible.value = true;
+
+    timeoutId = setTimeout(() => {
+      visible.value = false;
+    }, 3000);
+  }
+});
+
+</script>
+
+<template>
+  <Transition name="bounce">
+    <div class="save-indicator" v-if="visible"><Icon icon="fa-solid fa-check"/></div>
+  </Transition>
+</template>
+
+<style scoped>
+
+.save-indicator {
+  position: absolute;
+  right: -10px;
+  color: var(--pankow-color-success);
+}
+
+.bounce-enter-active {
+  animation: bounce-in 0.5s;
+}
+
+.bounce-leave-active {
+  animation: bounce-in 0.5s reverse;
+}
+
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.5);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+</style>

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>