Improve standalone dashboard initial loading

src/components/standalone/dashboard/InternetConnectionCard.vue

@@ -6,45 +6,94 @@
 <script setup lang="ts">
 import { ubusCall } from '@/lib/standalone/ubus'
 import { NeBadge, NeCard, NeLink, NeTooltip, getAxiosErrorMessage } from '@nethesis/vue-components'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch, type PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { faCheck, faWarning, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { getStandaloneRoutePrefix } from '@/lib/router'
 import { useRoute, useRouter } from 'vue-router'
 
+type ServiceStatus = 'ok' | 'warning' | 'disabled' | 'error' | string
+
+const props = defineProps({
+  initialInternetStatus: {
+    type: String as PropType<ServiceStatus | undefined>,
+    default: undefined
+  },
+  initialDnsConfiguredStatus: {
+    type: String as PropType<ServiceStatus | undefined>,
+    default: undefined
+  },
+  deferInitialLoad: { type: Boolean, default: false }
+})
+
 const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
 
 // random refresh interval between 20 and 30 seconds
 const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
-const internetStatus = ref<any>(null)
-const dnsConfiguredStatus = ref<any>(null)
+const internetStatus = ref<ServiceStatus | null>(null)
+const dnsConfiguredStatus = ref<ServiceStatus | null>(null)
 const statusIntervalId = ref(0)
+const initialized = ref(false)
 
 const loading = ref({
-  getInternetStatus: false,
-  getDnsConfiguredStatus: false
+  getInternetStatus: true,
+  getDnsConfiguredStatus: true
 })
 
 const error = ref({
   title: '',
   description: ''
 })
 
-onMounted(() => {
-  loadData()
+const isWaitingForInitialData = computed(() => props.deferInitialLoad && !initialized.value)
 
-  // periodically reload data
-  statusIntervalId.value = setInterval(loadData, REFRESH_INTERVAL)
+onMounted(() => {
+  if (!props.deferInitialLoad) {
+    initializeData()
+  }
 })
 
+watch(
+  () => props.deferInitialLoad,
+  (deferInitialLoad) => {
+    if (!deferInitialLoad) {
+      initializeData()
+    }
+  }
+)
+
 onUnmounted(() => {
   if (statusIntervalId.value) {
     clearInterval(statusIntervalId.value)
   }
 })
 
+function initializeData() {
+  if (initialized.value) {
+    return
+  }
+
+  initialized.value = true
+
+  if (props.initialInternetStatus !== undefined) {
+    internetStatus.value = props.initialInternetStatus
+    loading.value.getInternetStatus = false
+  } else {
+    fetchInternetStatus()
+  }
+
+  if (props.initialDnsConfiguredStatus !== undefined) {
+    dnsConfiguredStatus.value = props.initialDnsConfiguredStatus
+    loading.value.getDnsConfiguredStatus = false
+  } else {
+    fetchDnsConfiguredStatus()
+  }
+
+  statusIntervalId.value = setInterval(loadData, REFRESH_INTERVAL)
+}
+
 function loadData() {
   fetchInternetStatus()
   fetchDnsConfiguredStatus()
@@ -139,15 +188,17 @@ function goToDns() {
     :title="t('standalone.dashboard.internet_connection')"
     :icon="['fas', 'earth-americas']"
     :skeleton-lines="2"
-    :loading="loading.getInternetStatus || loading.getDnsConfiguredStatus"
+    :loading="
+      loading.getInternetStatus || loading.getDnsConfiguredStatus || isWaitingForInitialData
+    "
     :error-title="error.title"
     :error-description="error.description"
   >
     <div class="space-y-4">
       <NeBadge
-        :kind="getBadgeKind(internetStatus)"
-        :text="getBadgeText(internetStatus)"
-        :icon="getBadgeIcon(internetStatus)"
+        :kind="getBadgeKind(internetStatus ?? 'error')"
+        :text="getBadgeText(internetStatus ?? 'error')"
+        :icon="getBadgeIcon(internetStatus ?? 'error')"
       />
       <NeTooltip v-if="dnsConfiguredStatus === 'warning'" class="block">
         <template #trigger>

src/components/standalone/dashboard/OpenVpnTunnelOrIpsecCard.vue

@@ -6,7 +6,7 @@
 <script setup lang="ts">
 import { ubusCall } from '@/lib/standalone/ubus'
 import { NeCard, NeSkeleton, getAxiosErrorMessage } from '@nethesis/vue-components'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch, type PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 interface TunnelCounters {
@@ -15,7 +15,9 @@ interface TunnelCounters {
 }
 
 const props = defineProps({
-  method: { type: String, required: true }
+  method: { type: String, required: true },
+  initialCounters: { type: Object as PropType<TunnelCounters | undefined>, default: undefined },
+  deferInitialLoad: { type: Boolean, default: false }
 })
 
 const { t } = useI18n()
@@ -24,29 +26,57 @@ const { t } = useI18n()
 const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
 const counters = ref<TunnelCounters>({ enabled: 0, connected: 0 })
 const counterIntervalId = ref(0)
+const initialized = ref(false)
 
 const loading = ref({
-  getCounters: false
+  getCounters: true
 })
 
 const error = ref({
   title: '',
   description: ''
 })
 
-onMounted(() => {
-  getCounters()
+const isWaitingForInitialData = computed(() => props.deferInitialLoad && !initialized.value)
 
-  // periodically reload data
-  counterIntervalId.value = setInterval(getCounters, REFRESH_INTERVAL)
+onMounted(() => {
+  if (!props.deferInitialLoad) {
+    initializeData()
+  }
 })
 
+watch(
+  () => props.deferInitialLoad,
+  (deferInitialLoad) => {
+    if (!deferInitialLoad) {
+      initializeData()
+    }
+  }
+)
+
 onUnmounted(() => {
   if (counterIntervalId.value) {
     clearInterval(counterIntervalId.value)
   }
 })
 
+function initializeData() {
+  if (initialized.value) {
+    return
+  }
+
+  initialized.value = true
+
+  if (props.initialCounters) {
+    counters.value = props.initialCounters
+    loading.value.getCounters = false
+  } else {
+    getCounters()
+  }
+
+  counterIntervalId.value = setInterval(getCounters, REFRESH_INTERVAL)
+}
+
 async function getCounters() {
   // show skeleton only the first time
   if (!counterIntervalId.value) {
@@ -72,7 +102,7 @@ async function getCounters() {
   <NeCard
     :icon="['fas', 'globe']"
     :skeleton-lines="2"
-    :loading="loading.getCounters"
+    :loading="loading.getCounters || isWaitingForInitialData"
     :error-title="error.title"
     :error-description="error.description"
   >

src/components/standalone/dashboard/ServiceCard.vue

@@ -6,7 +6,7 @@
 <script setup lang="ts">
 import { ubusCall } from '@/lib/standalone/ubus'
 import { NeBadge, NeCard, NeSkeleton, getAxiosErrorMessage } from '@nethesis/vue-components'
-import { onMounted, onUnmounted, ref, type PropType } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch, type PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { faCheck, faWarning, faXmark } from '@fortawesome/free-solid-svg-icons'
 
@@ -15,10 +15,15 @@ interface CardCounter {
   label: string
 }
 
+type ServiceStatus = 'ok' | 'warning' | 'disabled' | 'error' | string
+
 const props = defineProps({
   serviceName: { type: String },
   hasStatus: { type: Boolean, default: false },
   counter: { type: Object as PropType<CardCounter>, default: undefined },
+  initialStatus: { type: String as PropType<ServiceStatus | undefined>, default: undefined },
+  initialCounter: { type: Number as PropType<number | undefined>, default: undefined },
+  deferInitialLoad: { type: Boolean, default: false },
   title: {
     type: String
   },
@@ -31,36 +36,38 @@ const { t } = useI18n()
 
 // random refresh interval between 20 and 30 seconds
 const REFRESH_INTERVAL = 20000 + Math.random() * 10 * 1000
-const serviceStatus = ref<any>(null)
-const serviceCounter = ref<any>(null)
+const serviceStatus = ref<ServiceStatus | null>(null)
+const serviceCounter = ref<number | null>(null)
 const statusIntervalId = ref(0)
 const counterIntervalId = ref(0)
+const initialized = ref(false)
 
 const loading = ref({
-  getServiceStatus: false,
-  getServiceCounter: false
+  getServiceStatus: props.hasStatus,
+  getServiceCounter: !!props.counter
 })
 
 const error = ref({
   title: '',
   description: ''
 })
 
-onMounted(() => {
-  if (props.hasStatus) {
-    getServiceStatus()
+const isWaitingForInitialData = computed(() => props.deferInitialLoad && !initialized.value)
 
-    // periodically reload data
-    statusIntervalId.value = setInterval(getServiceStatus, REFRESH_INTERVAL)
+onMounted(() => {
+  if (!props.deferInitialLoad) {
+    initializeData()
   }
+})
 
-  if (props.counter) {
-    getServiceCounter()
-
-    // periodically reload data
-    counterIntervalId.value = setInterval(getServiceCounter, REFRESH_INTERVAL)
+watch(
+  () => props.deferInitialLoad,
+  (deferInitialLoad) => {
+    if (!deferInitialLoad) {
+      initializeData()
+    }
   }
-})
+)
 
 onUnmounted(() => {
   if (statusIntervalId.value) {
@@ -72,6 +79,34 @@ onUnmounted(() => {
   }
 })
 
+function initializeData() {
+  if (initialized.value) {
+    return
+  }
+
+  initialized.value = true
+
+  if (props.hasStatus) {
+    if (props.initialStatus !== undefined) {
+      serviceStatus.value = props.initialStatus
+      loading.value.getServiceStatus = false
+    } else {
+      getServiceStatus()
+    }
+    statusIntervalId.value = setInterval(getServiceStatus, REFRESH_INTERVAL)
+  }
+
+  if (props.counter) {
+    if (props.initialCounter !== undefined) {
+      serviceCounter.value = props.initialCounter
+      loading.value.getServiceCounter = false
+    } else {
+      getServiceCounter()
+    }
+    counterIntervalId.value = setInterval(getServiceCounter, REFRESH_INTERVAL)
+  }
+}
+
 async function getServiceStatus() {
   // show skeleton only the first time
   if (!statusIntervalId.value) {
@@ -157,7 +192,7 @@ function getBadgeIcon(status: string) {
     :title="title"
     :icon="icon"
     :skeleton-lines="2"
-    :loading="loading.getServiceStatus || loading.getServiceCounter"
+    :loading="loading.getServiceStatus || loading.getServiceCounter || isWaitingForInitialData"
     :error-title="error.title"
     :error-description="error.description"
   >
@@ -168,9 +203,9 @@ function getBadgeIcon(status: string) {
     <div class="space-y-3">
       <NeBadge
         v-if="hasStatus"
-        :kind="getBadgeKind(serviceStatus)"
-        :text="getBadgeText(serviceStatus)"
-        :icon="getBadgeIcon(serviceStatus)"
+        :kind="getBadgeKind(serviceStatus ?? 'error')"
+        :text="getBadgeText(serviceStatus ?? 'error')"
+        :icon="getBadgeIcon(serviceStatus ?? 'error')"
       />
       <template v-if="counter">
         <NeSkeleton v-if="loading.getServiceCounter" :lines="1" class="w-14"></NeSkeleton>