From 17e74984e81240c64b0471b4cd431176eeb8417a Mon Sep 17 00:00:00 2001
From: Robin <git+r@obin.ch>
Date: Wed, 18 Dec 2024 15:22:07 +0000
Subject: [PATCH] chore: react router devtools only in production

---
 apps/frontend/src/main.tsx          | 11 ++++++++++-
 apps/frontend/src/routes/__root.tsx |  2 --
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/main.tsx b/apps/frontend/src/main.tsx
index cc696f95..d39ed5b9 100644
--- a/apps/frontend/src/main.tsx
+++ b/apps/frontend/src/main.tsx
@@ -1,4 +1,4 @@
-import { StrictMode } from "react";
+import React, { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "@quassel/ui/style.css";
 import { ThemeProvider } from "@quassel/ui";
@@ -8,6 +8,14 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 const queryClient = new QueryClient();
 const router = createRouter({ routeTree, context: { queryClient }, defaultPreload: "intent", defaultPreloadStaleTime: 0 });
+const TanStackRouterDevtools =
+  process.env.NODE_ENV === "production"
+    ? () => null
+    : React.lazy(() =>
+        import("@tanstack/router-devtools").then((res) => ({
+          default: res.TanStackRouterDevtools,
+        }))
+      );
 
 declare module "@tanstack/react-router" {
   interface Register {
@@ -20,6 +28,7 @@ createRoot(document.getElementById("root")!).render(
     <QueryClientProvider client={queryClient}>
       <ThemeProvider>
         <RouterProvider router={router} />
+        <TanStackRouterDevtools router={router} position="bottom-right" />
       </ThemeProvider>
     </QueryClientProvider>
   </StrictMode>
diff --git a/apps/frontend/src/routes/__root.tsx b/apps/frontend/src/routes/__root.tsx
index ade77966..fc921d6c 100644
--- a/apps/frontend/src/routes/__root.tsx
+++ b/apps/frontend/src/routes/__root.tsx
@@ -17,7 +17,6 @@ import {
   Divider,
 } from "@quassel/ui";
 import { createRootRouteWithContext, Link, Outlet, useNavigate } from "@tanstack/react-router";
-import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 import { version } from "../../package.json";
 import { $session } from "../stores/session";
 import { useStore } from "@nanostores/react";
@@ -96,7 +95,6 @@ function Root() {
         </AppShell.Main>
         <AppShell.Footer>Version {version}</AppShell.Footer>
       </AppShell>
-      <TanStackRouterDevtools position="top-left" />
     </>
   );
 }