From b3ffa4acfd451be0c028c1504ec049d38de0d519 Mon Sep 17 00:00:00 2001
From: Filippo Carletti <filippo.carletti@gmail.com>
Date: Sat, 20 Jun 2026 10:53:53 +0200
Subject: [PATCH] fix(dashboard): reduce standalone initial load fan-out

Load the first standalone dashboard state from a shared summary payload
so the page stops bootstrapping each ns.dashboard card independently on
first render.
---
 .../dashboard/InternetConnectionCard.vue      |  77 +++++++++--
 .../dashboard/OpenVpnTunnelOrIpsecCard.vue    |  46 +++++--
 .../standalone/dashboard/ServiceCard.vue      |  75 ++++++++---
 .../standalone/dashboard/SystemInfoCard.vue   | 121 ++++++++++++------
 .../dashboard/ThreatShieldIpCard.vue          | 100 +++++++++++----
 .../__tests__/dashboardSummary.spec.ts        |  49 +++++++
 src/lib/standalone/dashboardSummary.ts        |  42 ++++++
 .../standalone/StandaloneDashboardView.vue    | 116 +++++++++++++++--
 8 files changed, 513 insertions(+), 113 deletions(-)
 create mode 100644 src/lib/standalone/__tests__/dashboardSummary.spec.ts
 create mode 100644 src/lib/standalone/dashboardSummary.ts

diff --git a/src/components/standalone/dashboard/InternetConnectionCard.vue b/src/components/standalone/dashboard/InternetConnectionCard.vue
index 483e7ba9b..8e202bc41 100644
--- a/src/components/standalone/dashboard/InternetConnectionCard.vue
+++ b/src/components/standalone/dashboard/InternetConnectionCard.vue
@@ -6,25 +6,40 @@
 <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({
@@ -32,19 +47,53 @@ const error = ref({
   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>
diff --git a/src/components/standalone/dashboard/OpenVpnTunnelOrIpsecCard.vue b/src/components/standalone/dashboard/OpenVpnTunnelOrIpsecCard.vue
index 5943670f5..cf63a422c 100644
--- a/src/components/standalone/dashboard/OpenVpnTunnelOrIpsecCard.vue
+++ b/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,9 +26,10 @@ 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({
@@ -34,19 +37,46 @@ const error = ref({
   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"
   >
diff --git a/src/components/standalone/dashboard/ServiceCard.vue b/src/components/standalone/dashboard/ServiceCard.vue
index 84345fa06..ae14284c8 100644
--- a/src/components/standalone/dashboard/ServiceCard.vue
+++ b/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,14 +36,15 @@ 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({
@@ -46,21 +52,22 @@ const error = ref({
   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>
diff --git a/src/components/standalone/dashboard/SystemInfoCard.vue b/src/components/standalone/dashboard/SystemInfoCard.vue
index c94965d67..95593e403 100644
--- a/src/components/standalone/dashboard/SystemInfoCard.vue
+++ b/src/components/standalone/dashboard/SystemInfoCard.vue
@@ -15,7 +15,7 @@ import {
   byteFormat1024,
   NeSpinner
 } from '@nethesis/vue-components'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch, type PropType } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { round } from 'lodash-es'
@@ -23,6 +23,14 @@ import { getStandaloneRoutePrefix } from '@/lib/router'
 import { useRouter } from 'vue-router'
 import type { SystemUpdate } from '@/views/standalone/system/UpdateView.vue'
 
+const props = defineProps({
+  initialSystemInfo: {
+    type: Object as PropType<Record<string, any> | undefined>,
+    default: undefined
+  },
+  deferInitialLoad: { type: Boolean, default: false }
+})
+
 const { t } = useI18n()
 const router = useRouter()
 
@@ -47,6 +55,7 @@ const tmpfsUsagePerc = ref(0)
 const freeDataStorage = ref(0)
 const totalDataStorage = ref(0)
 const dataStorageUsagePerc = ref(0)
+const initialized = ref(false)
 
 const loading = ref({
   getSystemInfo: true,
@@ -58,6 +67,8 @@ const error = ref({
   description: ''
 })
 
+const isWaitingForInitialData = computed(() => props.deferInitialLoad && !initialized.value)
+
 const isUpdateAvailable = computed(
   () =>
     systemUpdateData.value?.lastVersion &&
@@ -69,18 +80,44 @@ const isUpdateScheduled = computed(
 )
 
 onMounted(() => {
-  loadData()
-
-  // periodically reload system info
-  loadDataIntervalId.value = setInterval(loadData, REFRESH_INTERVAL)
+  if (!props.deferInitialLoad) {
+    initializeData()
+  }
 })
 
+watch(
+  () => props.deferInitialLoad,
+  (deferInitialLoad) => {
+    if (!deferInitialLoad) {
+      initializeData()
+    }
+  }
+)
+
 onUnmounted(() => {
   if (loadDataIntervalId.value) {
     clearInterval(loadDataIntervalId.value)
   }
 })
 
+function initializeData() {
+  if (initialized.value) {
+    return
+  }
+
+  initialized.value = true
+
+  if (props.initialSystemInfo) {
+    applySystemInfo(props.initialSystemInfo)
+    loading.value.getSystemInfo = false
+  } else {
+    getSystemInfo()
+  }
+
+  getUpdatesStatus()
+  loadDataIntervalId.value = setInterval(loadData, REFRESH_INTERVAL)
+}
+
 function loadData() {
   error.value.title = ''
   error.value.description = ''
@@ -88,43 +125,47 @@ function loadData() {
   getUpdatesStatus()
 }
 
+function applySystemInfo(data: Record<string, any>) {
+  systemInfo.value = data
+
+  // Support both old format (available_bytes, used_bytes) and new format (mem_total, mem_available)
+  // Introduced by https://github.com/NethServer/nethsecurity/pull/1569, can be removed after the next release since controllers should be updated
+  if (
+    systemInfo.value.memory.mem_total != undefined &&
+    systemInfo.value.memory.mem_available != undefined
+  ) {
+    // New format
+    totalMemory.value = systemInfo.value.memory.mem_total
+    freeMemory.value = systemInfo.value.memory.mem_available
+  } else {
+    // Old format
+    freeMemory.value = systemInfo.value.memory.available_bytes
+    const usedMemory = systemInfo.value.memory.used_bytes
+    totalMemory.value = usedMemory + freeMemory.value
+  }
+  const usedMemory = totalMemory.value - freeMemory.value
+  memoryUsagePerc.value = round((usedMemory / totalMemory.value) * 100)
+
+  freeRoot.value = systemInfo.value.storage['/'].available_bytes
+  const usedRoot = systemInfo.value.storage['/'].used_bytes
+  totalRoot.value = usedRoot + freeRoot.value
+  rootUsagePerc.value = round((usedRoot / totalRoot.value) * 100)
+
+  freeTmpfs.value = systemInfo.value.storage['tmpfs'].available_bytes
+  const usedTmpfs = systemInfo.value.storage['tmpfs'].used_bytes
+  totalTmpfs.value = usedTmpfs + freeTmpfs.value
+  tmpfsUsagePerc.value = round((usedTmpfs / totalTmpfs.value) * 100)
+
+  freeDataStorage.value = systemInfo.value.storage['/mnt/data'].available_bytes
+  const usedDataStorage = systemInfo.value.storage['/mnt/data'].used_bytes
+  totalDataStorage.value = usedDataStorage + freeDataStorage.value
+  dataStorageUsagePerc.value = round((usedDataStorage / totalDataStorage.value) * 100)
+}
+
 async function getSystemInfo() {
   try {
     const res = await ubusCall('ns.dashboard', 'system-info')
-    systemInfo.value = res.data.result
-
-    // Support both old format (available_bytes, used_bytes) and new format (mem_total, mem_available)
-    // Introduced by https://github.com/NethServer/nethsecurity/pull/1569, can be removed after the next release since controllers should be updated
-    if (
-      systemInfo.value.memory.mem_total != undefined &&
-      systemInfo.value.memory.mem_available != undefined
-    ) {
-      // New format
-      totalMemory.value = systemInfo.value.memory.mem_total
-      freeMemory.value = systemInfo.value.memory.mem_available
-    } else {
-      // Old format
-      freeMemory.value = systemInfo.value.memory.available_bytes
-      const usedMemory = systemInfo.value.memory.used_bytes
-      totalMemory.value = usedMemory + freeMemory.value
-    }
-    const usedMemory = totalMemory.value - freeMemory.value
-    memoryUsagePerc.value = round((usedMemory / totalMemory.value) * 100)
-
-    freeRoot.value = systemInfo.value.storage['/'].available_bytes
-    const usedRoot = systemInfo.value.storage['/'].used_bytes
-    totalRoot.value = usedRoot + freeRoot.value
-    rootUsagePerc.value = round((usedRoot / totalRoot.value) * 100)
-
-    freeTmpfs.value = systemInfo.value.storage['tmpfs'].available_bytes
-    const usedTmpfs = systemInfo.value.storage['tmpfs'].used_bytes
-    totalTmpfs.value = usedTmpfs + freeTmpfs.value
-    tmpfsUsagePerc.value = round((usedTmpfs / totalTmpfs.value) * 100)
-
-    freeDataStorage.value = systemInfo.value.storage['/mnt/data'].available_bytes
-    const usedDataStorage = systemInfo.value.storage['/mnt/data'].used_bytes
-    totalDataStorage.value = usedDataStorage + freeDataStorage.value
-    dataStorageUsagePerc.value = round((usedDataStorage / totalDataStorage.value) * 100)
+    applySystemInfo(res.data.result)
   } catch (err: any) {
     console.error(err)
     error.value.title = t('error.cannot_retrieve_system_info')
@@ -166,7 +207,7 @@ async function getUpdatesStatus() {
   <NeCard
     :title="t('standalone.dashboard.system')"
     :skeleton-lines="5"
-    :loading="loading.getSystemInfo"
+    :loading="loading.getSystemInfo || isWaitingForInitialData"
     :error-title="error.title"
     :error-description="error.description"
   >
diff --git a/src/components/standalone/dashboard/ThreatShieldIpCard.vue b/src/components/standalone/dashboard/ThreatShieldIpCard.vue
index e3059d63c..6b590d3de 100644
--- a/src/components/standalone/dashboard/ThreatShieldIpCard.vue
+++ b/src/components/standalone/dashboard/ThreatShieldIpCard.vue
@@ -13,27 +13,37 @@ import {
   NeTooltip,
   getAxiosErrorMessage
 } from '@nethesis/vue-components'
-import { computed, 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 router from '@/router'
 import { getStandaloneRoutePrefix } from '@/lib/router'
 import { useRoute } from 'vue-router'
 
+type ServiceStatus = 'ok' | 'warning' | 'disabled' | 'error' | string
+
+const props = defineProps({
+  initialStatus: { type: String as PropType<ServiceStatus | undefined>, default: undefined },
+  initialCounter: { type: Number as PropType<number | undefined>, default: undefined },
+  initialMonitoringDisabled: { type: Boolean as PropType<boolean | undefined>, default: undefined },
+  deferInitialLoad: { type: Boolean, default: false }
+})
+
 const { t } = useI18n()
 const route = useRoute()
 
 // 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 threatShieldConfig = ref<any>(null)
+const serviceStatus = ref<ServiceStatus | null>(null)
+const serviceCounter = ref<number | null>(null)
+const monitoringDisabled = ref(false)
 const intervalId = ref(0)
+const initialized = ref(false)
 
 const loading = ref({
-  getServiceStatus: false,
-  getServiceCounter: false,
-  getThreatShieldConfig: false
+  getServiceStatus: true,
+  getServiceCounter: true,
+  getThreatShieldConfig: true
 })
 
 const error = ref({
@@ -41,28 +51,61 @@ const error = ref({
   description: ''
 })
 
-const isLoggingDisabled = computed(() => {
-  return (
-    !threatShieldConfig.value?.ban_logforwardlan &&
-    !threatShieldConfig.value?.ban_logforwardwan &&
-    !threatShieldConfig.value?.ban_loginput &&
-    !threatShieldConfig.value?.ban_logprerouting
-  )
-})
+const isLoggingDisabled = computed(() => monitoringDisabled.value)
+const isWaitingForInitialData = computed(() => props.deferInitialLoad && !initialized.value)
 
 onMounted(() => {
-  loadData()
-
-  // periodically reload data
-  intervalId.value = setInterval(loadData, REFRESH_INTERVAL)
+  if (!props.deferInitialLoad) {
+    initializeData()
+  }
 })
 
+watch(
+  () => props.deferInitialLoad,
+  (deferInitialLoad) => {
+    if (!deferInitialLoad) {
+      initializeData()
+    }
+  }
+)
+
 onUnmounted(() => {
   if (intervalId.value) {
     clearInterval(intervalId.value)
   }
 })
 
+function initializeData() {
+  if (initialized.value) {
+    return
+  }
+
+  initialized.value = true
+
+  if (props.initialStatus !== undefined) {
+    serviceStatus.value = props.initialStatus
+    loading.value.getServiceStatus = false
+  } else {
+    getServiceStatus()
+  }
+
+  if (props.initialCounter !== undefined) {
+    serviceCounter.value = props.initialCounter
+    loading.value.getServiceCounter = false
+  } else {
+    getServiceCounter()
+  }
+
+  if (props.initialMonitoringDisabled !== undefined) {
+    monitoringDisabled.value = props.initialMonitoringDisabled
+    loading.value.getThreatShieldConfig = false
+  } else {
+    getThreatShieldConfig()
+  }
+
+  intervalId.value = setInterval(loadData, REFRESH_INTERVAL)
+}
+
 function loadData() {
   getServiceStatus()
   getServiceCounter()
@@ -113,7 +156,11 @@ async function getThreatShieldConfig() {
   try {
     loading.value.getThreatShieldConfig = true
     const res = await ubusCall('ns.threatshield', 'list-settings')
-    threatShieldConfig.value = res.data.data
+    monitoringDisabled.value =
+      !res.data.data.ban_logforwardlan &&
+      !res.data.data.ban_logforwardwan &&
+      !res.data.data.ban_loginput &&
+      !res.data.data.ban_logprerouting
   } catch (err: any) {
     console.error(err)
     error.value.title = t('error.cannot_retrieve_threat_shield_settings')
@@ -171,7 +218,12 @@ function goTo(path: string) {
   <NeCard
     :icon="['fas', 'shield']"
     :skeleton-lines="2"
-    :loading="loading.getServiceStatus || loading.getServiceCounter"
+    :loading="
+      loading.getServiceStatus ||
+      loading.getServiceCounter ||
+      loading.getThreatShieldConfig ||
+      isWaitingForInitialData
+    "
     :error-title="error.title"
     :error-description="error.description"
   >
@@ -184,9 +236,9 @@ function goTo(path: string) {
     <div class="space-y-3">
       <!-- status -->
       <NeBadge
-        :kind="getBadgeKind(serviceStatus)"
-        :text="getBadgeText(serviceStatus)"
-        :icon="getBadgeIcon(serviceStatus)"
+        :kind="getBadgeKind(serviceStatus ?? 'error')"
+        :text="getBadgeText(serviceStatus ?? 'error')"
+        :icon="getBadgeIcon(serviceStatus ?? 'error')"
       />
       <!-- monitoring disabled warning -->
       <NeTooltip v-if="isLoggingDisabled" class="inline-block">
diff --git a/src/lib/standalone/__tests__/dashboardSummary.spec.ts b/src/lib/standalone/__tests__/dashboardSummary.spec.ts
new file mode 100644
index 000000000..ecca7e2c5
--- /dev/null
+++ b/src/lib/standalone/__tests__/dashboardSummary.spec.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+  fetchDashboardSummary,
+  getServiceCardInitialData,
+  isThreatShieldMonitoringDisabled,
+  type DashboardSummary
+} from '@/lib/standalone/dashboardSummary'
+
+describe('dashboardSummary', () => {
+  it('fetches the aggregated dashboard summary with one ubus call', async () => {
+    const ubusCall = vi.fn().mockResolvedValue({
+      data: {
+        result: {
+          systemInfo: { hostname: 'fw' },
+          serviceStatus: {},
+          counters: {},
+          tunnels: {
+            ipsec: { enabled: 0, connected: 0 },
+            ovpn: { enabled: 0, connected: 0 }
+          },
+          threatShield: { monitoringEnabled: false }
+        }
+      }
+    })
+
+    const summary = await fetchDashboardSummary(ubusCall)
+
+    expect(ubusCall).toHaveBeenCalledWith('ns.dashboard', 'summary')
+    expect(summary.systemInfo.hostname).toBe('fw')
+  })
+
+  it('extracts service-card initial data from the summary', () => {
+    const summary: DashboardSummary = {
+      systemInfo: { hostname: 'fw' },
+      serviceStatus: { mwan: 'ok' },
+      counters: { hosts: 23 },
+      tunnels: {
+        ipsec: { enabled: 1, connected: 0 },
+        ovpn: { enabled: 2, connected: 1 }
+      },
+      threatShield: { monitoringEnabled: false }
+    }
+
+    expect(getServiceCardInitialData(summary, 'mwan')).toEqual({ status: 'ok' })
+    expect(getServiceCardInitialData(summary, 'hosts')).toEqual({ count: 23 })
+    expect(getServiceCardInitialData(summary, 'openvpn_rw')).toEqual({})
+    expect(isThreatShieldMonitoringDisabled(summary)).toBe(true)
+  })
+})
diff --git a/src/lib/standalone/dashboardSummary.ts b/src/lib/standalone/dashboardSummary.ts
new file mode 100644
index 000000000..02c6d3dec
--- /dev/null
+++ b/src/lib/standalone/dashboardSummary.ts
@@ -0,0 +1,42 @@
+import { ubusCall } from './ubus'
+
+type DashboardStatus = string
+
+export interface TunnelSummary {
+  enabled: number
+  connected: number
+}
+
+export interface DashboardSummary {
+  systemInfo: Record<string, unknown>
+  serviceStatus: Record<string, DashboardStatus>
+  counters: Record<string, number>
+  tunnels: {
+    ipsec: TunnelSummary
+    ovpn: TunnelSummary
+  }
+  threatShield: {
+    monitoringEnabled: boolean
+  }
+}
+
+type UbusCaller = typeof ubusCall
+
+export async function fetchDashboardSummary(callUbus: UbusCaller = ubusCall) {
+  const response = await callUbus<{ data: { result: DashboardSummary } }>('ns.dashboard', 'summary')
+  return response.data.result
+}
+
+export function getServiceCardInitialData(summary: DashboardSummary, serviceName: string) {
+  const status = summary.serviceStatus[serviceName]
+  const count = summary.counters[serviceName]
+
+  return {
+    ...(status !== undefined ? { status } : {}),
+    ...(count !== undefined ? { count } : {})
+  }
+}
+
+export function isThreatShieldMonitoringDisabled(summary: DashboardSummary) {
+  return !summary.threatShield.monitoringEnabled
+}
diff --git a/src/views/standalone/StandaloneDashboardView.vue b/src/views/standalone/StandaloneDashboardView.vue
index 231ca388c..98ccdf35b 100644
--- a/src/views/standalone/StandaloneDashboardView.vue
+++ b/src/views/standalone/StandaloneDashboardView.vue
@@ -5,6 +5,7 @@
 
 <script setup lang="ts">
 import { NeLink, NeHeading } from '@nethesis/vue-components'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import SystemInfoCard from '@/components/standalone/dashboard/SystemInfoCard.vue'
 import ServiceCard from '@/components/standalone/dashboard/ServiceCard.vue'
@@ -19,9 +20,60 @@ import MacBindingStatusCard from '@/components/standalone/dashboard/MacBindingSt
 import BackupStatusCard from '@/components/standalone/dashboard/BackupStatusCard.vue'
 import HaStatusCard from '@/components/standalone/dashboard/HaStatusCard.vue'
 import WireguardCard from '@/components/standalone/dashboard/WireguardCard.vue'
+import {
+  fetchDashboardSummary,
+  getServiceCardInitialData,
+  isThreatShieldMonitoringDisabled,
+  type DashboardSummary
+} from '@/lib/standalone/dashboardSummary'
 
 const { t } = useI18n()
 const route = useRoute()
+const dashboardSummary = ref<DashboardSummary>()
+const isLoadingDashboardSummary = ref(true)
+
+const emptySummary: DashboardSummary = {
+  systemInfo: {},
+  serviceStatus: {},
+  counters: {},
+  tunnels: {
+    ipsec: { enabled: 0, connected: 0 },
+    ovpn: { enabled: 0, connected: 0 }
+  },
+  threatShield: { monitoringEnabled: true }
+}
+
+const serviceCardInitialData = computed(() => ({
+  internet: getServiceCardInitialData(dashboardSummary.value ?? emptySummary, 'internet'),
+  dnsConfigured: getServiceCardInitialData(
+    dashboardSummary.value ?? emptySummary,
+    'dns-configured'
+  ),
+  mwan: getServiceCardInitialData(dashboardSummary.value ?? emptySummary, 'mwan'),
+  banip: getServiceCardInitialData(dashboardSummary.value ?? emptySummary, 'banip'),
+  netifyd: getServiceCardInitialData(dashboardSummary.value ?? emptySummary, 'netifyd'),
+  openvpnRw: getServiceCardInitialData(dashboardSummary.value ?? emptySummary, 'openvpn_rw'),
+  threatShieldDns: getServiceCardInitialData(
+    dashboardSummary.value ?? emptySummary,
+    'threat_shield_dns'
+  ),
+  dedalo: getServiceCardInitialData(dashboardSummary.value ?? emptySummary, 'dedalo'),
+  hosts: getServiceCardInitialData(dashboardSummary.value ?? emptySummary, 'hosts'),
+  threatShieldIp: getServiceCardInitialData(
+    dashboardSummary.value ?? emptySummary,
+    'threat_shield_ip'
+  )
+}))
+
+onMounted(async () => {
+  try {
+    dashboardSummary.value = await fetchDashboardSummary()
+  } catch (error) {
+    console.error(error)
+  } finally {
+    isLoadingDashboardSummary.value = false
+  }
+})
 
 function goTo(path: string) {
   router.push(`${getStandaloneRoutePrefix(route)}${path}`)
@@ -38,11 +90,25 @@ function goTo(path: string) {
 
   <div class="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2 xl:grid-cols-4 3xl:grid-cols-6">
     <!-- system -->
-    <SystemInfoCard class="sm:col-span-2 xl:row-span-3" />
+    <SystemInfoCard
+      class="sm:col-span-2 xl:row-span-3"
+      :initial-system-info="dashboardSummary?.systemInfo"
+      :defer-initial-load="isLoadingDashboardSummary"
+    />
     <!-- internet connection -->
-    <InternetConnectionCard />
+    <InternetConnectionCard
+      :initial-internet-status="serviceCardInitialData.internet.status"
+      :initial-dns-configured-status="serviceCardInitialData.dnsConfigured.status"
+      :defer-initial-load="isLoadingDashboardSummary"
+    />
     <!-- multiwan -->
-    <ServiceCard service-name="mwan" has-status :icon="['fas', 'earth-americas']">
+    <ServiceCard
+      service-name="mwan"
+      has-status
+      :icon="['fas', 'earth-americas']"
+      :initial-status="serviceCardInitialData.mwan.status"
+      :defer-initial-load="isLoadingDashboardSummary"
+    >
       <template #title>
         <NeLink @click="goTo('/network/multi-wan')">
           {{ t('standalone.dashboard.multiwan') }}
@@ -55,6 +121,8 @@ function goTo(path: string) {
       has-status
       :title="t('standalone.dashboard.dpi_core')"
       :icon="['fas', 'bolt']"
+      :initial-status="serviceCardInitialData.netifyd.status"
+      :defer-initial-load="isLoadingDashboardSummary"
     />
     <!-- openvpn rw -->
     <ServiceCard
@@ -65,6 +133,9 @@ function goTo(path: string) {
         label: t('standalone.dashboard.clients_connected')
       }"
       :icon="['fas', 'globe']"
+      :initial-status="serviceCardInitialData.openvpnRw.status"
+      :initial-counter="serviceCardInitialData.openvpnRw.count"
+      :defer-initial-load="isLoadingDashboardSummary"
     >
       <template #title>
         <NeLink @click="goTo('/vpn/openvpn-rw')">
@@ -73,7 +144,11 @@ function goTo(path: string) {
       </template>
     </ServiceCard>
     <!-- ipsec tunnels -->
-    <OpenVpnTunnelOrIpsecCard method="ipsec-tunnels">
+    <OpenVpnTunnelOrIpsecCard
+      method="ipsec-tunnels"
+      :initial-counters="dashboardSummary?.tunnels.ipsec"
+      :defer-initial-load="isLoadingDashboardSummary"
+    >
       <template #title>
         <NeLink @click="goTo('/vpn/ipsec-tunnel')">
           {{ t('standalone.ipsec_tunnel.title') }}
@@ -81,7 +156,11 @@ function goTo(path: string) {
       </template>
     </OpenVpnTunnelOrIpsecCard>
     <!-- ovpn tunnels -->
-    <OpenVpnTunnelOrIpsecCard method="ovpn-tunnels">
+    <OpenVpnTunnelOrIpsecCard
+      method="ovpn-tunnels"
+      :initial-counters="dashboardSummary?.tunnels.ovpn"
+      :defer-initial-load="isLoadingDashboardSummary"
+    >
       <template #title>
         <NeLink @click="goTo('/vpn/openvpn-tunnel')">
           {{ t('standalone.openvpn_tunnel.title') }}
@@ -97,13 +176,26 @@ function goTo(path: string) {
       </template>
     </WireguardCard>
     <!-- threat shield IP / banIP -->
-    <ThreatShieldIpCard />
+    <ThreatShieldIpCard
+      :initial-status="serviceCardInitialData.banip.status"
+      :initial-counter="serviceCardInitialData.threatShieldIp.count"
+      :initial-monitoring-disabled="
+        dashboardSummary ? isThreatShieldMonitoringDisabled(dashboardSummary) : undefined
+      "
+      :defer-initial-load="isLoadingDashboardSummary"
+    />
     <!-- MAC binding -->
     <MacBindingStatusCard />
     <!-- IPS -->
     <IpsServiceCard />
     <!-- threat shield dns -->
-    <ServiceCard service-name="threat_shield_dns" has-status :icon="['fas', 'shield']">
+    <ServiceCard
+      service-name="threat_shield_dns"
+      has-status
+      :icon="['fas', 'shield']"
+      :initial-status="serviceCardInitialData.threatShieldDns.status"
+      :defer-initial-load="isLoadingDashboardSummary"
+    >
       <template #title>
         <NeLink @click="goTo('/security/threat-shield-dns')">
           {{ t('standalone.threat_shield_dns.title') }}
@@ -111,7 +203,13 @@ function goTo(path: string) {
       </template>
     </ServiceCard>
     <!-- hotspot -->
-    <ServiceCard service-name="dedalo" has-status :icon="['fas', 'wifi']">
+    <ServiceCard
+      service-name="dedalo"
+      has-status
+      :icon="['fas', 'wifi']"
+      :initial-status="serviceCardInitialData.dedalo.status"
+      :defer-initial-load="isLoadingDashboardSummary"
+    >
       <template #title>
         <NeLink @click="goTo('/network/hotspot')">
           {{ t('standalone.dashboard.hotspot') }}
@@ -127,6 +225,8 @@ function goTo(path: string) {
       }"
       :title="t('standalone.dashboard.known_hosts')"
       :icon="['fas', 'circle-info']"
+      :initial-counter="serviceCardInitialData.hosts.count"
+      :defer-initial-load="isLoadingDashboardSummary"
     />
     <BackupStatusCard />
     <HaStatusCard />