chore: only render the top level to increase performance on larger JSON (#69)

* chore: only render the top level to increase performance on larger JSON

Author: PatrickDinh

src/features/common/components/json-view.tsx

@@ -1,4 +1,4 @@
-import { JsonView as ReactJsonView, allExpanded } from 'react-json-view-lite'
+import { JsonView as ReactJsonView } from 'react-json-view-lite'
 import 'react-json-view-lite/dist/index.css'
 import styles from './json-view.module.css'
 import { cn } from '../utils'
@@ -39,10 +39,14 @@ export function JsonView({ json }: { json: object }) {
       <Button className={cn('absolute top-4 right-4')} onClick={copyJsonToClipboard}>
         Copy
       </Button>
-      <ReactJsonView data={json} shouldExpandNode={allExpanded} style={style} />
+      <ReactJsonView data={json} shouldExpandNode={shouldExpandNode} style={style} />
     </div>
   )
 }
+// Only render the top level because sometimes the object has too many children to render
+const shouldExpandNode = (level: number) => {
+  return level < 1
+}
 
 export interface StyleProps {
   container: string