From 362912f49a653c24a850bfefb13cb811d3d60597 Mon Sep 17 00:00:00 2001
From: Mikko Murto <mikko.murto@doubleopen.org>
Date: Wed, 3 Jul 2024 13:31:46 +0300
Subject: [PATCH] fix(ui): Hide Router devtools in production

Fixes #484.

Signed-off-by: Mikko Murto <mikko.murto@doubleopen.org>
---
 ui/src/routes/__root.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/ui/src/routes/__root.tsx b/ui/src/routes/__root.tsx
index aa6db8e5f..98df3f47c 100644
--- a/ui/src/routes/__root.tsx
+++ b/ui/src/routes/__root.tsx
@@ -18,15 +18,26 @@
  */
 
 import { createRootRouteWithContext, Outlet } from '@tanstack/react-router';
-import { TanStackRouterDevtools } from '@tanstack/router-devtools';
+import React, { Suspense } from 'react';
 
 import { RouterContext } from '@/app';
 
+// Don't use Router devtools in production.
+const TanStackRouterDevtools = import.meta.env.PROD
+  ? () => null
+  : React.lazy(() =>
+      import('@tanstack/router-devtools').then((res) => ({
+        default: res.TanStackRouterDevtools,
+      }))
+    );
+
 const RootComponent = () => {
   return (
     <>
       <Outlet />
-      <TanStackRouterDevtools />
+      <Suspense>
+        <TanStackRouterDevtools />
+      </Suspense>
     </>
   );
 };