How to add NProgess/Youtube loading bar in tanstack start

Install the library from npm:

npm install nprogress

in the ___root.tsx file

import {
  createRootRouteWithContext,
  useRouterState,
} from "@tanstack/react-router";

import Nprogress from "nprogress";

function RootComponent() {
  const routerState = useRouterState();

  useEffect(() => {
    if (routerState.isLoading) {
      Nprogress.start();
    } else {
      Nprogress.done();
    }
  }, [routerState.isLoading]);
  return (
    <RootDocument>
      <Outlet />
    </RootDocument>
  );
}

export const Route = createRootRouteWithContext()({
  component: RootComponent,
});