experiment with suspending page on client side navigation?

[hi-ogawa]

• follow up support SSR + server data + server redirection #10
• relevant ideas
  • Integrating Remix Router with React Transitions remix-run/remix#5763
  • Wrap internal router state updates with React.startTransition remix-run/react-router#10438
  • https://tanstack.com/query/v4/docs/react/guides/suspense
  • https://react.dev/reference/react/Suspense#indicating-that-a-transition-is-happening
• also see this TODO

vite-plugins/packages/demo/e2e/basic.test.ts

Lines 86 to 94 in 14b947e

	test("client-side-bad", async ({ page }) => {
	await page.goto("/server-redirect");
	await isPageReady(page);
	await page.getByRole("link", { name: "forbidden link" }).click();
	// TODO: if we suspend the query, will react-router doesn't update url until resolution?
	await page.waitForURL("/server-redirect/forbidden");
	await page.getByText("something went wrong...").click();
	await page.waitForURL("/server-redirect?error=client");
	});

---

Q. react-router doesn't provide useTransition/isPending state yet?

[hi-ogawa]

It's possible to play around with it but its UX/DX improvement is worth the effort, so it's no-go for now.
See experiments (including patching react-router) in

• chore: experiment with "react-transition-enabled" router and suspending query #29