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

  1. 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",
    )
  2. 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`
  1. 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.

Edited by Dakota Dux

Merge request reports

Loading