Replies: 2 comments
-
You can use the useNavigation hook to know when a navigation is pending after the user clicks a link and render a loading UI. |
Beta Was this translation helpful? Give feedback.
0 replies
-
In case someone lands here from search: Remix now supports clientLoader, which might help building this a bit better. export async function loader() {
// During SSR, we talk to the DB directly
const users = await getServerDataFromDb();
return json({users});
}
export async function clientLoader({ serverLoader }: ClientLoaderFunctionArgs) {
return {
users: serverLoader().then(res => res.users),
};
}
export default function Component() {
const { users } = useLoaderData<typeof clientLoader>();
return (
<Suspense fallback={<SkeletonPage />} >
<Await resolve={users}>
{(users) => users.map((user) => <UserCard key={card.id} user={user} />)}
</Await>
</Suspense>
);
} In that example, This allows us to use React Suspense to render a Here is a working CodeSandbox example: https://codesandbox.io/p/devbox/reverent-panna-jggxzz |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I have an expensive loader that calls the mdx-bundler, it is critical and is also used by the
meta
function:I cannot use
defer
because the loader is critical so when a user clicks a link and there is nothing in the cloudfront cache, then there is no rendering until the loader function has resolved.It is only a problem when there is nothing in the cloudfront cache but I cannot guarantee non-cached calls so is there anyway I can split this up further to get something on the screen while the loader is resolving?
Maybe nested routes?
Beta Was this translation helpful? Give feedback.
All reactions