From b69249dc4120f31bc4ef3be5245cc855ed90aa1e Mon Sep 17 00:00:00 2001
From: Derick M <58572875+TurtIeSocks@users.noreply.github.com>
Date: Thu, 2 Nov 2023 19:05:41 -0400
Subject: [PATCH] feat: toggle profiling logs (dev mode only)

---
 packages/locales/lib/human/en.json        | 3 ++-
 src/components/Map.jsx                    | 7 ++++---
 src/components/layout/drawer/Settings.jsx | 8 ++++++++
 src/hooks/useStore.js                     | 2 ++
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/locales/lib/human/en.json b/packages/locales/lib/human/en.json
index 7c9a80a81..23d007c78 100644
--- a/packages/locales/lib/human/en.json
+++ b/packages/locales/lib/human/en.json
@@ -675,5 +675,6 @@
   "include_sponsored": "Include Sponsored",
   "showcase_color": "Showcase Color",
   "partner_color": "Partner Color",
-  "disable": "Disable {{- name}}"
+  "disable": "Disable {{- name}}",
+  "profiling": "Profiling"
 }
\ No newline at end of file
diff --git a/src/components/Map.jsx b/src/components/Map.jsx
index 1717477ce..0aff0ecfb 100644
--- a/src/components/Map.jsx
+++ b/src/components/Map.jsx
@@ -1,7 +1,7 @@
 // @ts-check
 import * as React from 'react'
 
-import { useStatic } from '@hooks/useStore'
+import { useStatic, useStore } from '@hooks/useStore'
 import Utility from '@services/Utility'
 import FilterPermCheck from './QueryData'
 
@@ -9,14 +9,15 @@ export default function Map() {
   Utility.analytics(window.location.pathname)
 
   const ready = useStatic((s) => !!s.map && !!s.Icons)
-  const ui = useStatic((state) => state.ui)
+  const ui = useStatic((s) => s.ui)
+  const profiling = useStore((s) => s.profiling)
 
   if (!ready) return null
   return (
     <>
       {Object.keys({ ...ui, ...ui.wayfarer, ...ui.admin }).map((category) => {
         if (category === 'settings') return null
-        return process.env.NODE_ENV === 'development' ? (
+        return process.env.NODE_ENV === 'development' && profiling ? (
           <React.Profiler
             key={category}
             id={category}
diff --git a/src/components/layout/drawer/Settings.jsx b/src/components/layout/drawer/Settings.jsx
index 938b4368b..92dc6f62a 100644
--- a/src/components/layout/drawer/Settings.jsx
+++ b/src/components/layout/drawer/Settings.jsx
@@ -16,6 +16,7 @@ import StyleIcon from '@mui/icons-material/Style'
 import DevicesOtherIcon from '@mui/icons-material/DevicesOther'
 import Brightness7Icon from '@mui/icons-material/Brightness7'
 import CakeIcon from '@mui/icons-material/Cake'
+import InsightsIcon from '@mui/icons-material/Insights'
 
 import { useTranslation } from 'react-i18next'
 
@@ -162,6 +163,13 @@ export default function Settings() {
           </ListItemIcon>
         </BoolToggle>
       ))}
+      {process.env.NODE_ENV === 'development' && (
+        <BoolToggle field="profiling" label={t('profiling')}>
+          <ListItemIcon>
+            <InsightsIcon />
+          </ListItemIcon>
+        </BoolToggle>
+      )}
       {!separateDrawerActions && (
         <>
           <Divider style={{ margin: '10px 0' }} />
diff --git a/src/hooks/useStore.js b/src/hooks/useStore.js
index 9191cbeac..e7599e6be 100644
--- a/src/hooks/useStore.js
+++ b/src/hooks/useStore.js
@@ -26,6 +26,7 @@ import { persist } from 'zustand/middleware'
  *   scannerCooldown: number
  *   icons: Record<string, string>
  *   userSettings: Record<string, any>
+ *   profiling: boolean
  *   setAreas: (areas: string | string[], validAreas: string[], unselectAll?: boolean) => void,
  * }} UseStore
  * @type {import("zustand").UseBoundStore<import("zustand").StoreApi<UseStore>>}
@@ -101,6 +102,7 @@ export const useStore = create(
       },
       motdIndex: 0,
       scannerCooldown: 0,
+      profiling: false,
     }),
     {
       name: 'local-state',