From 987d0ed12c5b86262a7ab2c092abe46e17c50e1c Mon Sep 17 00:00:00 2001
From: Rocky <adorack@users.noreply.github.com>
Date: Fri, 2 Aug 2024 08:54:18 -0400
Subject: [PATCH] fix(analytics): only show metric cards if apps are present
 [MA-3030] (#543)

---
 src/views/MyApps.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/views/MyApps.vue b/src/views/MyApps.vue
index c3e4875c..065f53af 100644
--- a/src/views/MyApps.vue
+++ b/src/views/MyApps.vue
@@ -39,7 +39,10 @@
       class="no-auth-strategies-warning"
       data-testid="no-auth-strategies-warning"
     />
-    <AnalyticsConfigCheck require-analytics>
+    <AnalyticsConfigCheck
+      v-if="!myAppsReady || appsArePresent"
+      require-analytics
+    >
       <div>
         <MetricsProvider
           v-slot="{ timeframe }"
@@ -268,7 +271,7 @@ export default defineComponent({
     }
 
     const modalTitle = computed(() => `Delete ${deleteItem.value?.name}`)
-    const appIds = ref([])
+    const appIds = ref<string[] | null>(null)
 
     const { state: currentState, send } = useMachine(createMachine({
       predictableActionArguments: true,
@@ -375,10 +378,14 @@ export default defineComponent({
       return helpTextVitals.summary
     }
 
-    const myAppsReady = computed(() => Boolean(appIds.value && appIds.value?.length))
+    // Show the metric cards if applications are loading or if applications have loaded and exist.
+    // If we try to show metric cards when there aren't any applications, they won't be able to
+    // issue a query and will just show an endless skeleton loader.
+    const myAppsReady = computed(() => appIds.value !== null)
+    const appsArePresent = computed(() => !!appIds.value?.length)
 
     const metricProviderProps = computed(() => ({
-      queryReady: myAppsReady.value,
+      queryReady: appsArePresent.value,
       additionalFilter: [
         {
           type: EXPLORE_V2_FILTER_TYPES.IN,
@@ -431,7 +438,9 @@ export default defineComponent({
       helpText,
       helpTextVitals,
       analyticsCardTitle,
-      metricProviderProps
+      metricProviderProps,
+      myAppsReady,
+      appsArePresent
     }
   }
 })