1 files changed, 13 insertions, 13 deletions
diff --git a/app/assets/javascripts/observability/components/observability_app.vue b/app/assets/javascripts/observability/components/observability_app.vue
index 33d23ea043b..ff9cf6ff6c5 100644
--- a/app/assets/javascripts/observability/components/observability_app.vue
+++ b/app/assets/javascripts/observability/components/observability_app.vue
@@ -2,7 +2,7 @@
 import { darkModeEnabled } from '~/lib/utils/color_utils';
 import { setUrlParams } from '~/lib/utils/url_utility';
 
-import { MESSAGE_EVENT_TYPE, OBSERVABILITY_ROUTES, SKELETON_VARIANT } from '../constants';
+import { MESSAGE_EVENT_TYPE, SKELETON_VARIANTS_BY_ROUTE } from '../constants';
 import ObservabilitySkeleton from './skeleton/index.vue';
 
 export default {
@@ -23,16 +23,16 @@ export default {
       );
     },
     getSkeletonVariant() {
-      switch (this.$route.path) {
-        case OBSERVABILITY_ROUTES.DASHBOARDS:
-          return SKELETON_VARIANT.DASHBOARDS;
-        case OBSERVABILITY_ROUTES.EXPLORE:
-          return SKELETON_VARIANT.EXPLORE;
-        case OBSERVABILITY_ROUTES.MANAGE:
-          return SKELETON_VARIANT.MANAGE;
-        default:
-          return SKELETON_VARIANT.DASHBOARDS;
-      }
+      const [, variant] =
+        Object.entries(SKELETON_VARIANTS_BY_ROUTE).find(([path]) =>
+          this.$route.path.endsWith(path),
+        ) || [];
+
+      const DEFAULT_SKELETON = 'dashboards';
+
+      if (!variant) return DEFAULT_SKELETON;
+
+      return variant;
     },
   },
   mounted() {
@@ -51,7 +51,7 @@ export default {
       } = e;
       switch (type) {
         case MESSAGE_EVENT_TYPE.GOUI_LOADED:
-          this.$refs.iframeSkeleton.handleSkeleton();
+          this.$refs.observabilitySkeleton.onContentLoaded();
           break;
         case MESSAGE_EVENT_TYPE.GOUI_ROUTE_UPDATE:
           this.routeUpdateHandler(payload);
@@ -80,7 +80,7 @@ export default {
 </script>
 
 <template>
-  <observability-skeleton ref="iframeSkeleton" :variant="getSkeletonVariant">
+  <observability-skeleton ref="observabilitySkeleton" :variant="getSkeletonVariant">
     <iframe
       id="observability-ui-iframe"
       data-testid="observability-ui-iframe"