From 639bd456f287670b7ba4fb8ec1958ae4b55b68c0 Mon Sep 17 00:00:00 2001
From: dakotadux <ddux@gitlab.com>
Date: Tue, 21 Oct 2025 11:52:11 -0600
Subject: [PATCH] Add loading screen

---
 .../observability/components/app.vue           |  8 +++++---
 .../components/observability_loading.vue       | 18 ++++++++++++++++++
 locale/gitlab.pot                              |  2 +-
 3 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 app/assets/javascripts/observability/components/observability_loading.vue

diff --git a/app/assets/javascripts/observability/components/app.vue b/app/assets/javascripts/observability/components/app.vue
index f6db74bab25b2c..e6cdb0da1a74ef 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 00000000000000..c082bbd90c8303
--- /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 bec4c040368ac8..ca0686d7003773 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."
-- 
GitLab