How to use createBrowserRouter to impliment skeletons for routes? #11176
Replies: 2 comments
-
hi |
Beta Was this translation helpful? Give feedback.
-
Your Do you have data to fetch for your components and want to show a skeleton during that fetch? If so, you can use {
path: Paths.HOME,
lazy: () => import("@/pages/Home"),
loader: () => {
return defer({
data: getData()
});
},
index: true,
ErrorBoundary
}
// Inside the component exported from `pages/Home`
export function Component() {
let data = useLoaderData();
return (
<Suspense fallback={<p>Home Page Skeleton</p>}>
<Await resolve={data.data}>
{(value) => <p>{value}</p>}
</Await>
</Suspense>
);
} Or, if you don't have data to load but want to navigate immediately and show a loading skeleton while your component file loads, you can use const Home = React.lazy(() => import("@/pages/Home"));
const homeRoute = {
path: Paths.HOME,
index: true,
Component() {
return (
<Suspense fallback={<p>Home Page Skeleton</p>}>
<Lazy />
</Suspense>
);
},
ErrorBoundary
} |
Beta Was this translation helpful? Give feedback.
-
export
, and Layouts are have<Outlet/>
, But the Skeletion Loading for each Route Should be needed. I slowed down the network speed and tested out but It doesn't showed Loading text instead of Component we are attaching withlazy
.Beta Was this translation helpful? Give feedback.
All reactions