fix: remove devtools in prod (#417)

.gitignore

@@ -42,3 +42,5 @@ cypress/videos
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+*.tsbuildinfo

src/routeTree.gen.ts

@@ -1,12 +1,12 @@
-/* prettier-ignore-start */
-
 /* eslint-disable */
 
 // @ts-nocheck
 
 // noinspection JSUnusedGlobalSymbols
 
-// This file is auto-generated by TanStack Router
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 // Import Routes
 
@@ -214,8 +214,6 @@ export const routeTree = rootRoute
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
 
-/* prettier-ignore-end */
-
 /* ROUTE_MANIFEST_START
 {
   "routes": {

src/routes/__root.tsx

@@ -1,7 +1,8 @@
+import React, { Suspense } from 'react';
+
 import { Stack } from '@mui/material';
 
 import { Outlet, createRootRouteWithContext } from '@tanstack/react-router';
-import { TanStackRouterDevtools } from '@tanstack/router-devtools';
 
 import { AuthContextType } from '@/AuthContext';
 import { NotFoundComponent } from '@/components/NotFoundComponent';
@@ -12,16 +13,27 @@ export const Route = createRootRouteWithContext<{ auth: AuthContextType }>()({
   notFoundComponent: NotFoundComponent,
 });
 
+// this allows to remove the tanstack router dev tools in production
+const TanStackRouterDevtools =
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  process.env.NODE_ENV === 'production'
+    ? () => null // Render nothing in production
+    : React.lazy(() =>
+        // Lazy load in development
+        import('@tanstack/router-devtools').then((res) => ({
+          default: res.TanStackRouterDevtools,
+        })),
+      );
+
 function RootComponent() {
   return (
     <Stack id="__root">
       <Outlet />
-      {import.meta.env.MODE !== 'test' && (
-        <>
-          <ReactQueryDevtools />
-          <TanStackRouterDevtools />
-        </>
-      )}
+      {import.meta.env.MODE !== 'test' && <ReactQueryDevtools />}
+      <Suspense>
+        <TanStackRouterDevtools />
+      </Suspense>
     </Stack>
   );
 }