feat(frontend): better ux when loading actors

[jog1t]

Description

Please include a summary of the changes and the related issue. Please also include relevant motivation and context.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[railway-app]

🚅 Deployed to the rivet-pr-4769 environment in rivet-frontend

Service	Status	Web	Updated (UTC)
ladle	✅ Success (View Logs)	Web	Apr 24, 2026 at 10:54 pm
kitchen-sink	❌ Build Failed (View Logs)	Web	Apr 24, 2026 at 10:53 pm
frontend-cloud	🕒 Building (View Logs)	Web	Apr 24, 2026 at 10:53 pm
website	😴 Sleeping (View Logs)	Web	Apr 24, 2026 at 10:53 pm
frontend-inspector	❌ Build Failed (View Logs)	Web	Apr 24, 2026 at 10:53 pm
mcp-hub	✅ Success (View Logs)	Web	Apr 24, 2026 at 10:44 pm

[jog1t]

• feat(frontend): better ux when loading actors #4769 👈 (View in Graphite)
• refactor(frontend): improve stability of data providers #4768
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[claude]

Code Review: PR #4769 - feat(frontend): better UX when loading actors

This is a small, focused UX improvement (10 lines changed across 2 files) that replaces a generic fullscreen spinner with the real <Actors> layout during the pending state of the namespace index route. The unused z (zod) import removal in connect-quick-railway-frame.tsx is also included.

---

What the PR does

When navigating to the namespace actors page, TanStack Router previously showed a FullscreenLoading spinner while the route loader ran. This PR replaces that with PendingComponent, which renders <Actors actorId={...}> directly using the URL search params already available. The intent is to show the actors layout shell immediately, particularly when a specific actor is already selected via actorId/actorKey query params.

---

High: useDataProvider will throw during pending state

PendingComponent renders <Actors>, which renders <ActorsListPreview>, which mounts <ActorsList>, which calls useDataProvider(). That hook calls useLoaderData pointing to the /_context/orgs/$organization/projects/$project/ns/$namespace route. During the pending state, the loader for that route has not completed, so loaderData is unavailable.

TanStack Router does not silently return undefined here - it throws or returns stale/undefined data. Since <ActorsListPreview> wraps <List> in a <Suspense> boundary but not an <ErrorBoundary>, a synchronous throw propagates upward uncaught. There is no <CatchBoundary> wrapping PendingComponent in this route.

Recommendation: Add a <CatchBoundary> wrapper in PendingComponent, or conditionally guard useDataProvider to return undefined when loader data is not yet available. Validate on a slow network before merging.

---

Medium: Missing pendingMs: 0 / pendingMinMs: 0 on this route

Every sibling and ancestor route that sets a pendingComponent also explicitly sets pendingMs: 0 and pendingMinMs: 0:

• ns.$namespace.tsx: pendingMs: 0, pendingMinMs: 0
• projects.$project.tsx: pendingMs: 0, pendingMinMs: 0
• orgs.$organization/index.tsx: pendingMs: 0, pendingMinMs: 0

The modified ns.$namespace/index.tsx does not set these. Without pendingMs: 0, TanStack Router waits a default 1000 ms before displaying the pendingComponent, meaning the new UX improvement will not appear on fast loads and will appear late on slow ones.

Recommendation: Add pendingMs: 0 and pendingMinMs: 0 to this route definition to match the established pattern.

---

Low: Duplicate component bodies

RouteComponent and PendingComponent are byte-for-byte identical, creating a maintenance burden. Consider extracting a shared inner component:

function ActorsView() {
    const { actorId, actorKey } = Route.useSearch();
    return <Actors actorId={actorKey ?? actorId} />;
}

export function RouteComponent() { return <ActorsView />; }
function PendingComponent() { return <ActorsView />; }

---

Informational

• Unused z import removal is correct. The import z from "zod" removed from connect-quick-railway-frame.tsx is genuinely unused. Safe to remove.
• PR description is empty. Completing the motivation, testing steps, and checklist would help reviewability.

---

Summary

Issue	Severity
useDataProvider/useLoaderData throws during pending state, no error boundary	High
Missing pendingMs: 0 / pendingMinMs: 0 - pending component delayed by 1s default	Medium
Duplicate RouteComponent / PendingComponent bodies	Low
Empty PR description	Informational

The UX intent is good and the import cleanup is correct. The core risk is that PendingComponent renders deeply into the actor component tree before loader data is available, which may cause a runtime throw rather than a graceful skeleton.

[jog1t]

Merge activity

• Apr 24, 10:51 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Apr 24, 10:54 PM UTC: Graphite rebased this pull request as part of a merge.
• Apr 24, 10:54 PM UTC: @jog1t merged this pull request with Graphite.