webapp: Added loading animation for ntp admin

webapp/src/components/NtpAdminView.vue

@@ -6,6 +6,14 @@
         <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
             {{ alertMessage }}
         </BootstrapAlert>
+
+        <div class="text-center" v-if="dataLoading || timezoneLoading">
+            <div class="spinner-border" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </div>
+
+        <template v-if="!dataLoading && !timezoneLoading">
             <form @submit="saveNtpConfig">
                 <div class="card">
                     <div class="card-header text-white bg-primary">NTP Configuration</div>
@@ -41,6 +49,7 @@
                 </div>
                 <button type="submit" class="btn btn-primary mb-3">Save</button>
             </form>
+        </template>
     </div>
 </template>
 
@@ -54,6 +63,8 @@ export default defineComponent({
     },
     data() {
         return {
+            dataLoading: true,
+            timezoneLoading: true,
             ntpConfigList: {
                 ntp_server: "",
                 ntp_timezone: "",
@@ -78,11 +89,16 @@ export default defineComponent({
     },
     methods: {
         getTimezoneList() {
+            this.timezoneLoading = true;
             fetch("/zones.json")
                 .then((response) => response.json())
-                .then((data) => (this.timezoneList = data));
+                .then((data) => {
+                    this.timezoneList = data;
+                    this.timezoneLoading = false;
+                });
         },
         getNtpConfig() {
+            this.dataLoading = true;
             fetch("/api/ntp/config")
                 .then((response) => response.json())
                 .then(
@@ -92,6 +108,7 @@ export default defineComponent({
                             this.ntpConfigList.ntp_timezone_descr +
                             "---" +
                             this.ntpConfigList.ntp_timezone;
+                        this.dataLoading = false;
                     }
                 );
         },