♻️ Simplify JotaiDevTools implementation and remove suspense

Author: romantech

src/base/components/dev/jotai-devtools.tsx

@@ -1,19 +1,8 @@
-import { lazy, Suspense } from 'react';
+import { DevTools, DevToolsProps } from 'jotai-devtools';
 
-import { DevToolsProps } from 'jotai-devtools';
+if (import.meta.env.DEV) import('jotai-devtools/styles.css');
 
-const LazyDevTools = lazy(() =>
-  Promise.all([
-    import('jotai-devtools'),
-    import('jotai-devtools/styles.css'),
-  ]).then(([m]) => ({ default: m.DevTools })),
-);
-
-export function JotaiDevTools(props: DevToolsProps) {
+export function JotaiDevTools({ theme = 'dark', ...props }: DevToolsProps) {
   if (!import.meta.env.DEV) return null;
-  return (
-    <Suspense fallback={null}>
-      <LazyDevTools {...props} />
-    </Suspense>
-  );
+  return <DevTools theme={theme} {...props} />;
 }

src/features/syntax-editor/pages/syntax-editor-root.tsx

@@ -8,7 +8,7 @@ export default function SyntaxEditorRoot() {
   return (
     <Layout>
       <Provider store={analysisStore}>
-        <JotaiDevTools store={analysisStore} theme="dark" />
+        <JotaiDevTools />
         <Outlet />
       </Provider>
     </Layout>