Add Observability loading screen
What does this MR do and why?
Replace "Loading metrics..." text with a loading spinner. This is an update to match our design guidelines.
Duo generated summary
This change improves the loading experience for the observability feature by creating a dedicated loading component. Instead of showing just plain text that says "Loading metrics...", the app now displays a proper loading spinner with a centered layout and better visual styling. The loading message was also simplified from "Loading metrics..." to just "Loading..." to be more general-purpose. This makes the interface look more polished and professional when users are waiting for data to load.
References
Improve Observability iframe loading experience
Screenshots or screen recordings
| Before | After |
|---|---|
| Screen_Recording_2025-10-30_at_10.46.52_AM | Screen_Recording_2025-10-30_at_10.46.01_AM |
How to set up and validate locally
-
In rails console enable the feature flag and set the group settings
group = Group.find_by_path('toolbox') Feature.enable(:observability_sass_features, group) group.create_observability_group_o11y_setting!( o11y_service_url: "http://localhost:8080", o11y_service_user_email: 'fakeemail@gitlab.com', o11y_service_password: "passwordmcpasswordface", o11y_service_post_message_encryption_key: "your-super-secret-encryption-key-here-32-chars-minimum", ) -
Get an instance of GitLab O11y running locally 3. Install Docker Desktop if you haven't already. 4. Checkout o11y and run it
git clone git@gitlab.com:gitlab-org/embody-team/experimental-observability/gitlab_o11y.git
cd gitlab_o11y
`O11Y_EMAIL='fakeemail@gitlab.com', O11Y_PASSWORD=passwordmcpasswordface ALLOWED_ORIGINS="http://localhost:3000" O11Y_NAME=O11y ORG_DISPLAY_NAME=GitLab docker compose -f deploy/docker/docker-compose.yaml up -d`
- Load http://localhost:3000/groups/toolbox/-/observability/services and see the spinner
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.