feat: toggle profiling logs (dev mode only)

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"
 }

src/components/Map.jsx

@@ -1,22 +1,23 @@
 // @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'
 
 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}

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' }} />

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',