diff --git a/app/assets/javascripts/observability/components/app.vue b/app/assets/javascripts/observability/components/app.vue
index f6db74bab25b2cdea6d6bbef929e4a36a2c51899..e6cdb0da1a74ef17ca461673cc47b8a0ca24c6de 100644
--- a/app/assets/javascripts/observability/components/app.vue
+++ b/app/assets/javascripts/observability/components/app.vue
@@ -3,9 +3,13 @@ import { createMessageValidator } from '../utils/message_validator';
 import { MESSAGE_TYPES, TIMEOUTS } from '../constants';
 import { buildIframeUrl, extractTargetPath } from '../utils/url_helpers';
 import { AuthManager } from '../utils/auth_manager';
+import ObservabilityLoading from './observability_loading.vue';
 
 export default {
   name: 'ObservabilityApp',
+  components: {
+    ObservabilityLoading,
+  },
   props: {
     o11yUrl: {
       type: String,
@@ -126,9 +130,7 @@ export default {
   <div
     class="gl-h-full gl-grow gl-overflow-hidden gl-rounded-base gl-border-1 gl-border-solid gl-border-default"
   >
-    <div v-if="isLoading" class="o11y-status" data-testid="o11y-loading-status">
-      {{ s__('Observability|Loading metrics...') }}
-    </div>
+    <observability-loading v-if="isLoading" data-testid="o11y-loading-status" />
     <div v-else-if="!isAuthenticated" class="o11y-status" data-testid="o11y-error-status">
       {{ s__('Observability|Authentication failed. Please refresh the page.') }}
     </div>
diff --git a/app/assets/javascripts/observability/components/observability_loading.vue b/app/assets/javascripts/observability/components/observability_loading.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c082bbd90c83034ba64fc725ff0505eeb7ad51cb
--- /dev/null
+++ b/app/assets/javascripts/observability/components/observability_loading.vue
@@ -0,0 +1,18 @@
+<script>
+import { GlLoadingIcon } from '@gitlab/ui';
+
+export default {
+  name: 'ObservabilityLoading',
+  components: {
+    GlLoadingIcon,
+  },
+};
+</script>
+
+<template>
+  <div
+    class="gl-flex gl-h-[60vh] gl-min-h-[400px] gl-w-full gl-items-center gl-justify-center gl-bg-default"
+  >
+    <gl-loading-icon size="md" :label="s__('Observability|Loading...')" />
+  </div>
+</template>
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index bec4c040368ac8e4f06b6aaeca955c2770e99fd7..ca0686d7003773c9b4e3e5316c6ce424841c5959 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -45075,7 +45075,7 @@ msgstr ""
 msgid "Observability|Length must be a positive integer"
 msgstr ""
 
-msgid "Observability|Loading metrics..."
+msgid "Observability|Loading..."
 msgstr ""
 
 msgid "Observability|Manage your o11y service connection settings."