Move loading of OS setting to Home

src/clientSideScene/CameraControls.ts

@@ -22,12 +22,7 @@ import {
   UnreliableSubscription,
 } from 'lang/std/engineConnection'
 import { EngineCommand } from 'lang/std/artifactGraph'
-import {
+import { cachedNaturalScrollDirection, toSync, uuidv4 } from 'lib/utils'
-  cachedNaturalScrollDirection,
-  refreshNaturalScrollDirection,
-  toSync,
-  uuidv4,
-} from 'lib/utils'
 import { deg2Rad } from 'lib/utils2d'
 import { isReducedMotion, roundOff, throttle } from 'lib/utils'
 import * as TWEEN from '@tweenjs/tween.js'
@@ -39,9 +34,6 @@ const ORTHOGRAPHIC_CAMERA_SIZE = 20
 const FRAMES_TO_ANIMATE_IN = 30
 const ORTHOGRAPHIC_MAGIC_FOV = 4
 
-// Load the setting from the OS.
-refreshNaturalScrollDirection().catch(reportRejection)
-
 const tempQuaternion = new Quaternion() // just used for maths
 
 type interactionType = 'pan' | 'rotate' | 'zoom'

src/routes/Home.tsx

@@ -37,6 +37,8 @@ import {
 } from 'lib/desktop'
 import { ProjectSearchBar, useProjectSearch } from 'components/ProjectSearchBar'
 import { Project } from 'lib/project'
+import { refreshNaturalScrollDirection } from 'lib/utils'
+import { reportRejection } from 'lib/trap'
 import { useFileSystemWatcher } from 'hooks/useFileSystemWatcher'
 import { useProjectsLoader } from 'hooks/useProjectsLoader'
 
@@ -61,6 +63,11 @@ const Home = () => {
     kclManager.cancelAllExecutions()
   }, [])
 
+  useEffect(() => {
+    // Load OS setting.
+    refreshNaturalScrollDirection().catch(reportRejection)
+  }, [])
+
   useHotkeys('backspace', (e) => {
     e.preventDefault()
   })