fix(cli): remove excessive loader in root component in tanstack router / start

AmanVarshney01 · AmanVarshney01 · commit fbfa234305e9 · 2025-11-06T22:55:42.000+05:30
diff --git a/apps/cli/templates/frontend/react/tanstack-router/src/routes/__root.tsx.hbs b/apps/cli/templates/frontend/react/tanstack-router/src/routes/__root.tsx.hbs
@@ -1,5 +1,4 @@
 import Header from "@/components/header";
-import Loader from "@/components/loader";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 {{#if (eq api "orpc")}}
@@ -20,7 +19,6 @@ import {
   HeadContent,
   Outlet,
   createRootRouteWithContext,
-  useRouterState,
 } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import "../index.css";
@@ -61,10 +59,6 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
 });
 
 function RootComponent() {
-  const isFetching = useRouterState({
-    select: (s) => s.isLoading,
-  });
-
   {{#if (eq api "orpc")}}
   const [client] = useState<AppRouterClient>(() => createORPCClient(link));
   const [orpcUtils] = useState(() => createTanstackQueryUtils(client));
@@ -82,7 +76,7 @@ function RootComponent() {
         >
           <div className="grid grid-rows-[auto_1fr] h-svh">
             <Header />
-            {isFetching ? <Loader /> : <Outlet />}
+            <Outlet />
           </div>
           <Toaster richColors />
         </ThemeProvider>
@@ -95,7 +89,7 @@ function RootComponent() {
       >
         <div className="grid grid-rows-[auto_1fr] h-svh">
           <Header />
-          {isFetching ? <Loader /> : <Outlet />}
+          <Outlet />
         </div>
         <Toaster richColors />
       </ThemeProvider>
diff --git a/apps/cli/templates/frontend/react/tanstack-start/src/routes/__root.tsx.hbs b/apps/cli/templates/frontend/react/tanstack-start/src/routes/__root.tsx.hbs
@@ -7,7 +7,6 @@ import {
   Outlet,
   Scripts,
   createRootRouteWithContext,
-  useRouterState,
 {{#if (and (eq backend "convex") (or (eq auth "clerk") (eq auth "better-auth")))}}
   useRouteContext,
 {{/if}}
@@ -24,7 +23,6 @@ import type { ConvexReactClient } from "convex/react";
 import type { QueryClient } from "@tanstack/react-query";
 {{/if}}
 {{/if}}
-import Loader from "@/components/loader";
 
 {{#if (and (eq backend "convex") (eq auth "clerk"))}}
 import { ClerkProvider, useAuth } from "@clerk/tanstack-react-start";
@@ -125,7 +123,6 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
 });
 
 function RootDocument() {
-  const isFetching = useRouterState({ select: (s) => s.isLoading });
   {{#if (and (eq backend "convex") (eq auth "clerk"))}}
   const context = useRouteContext({ from: Route.id });
   return (
@@ -138,7 +135,7 @@ function RootDocument() {
           <body>
             <div className="grid h-svh grid-rows-[auto_1fr]">
               <Header />
-              {isFetching ? <Loader /> : <Outlet />}
+              <Outlet />
             </div>
             <Toaster richColors />
             <TanStackRouterDevtools position="bottom-left" />
@@ -159,7 +156,7 @@ function RootDocument() {
         <body>
           <div className="grid h-svh grid-rows-[auto_1fr]">
             <Header />
-            {isFetching ? <Loader /> : <Outlet />}
+            <Outlet />
           </div>
           <Toaster richColors />
           <TanStackRouterDevtools position="bottom-left" />
@@ -177,7 +174,7 @@ function RootDocument() {
       <body>
         <div className="grid h-svh grid-rows-[auto_1fr]">
           <Header />
-          {isFetching ? <Loader /> : <Outlet />}
+          <Outlet />
         </div>
         <Toaster richColors />
         <TanStackRouterDevtools position="bottom-left" />
