You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is a simple demo. I have a button which submits a form and the action would redirect to another route. I used defer + Suspense + Await, and I want the url to change immediately to /detail. But it waited the loader to finish and then url changed, which is laggy in UI.
How to solve this problem?
// /app/root.tsxexportconstaction=async()=>{console.log('call action');returnredirect('/detail');};exportconstloader=async()=>{constdata=getList();// with a manual 2000ms delayreturndefer({ data });};exportfunctionLayout({ children }: {children: React.ReactNode}){const{ data }=useLoaderData<typeofloader>();return(<htmllang="en"><head><metacharSet="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1"/><Meta/><Links/></head><body><Suspensekey={Math.random()}fallback={<div>Loading...</div>}><Awaitresolve={data}>{data=>{return(<><div>Thisisroot: {JSON.stringify(data)}</div><Formmethod="post"><buttontype="submit"className="border">submit</button></Form></>);}}</Await></Suspense>{children}<ScrollRestoration/><Scripts/></body></html>);}exportdefaultfunctionApp(){return<Outlet/>;}
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
This is a simple demo. I have a button which submits a form and the action would redirect to another route. I used
defer+Suspense+Await, and I want the url to change immediately to/detail. But it waited theloaderto finish and then url changed, which is laggy in UI.How to solve this problem?
Beta Was this translation helpful? Give feedback.
All reactions