From e6ec589e1251bcb4963bada86420daef9703dba6 Mon Sep 17 00:00:00 2001
From: JoeMakuta <makutajosue@gmail.com>
Date: Wed, 1 Apr 2026 16:10:27 +0200
Subject: [PATCH] feat: add dynamic import  and dev only render of
 ReactQueryClientProvider

---
 surfsense_web/lib/query-client/query-client.provider.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/surfsense_web/lib/query-client/query-client.provider.tsx b/surfsense_web/lib/query-client/query-client.provider.tsx
index 453b9f531..6dc2a4258 100644
--- a/surfsense_web/lib/query-client/query-client.provider.tsx
+++ b/surfsense_web/lib/query-client/query-client.provider.tsx
@@ -1,13 +1,18 @@
 "use client";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import dynamic from "next/dynamic";
 import { QueryClientAtomProvider } from "jotai-tanstack-query/react";
 import { queryClient } from "./client";
 
+const ReactQueryDevtools = dynamic(
+	() => import("@tanstack/react-query-devtools").then((m) => ({ default: m.ReactQueryDevtools })),
+	{ ssr: false }
+);
+
 export function ReactQueryClientProvider({ children }: { children: React.ReactNode }) {
 	return (
 		<QueryClientAtomProvider client={queryClient}>
 			{children}
-			<ReactQueryDevtools initialIsOpen={false} />
+			{process.env.NODE_ENV === "development" && <ReactQueryDevtools initialIsOpen={false} />}
 		</QueryClientAtomProvider>
 	);
 }