feat: unify loading states across the application by SurbhiAgarwal1 · Pull Request #497 · open-telemetry/opentelemetry-ecosystem-explorer

SurbhiAgarwal1 · 2026-05-16T09:15:45Z

Description

This Pull Request standardizes the application's loading experience by replacing scattered, duplicated loading UI implementations with a single, reusable Loader component. This ensures visual consistency across all feature pages and improves the overall user experience and accessibility.

Fixes #486

Key Changes

1. New Unified Loader Component

Created src/components/ui/Loader.tsx as the single source of truth for loading states.
lg variant: Full-page centered loader with premium pulsing glow effects, secondary shadows, and a large Loader2 icon.
sm variant: Inline compact loader for section-level or component-specific loading states.
Accessibility: Fully integrated role="status", aria-live="polite", and aria-busy="true" for screen-reader compatibility.

2. Comprehensive Refactoring

Replaced four inconsistent loading implementations (glow blocks, dashed boxes, plain text, and ad-hoc Suspense fallbacks) in the following areas:

Instrumentation Detail: Replaced a large manual loading block with the unified Loader.
Collector Pages: Standardized loading states in both the list and detail views.
Java Configuration: Replaced fragmented loading text and redundant labels in the configuration list and builder pages.
App Core: Unified Suspense fallbacks in LegacyApp and V1App for consistent route transitions.

3. Conflict Resolution & Stability

Successfully resolved merge conflicts with upstream/main, incorporating the latest retry logic and SPA fallback protections.
Ensured zero layout shifts for full-page loading states by using consistent height constraints.

Verification

Typecheck: tsc -b passed.
Lint: eslint . passed.
Unit Tests: All 859 tests passed.
Integration Tests: All 33 integration tests passed.
Build: Production bundle generated successfully.

netlify · 2026-05-16T09:15:51Z

✅ Deploy Preview for otel-ecosystem-explorer ready!

Name	Link
🔨 Latest commit	`877ba23`
🔍 Latest deploy log	https://app.netlify.com/projects/otel-ecosystem-explorer/deploys/6a0b14e3628a1300080231cb
😎 Deploy Preview	https://deploy-preview-497--otel-ecosystem-explorer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

lucacavenaghi97 · 2026-05-17T00:02:05Z

Hi @SurbhiAgarwal1, thanks for the PR.

The diff also includes all the changes from your PR #380 (README support). I suspect this branch was started from feat/242-library-readme-support instead of main.

Could you rebase on an up-to-date main and drop the commits from #380? Once the diff only contains the Loader work I'll go ahead with the review. Thanks!

SurbhiAgarwal1 · 2026-05-17T06:16:47Z

Hi @lucacavenaghi97, the branch is now fully cleaned up, rebased on main, and all CI checks are passing! Let me know if you need anything else for the review

Copilot

Pull request overview

Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.

Comments suppressed due to low confidence (3)

ecosystem-explorer/src/components/ui/Loader.tsx:32

This component-level comment repeats the component name/purpose without adding a non-obvious invariant or workaround. Frontend guidance for this repo asks new explorer code to ship without comments that simply restate what the code already expresses.

/**
 * A unified Loader component for consistent loading states across the application.

ecosystem-explorer/src/components/ui/Loader.tsx:57

This inline comment just labels the immediately following glow markup. It does not explain a non-obvious invariant or workaround, so it should be removed under the frontend comment guidance for new explorer code.

        {/* Glow effect */}

ecosystem-explorer/src/components/ui/Loader.tsx:28

These comments restate the prop names rather than documenting non-obvious behavior. Per the frontend guidance, new comments should explain a specific invariant, footgun, or workaround, so these should be removed unless there is hidden behavior to document.

  /** Optional additional CSS classes */
  className?: string;
  /** Optional text to display alongside the loader */
  label?: string;

+export function Loader({ size = "lg", className = "", label }: LoaderProps) {
+  if (size === "sm") {


+/**
+ * A unified Loader component for consistent loading states across the application.
+ */
+export function Loader({ size = "lg", className = "", label }: LoaderProps) {


+  /**
+   * Size of the loader.
+   * "lg" is for full-page states and Suspense fallbacks.
+   * "sm" is for inline/compact states.
+   */


            <div className="text-muted-foreground mb-4 text-sm">
              {isLoading
-                ? "Loading..."
+                ? "..."


Standardizes the application's loading experience by replacing scattered, duplicated loading UI implementations with a single, reusable Loader component. Replaces manual loading blocks and plain text messages in instrumentation and collector pages, and unifies Suspense fallbacks. Resolved conflicts with upstream/main incorporating latest retry logic and SPA fallback protections.

lucacavenaghi97 · 2026-05-18T19:09:32Z

Hi @SurbhiAgarwal1, a few things still open before I can finish the review.

1. CI is red.

format-check: trailing whitespace in loader.test.tsx. bun run format fixes it.
Markdown Lint: 22 errors, all in the file at point 2.

2. projects/84-ui-ux-design/05-footer-cncf-callout-spec.md doesn't belong to this PR, please remove it.

3. tsconfig.app.json still has ignoreDeprecations: "6.0" and baseUrl: "." removed. Please restore them.

4. Red flash on /java-agent/configuration/builder. During initial load a brief Failed to load schema. appears before the page renders. The || !root you added catches a normal transient state (schema.loading=false and schema.data=null for one render while schemaVersion flips from "" to a real value) and maps it onto the error branch.

Tested this fix locally and the flash is gone (in both <TabsContent>):

-            {!schemaVersion || schema.loading || starter.loading ? (
-              <Loader size="sm" label="Loading schema…" className="mt-4" />
-            ) : schema.error || !root ? (
+            {!schemaVersion || schema.loading || starter.loading || (!schema.error && !root) ? (
+              <Loader
+                size={root ? "sm" : "lg"}
+                label="Loading schema…"
+                className={root ? "mt-4" : undefined}
+              />
+            ) : schema.error ? (
              <p className="mt-4 text-sm text-red-400">Failed to load schema.</p>

Side benefit: lg on first load fills the empty page (version selectors and tabs aren't mounted yet), sm for version-switch re-fetches matches the original intent from #486.

SurbhiAgarwal1 requested review from a team as code owners May 16, 2026 09:15

SurbhiAgarwal1 force-pushed the feat/unify-loading-states branch 4 times, most recently from 12b1fe5 to c54150f Compare May 16, 2026 09:28

lucacavenaghi97 requested a review from Copilot May 16, 2026 22:55

Copilot started reviewing on behalf of lucacavenaghi97 May 16, 2026 22:55 View session

Copilot AI reviewed May 16, 2026

View reviewed changes

lucacavenaghi97 requested a review from Copilot May 16, 2026 23:00

Copilot started reviewing on behalf of lucacavenaghi97 May 16, 2026 23:00 View session

Copilot AI reviewed May 16, 2026

View reviewed changes

lucacavenaghi97 requested a review from Copilot May 16, 2026 23:38

Copilot started reviewing on behalf of lucacavenaghi97 May 16, 2026 23:38 View session

Copilot AI reviewed May 16, 2026

View reviewed changes

SurbhiAgarwal1 force-pushed the feat/unify-loading-states branch 5 times, most recently from 9ef47a0 to f621020 Compare May 17, 2026 06:04

vitorvasc requested a review from Copilot May 18, 2026 09:34

Copilot started reviewing on behalf of vitorvasc May 18, 2026 09:34 View session

Copilot AI reviewed May 18, 2026

View reviewed changes

SurbhiAgarwal1 added 2 commits May 18, 2026 18:55

chore: address Copilot AI review feedback for unified loading states

877ba23

SurbhiAgarwal1 force-pushed the feat/unify-loading-states branch from f621020 to 877ba23 Compare May 18, 2026 13:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: unify loading states across the application#497

feat: unify loading states across the application#497
SurbhiAgarwal1 wants to merge 2 commits into
open-telemetry:mainfrom
SurbhiAgarwal1:feat/unify-loading-states

SurbhiAgarwal1 commented May 16, 2026

Uh oh!

netlify Bot commented May 16, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

lucacavenaghi97 commented May 17, 2026

Uh oh!

SurbhiAgarwal1 commented May 17, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

lucacavenaghi97 commented May 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		export function Loader({ size = "lg", className = "", label }: LoaderProps) {
		if (size === "sm") {

Conversation

SurbhiAgarwal1 commented May 16, 2026

Description

Key Changes

1. New Unified Loader Component

2. Comprehensive Refactoring

3. Conflict Resolution & Stability

Verification

Uh oh!

netlify Bot commented May 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for otel-ecosystem-explorer ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

lucacavenaghi97 commented May 17, 2026

Uh oh!

SurbhiAgarwal1 commented May 17, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

lucacavenaghi97 commented May 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify Bot commented May 16, 2026 •

edited

Loading