perf: fix manifest, add preconnect hints, dynamic devtools, and loading indicator

[markbang]

Summary

Small follow-up improvements on top of the recent site restructuring:

• manifest.json: Filled empty name, short_name, and added description for PWA install experience
• preconnect hints: Added preconnect/dns-prefetch for unpkg.com CDN
• Dynamic DevTools: TanStack DevTools panels now import dynamically, fully tree-shaken in production builds
• Route loading indicator: Top loading bar animation during client-side route transitions using useRouterState({ select: s => s.isLoading })
• Dependency cleanup: Removed unused jsdom and @testing-library/dom

Test plan

• pnpm build succeeds with 6 prerendered pages
• 77 tests pass (40 core + 8 react + 2 wc + 27 site)
• pnpm check passes with no errors

🤖 Generated with Claude Code

---

Summary by cubic

Improve load and navigation UX by completing the PWA manifest, adding CDN preconnect, lazy-loading DevTools, and showing a top loading bar. This reduces the production bundle and speeds up perceived navigation.

• New Features

  • Top loading bar during client-side route transitions (via useRouterState isLoading).
  • PWA manifest now has name, short_name, and description; updated theme color.

• Refactors

  • DevTools (@tanstack/react-devtools, @tanstack/react-router-devtools) are dynamically imported and tree-shaken from production builds.
  • Added preconnect and dns-prefetch hints for https://unpkg.com.
  • Removed unused jsdom and @testing-library/dom.

^{Written for commit 155d4ed. Summary will update on new commits. Review in cubic}

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
memos-embed-site	Ready	Preview, Comment	May 20, 2026 2:34am

[cubic-dev-ai]

1 issue found across 6 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/site/src/routes/__root.tsx">

<violation number="1" location="apps/site/src/routes/__root.tsx:79">
P2: Handle dynamic import failures in `DevToolsHost` to avoid unhandled promise rejections.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[cubic-dev-ai]

P2: Handle dynamic import failures in DevToolsHost to avoid unhandled promise rejections.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/site/src/routes/__root.tsx, line 79:

<comment>Handle dynamic import failures in `DevToolsHost` to avoid unhandled promise rejections.</comment>

<file context>
@@ -63,21 +62,39 @@ function RootDocument({ children }: { children: React.ReactNode }) {
+		Promise.all([
+			import("@tanstack/react-devtools"),
+			import("@tanstack/react-router-devtools"),
+		]).then(([devtoolsMod, routerMod]) => {
+			const TanStackDevtools = devtoolsMod.TanStackDevtools;
+			const TanStackRouterDevtoolsPanel = routerMod.TanStackRouterDevtoolsPanel;
</file context>

Suggested change

	]).then(([devtoolsMod, routerMod]) => {
	const TanStackDevtools = devtoolsMod.TanStackDevtools;
	const TanStackRouterDevtoolsPanel = routerMod.TanStackRouterDevtoolsPanel;
	setPlugins([
	<TanStackDevtools
	key="devtools"
	config={{ position: "bottom-right" }}
	plugins={[
	{
	name: "Tanstack Router",
	render: <TanStackRouterDevtoolsPanel />,
	},
	]}
	/>,
	]);
	});
	]).then(([devtoolsMod, routerMod]) => {
	const TanStackDevtools = devtoolsMod.TanStackDevtools;
	const TanStackRouterDevtoolsPanel = routerMod.TanStackRouterDevtoolsPanel;
	setPlugins([
	<TanStackDevtools
	key="devtools"
	config={{ position: "bottom-right" }}
	plugins={[
	{
	name: "Tanstack Router",
	render: <TanStackRouterDevtoolsPanel />,
	},
	]}
	/>,
	]);
	}).catch(() => {
	setPlugins(null);
	});