feat(dashboard): prefetch daa for context switcher

[jog1t]

TL;DR

Added prefetching for projects and namespaces in the context switcher to improve navigation performance.

What changed?

• Added usePrefetchInfiniteQuery for projects when viewing an organization
• Refactored ProjectList to extract a ProjectListItem component
• Added prefetching for namespaces when hovering over a project
• Removed unnecessary clerk.setActive call during project navigation
• Removed a debug console.log statement in the tokens page

How to test?

1. Navigate between organizations and observe smoother transitions when opening the context switcher
2. Hover over projects in the context switcher and verify that navigating to them feels faster
3. Verify that project navigation still works correctly without the clerk.setActive call

Why make this change?

This change improves the user experience by prefetching data that will likely be needed soon. By prefetching projects when viewing an organization and namespaces when hovering over a project, we reduce loading times and create a more responsive interface when users navigate through the application.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
rivet-cloud	Ready	Preview, Comment	Jan 6, 2026 9:52pm
rivet-inspector	Ready	Preview, Comment	Jan 6, 2026 9:52pm

2 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
rivet-site	Ignored	Preview	Jan 6, 2026 9:52pm
rivetkit-serverless	Skipped		Jan 6, 2026 9:52pm

[jog1t]

• feat(dashboard): editable serverless configs #3765
• feat(dashboard): prefetch daa for context switcher #3761 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add the label merge-queue to this PR to add it to the merge queue.

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

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

[claude]

PR Review: Prefetch Data for Context Switcher

Summary

This PR adds prefetching optimizations to the context switcher to improve navigation performance. The changes are well-focused on performance improvements without introducing breaking changes.

---

✅ Positives

1. Performance improvement: Prefetching projects and namespaces will provide a smoother user experience
2. Clean refactoring: Extracting ProjectListItem component improves code organization and reusability
3. Good cleanup: Removed unnecessary debug console.log statement
4. Smart prefetch strategy: Only prefetching first 5 projects is a pragmatic approach to avoid over-fetching

---

🔍 Issues & Concerns

1. Missing Props in PrefetchedProjectListItem ⚠️

Location: frontend/src/app/context-switcher.tsx:332-344

The PrefetchedProjectListItem component doesn't forward onHover and onSelect props to ProjectListItem:

function PrefetchedProjectListItem({
	id,
	name,
	displayName,
}: Project) {
	usePrefetchInfiniteQuery({
		...useCloudDataProvider().currentOrgProjectNamespacesQueryOptions({
			project: name,
		}),
	});

	return <ProjectListItem id={id} name={name} displayName={displayName} />;
}

Issue: This means the first 5 projects won't trigger hover effects or navigation callbacks properly.

Fix: Add the missing props:

function PrefetchedProjectListItem({
	id,
	name,
	displayName,
	onHover,
	onSelect,
}: Project & {
	onHover?: () => void;
	onSelect?: () => void;
}) {
	usePrefetchInfiniteQuery({
		...useCloudDataProvider().currentOrgProjectNamespacesQueryOptions({
			project: name,
		}),
	});

	return <ProjectListItem id={id} name={name} displayName={displayName} onHover={onHover} onSelect={onSelect} />;
}

---

2. Inconsistent clerk.setActive Removal 🤔

Location: frontend/src/app/context-switcher.tsx:280-292

The PR description mentions:

"Removed unnecessary clerk.setActive call during project navigation"

However, the clerk.setActive call is still present in the code:

onSelect={() => {
	onClose?.();
	clerk.setActive({
		organization,
	});
	return navigate({
		// ...
	});
}}

Questions:

• Was this intentionally kept or is the PR description inaccurate?
• If it was supposed to be removed, why is it still there?
• If it's necessary, the PR description should be updated

---

3. Minor: Unnecessary JSX Fragment 🧹

Location: frontend/src/app/context-switcher.tsx:127-130

if (match && "project" in match) {
	return (
		<>
			<ProjectBreadcrumb project={match.project} />
		</>
	);
}

The fragment is unnecessary since there's only one child element.

Suggested fix:

if (match && "project" in match) {
	return <ProjectBreadcrumb project={match.project} />;
}

---

4. Empty Search Object in Navigation 🤔

Location: frontend/src/app/context-switcher.tsx:290

return navigate({
	to: "/orgs/$organization/projects/$project",
	params: {
		organization: organization,
		project: project.name,
	},
	search: {},  // <-- Why is this here?
});

Question: Is the empty search: {} object intentional? This will clear any existing query parameters. If this is desired behavior, it's fine, but if not, it should be removed or use a function to preserve existing search params like other navigation calls in the file.

---

📋 Suggestions

1. Test Coverage: Consider adding tests for:

   • Prefetch behavior is triggered at the right times
   • First 5 projects vs remaining projects render correctly
   • Hover and selection callbacks work for all projects

2. Performance Monitoring: Consider tracking whether this actually improves perceived performance with analytics/metrics

3. Magic Number: The index < 5 check uses a magic number. Consider extracting to a constant:

   const PREFETCH_PROJECT_COUNT = 5;
   // ...
   const Component = index < PREFETCH_PROJECT_COUNT ? PrefetchedProjectListItem : ProjectListItem;

---

🔐 Security

No security concerns identified.

---

🎯 Verdict

Needs Minor Fixes - The missing props in PrefetchedProjectListItem is a functional bug that will break hover/selection for the first 5 projects. The PR description discrepancy about clerk.setActive should also be clarified.

Once the props are forwarded correctly, this will be a solid performance improvement! 🚀

[graphite-app]

Graphite Automations

"Test" took an action on this PR • (01/06/26)

1 assignee was added to this PR based on Kacper Wojciechowski's automation.