How to use createBrowserRouter to impliment skeletons for routes?

[AbhilashMadi]

• As showin in document I am exporting the Components with 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 with lazy.
• Routing System is properly working but I need Skeleto for each page as different, it should be shown until the lazy importing component is loaded

import routes from "@/routes/Routes";
import type { FC } from "react";
import { Suspense } from "react";
import { RouterProvider } from "react-router-dom";
import Loader from "@/components/suspense/Loader";

const App: FC = () => {

  return <Suspense fallback={<Loader />}>
    <RouterProvider router={routes} />
  </Suspense>;
};

export default App;

• My Component Generally Looks like this

import type { FC } from "react";

export const Component: FC = () => {

  return (
    <div>Home</div>
  );
};

Component.displayName = "Home";

import ErrorBoundary from "@/pages/handlers/ErrorBoundary";
import { Paths } from "@/routes/paths";
import { createBrowserRouter } from "react-router-dom";


export default createBrowserRouter([
  {
    path: Paths.HOME,
    lazy: () => import("@/pages/Home"),
    loader: () => <>Home Page Skeleton</>,
    index: true,
    ErrorBoundary
  },
  {
    path: Paths.AUTH,
    lazy: () => import("@/pages/auth/AuthLayout"),
   loader: () => <>Auth Page Skeleton</>,
    ErrorBoundary,
    children: [
      {
        path: Paths.LOGIN,
        lazy: () => import("@/pages/auth/Login"),
       loader: () => <>Login Page Skeleton</>,
        index: true,
      },
      {
        path: Paths.REGISTER,
        lazy: () => import("@/pages/auth/Register"),
       loader: () => <>Register Page Skeleton</>,
      }
    ]
  },
  {
    path: Paths.LANDING,
    lazy: () => import("@/pages/Layout"),
    ErrorBoundary,
    children: [
      {
        path: Paths.MENU,
        lazy: () => import("@/pages/Landing"),
       loader: () => <>Menu Page Skeleton</>,
        index: true
      },
    ]
  },
  {
    path: Paths.NOT_FOUND,
    lazy: () => import("@/pages/handlers/NotFound"),
    loader: () => <>Not Found Page Skeleton</>,
    ErrorBoundary,
  },
]);

//Also I am currently seeing two problems in this file

/*
Fast refresh can't handle anonymous components. Add a name to your export.eslint(react-refresh/only-export-components)
Missing return type on function.eslint[@typescript-eslint/explicit-function-return-type](https://typescript-eslint.io/rules/explicit-function-return-type)
(property) IndexRouteObject.loader?: LoaderFunction<any> | undefined
*/

/*
Missing return type on function.eslint[@typescript-eslint/explicit-function-return-type](https://typescript-eslint.io/rules/explicit-function-return-type)
(property) IndexRouteObject.lazy?: LazyRouteFunction<RouteObject> | undefined
*/

[hojjatmahdave]

hi
as the document say the while using the create browser router the react router dom wait till your data fetch then it navigate you to your page.
but when U want to use the skeleton loader U should navigate, and in that page your data will fetch !
that's the main reason that U can't use the skeleton loader in your page

[brophdawg11]

Your loader is for returning the data for your component, but it looks like you're trying to return a JSX element for the skeleton.

Do you have data to fetch for your components and want to show a skeleton during that fetch? If so, you can use defer and Await:

{
  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 React.lazy:

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
}