Submission workflow UX improvement of CI checks

[richardhjtan]

This is to fix the flickering issue on the CI checks section, where it flashes back and forth from the empty state to the pipelines running state when the query gets new cards.

Before

Screen.Recording.2026-04-09.at.9.44.50.PM.mov

After

Screen.Recording.2026-04-10.at.1.18.08.PM.mov

[github-actions]

Host Test Results

2 194 tests  ±0   2 179 ✅ ±0   2h 19m 34s ⏱️ - 2m 29s
    1 suites ±0      15 💤 ±0 
    1 files   ±0       0 ❌ ±0 

Results for commit 0dc1299. ± Comparison against base commit b5cd4a5.

♻️ This comment has been updated with latest results.

[habdelra]

perhaps you should use @cached so we don't rebuild this everytime this.flatItems is consumed, and only if ciGroups actually changes

[richardhjtan]

good catch thanks @habdelra

[Copilot]

Pull request overview

Improves the CI checks UX in the submission/PR workflow by avoiding the “empty state ↔ running state” flicker during live query refreshes.

Changes:

• Add isLoading-aware UI states for CI checks (PR card CI section + CI status field + submission workflow step detail).
• Stabilize CI checks rendering by sorting CI items alphabetically and adding stable {{#each ... key=...}} keys.
• Thread ciIsLoading through relevant components/state resolution to drive the new loading messaging.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/catalog-realm/submission-workflow-card/submission-workflow-card.gts	Adds ciIsLoading into workflow state resolution and stabilizes steps rendering with keyed each.
packages/catalog-realm/pr-card/utils.ts	Stabilizes CI item ordering and adjusts status text for in-progress checks.
packages/catalog-realm/pr-card/pr-card.gts	Computes/passes CI loading state into the CI section.
packages/catalog-realm/pr-card/fields/ci-status-field.gts	Adds a dedicated loading row UI when CI data is still loading.
packages/catalog-realm/pr-card/components/isolated/ci-section.gts	Adds loading state rendering and flattens CI groups for stable keyed iteration.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

idx from {{#each ... as |step idx|}} is a number, but this.lastStepIndex is defined as a string (String(this.workflowState.steps.length - 1)). Since eq uses strict equality, the "last step" branch will never match and the connector will still render for the last step. Consider making lastStepIndex a number (or casting idx to string) so the comparison works as intended.