ai generated solutions to our ai generated problems

frontend/src/App.jsx

@@ -1,13 +1,9 @@
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import L from 'leaflet'
-import { gsap } from 'gsap'
-import { ScrollTrigger } from 'gsap/ScrollTrigger'
 import 'leaflet/dist/leaflet.css'
 import Tree, { prewarmTreeCanvas } from '../Tree/Tree'
 import FallingLeaves from '../Tree/FallingLeaves'
 
-gsap.registerPlugin(ScrollTrigger)
-
 const numberFormat = new Intl.NumberFormat('en-GB')
 const dateFormat = new Intl.DateTimeFormat('en-GB', {
   dateStyle: 'medium',
@@ -600,48 +596,66 @@ function themeToggleDockPosition(navPill) {
 function ThemeToggleMover({ dockPosition, homePosition, isHome, theme, onThemeChange }) {
   const moverRef = useRef(null)
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const mover = moverRef.current
     if (!mover) return undefined
+    let cancelled = false
+    let tween = null
 
-    if (!isHome) {
-      gsap.to(mover, {
-        x: dockPosition.x,
-        y: dockPosition.y,
-        duration: 0.56,
-        ease: 'power3.out',
-        overwrite: true,
-      })
-      return undefined
+    async function animate() {
+      const [{ gsap }, { ScrollTrigger }] = await Promise.all([
+        import('gsap'),
+        import('gsap/ScrollTrigger'),
+      ])
+      if (cancelled) return
+
+      gsap.registerPlugin(ScrollTrigger)
+
+      if (!isHome) {
+        tween = gsap.to(mover, {
+          x: dockPosition.x,
+          y: dockPosition.y,
+          duration: 0.56,
+          ease: 'power3.out',
+          overwrite: true,
+        })
+        return
+      }
+
+      tween = gsap.fromTo(
+        mover,
+        { x: homePosition.x, y: homePosition.y },
+        {
+          x: dockPosition.x,
+          y: dockPosition.y,
+          ease: 'none',
+          overwrite: true,
+          scrollTrigger: {
+            end: '+=96',
+            scrub: 0.35,
+            start: 'top top',
+            trigger: document.documentElement,
+          },
+        },
+      )
     }
 
-    const tween = gsap.fromTo(
-      mover,
-      { x: homePosition.x, y: homePosition.y },
-      {
-        x: dockPosition.x,
-        y: dockPosition.y,
-        ease: 'none',
-        overwrite: true,
-        scrollTrigger: {
-          end: '+=96',
-          scrub: 0.35,
-          start: 'top top',
-          trigger: document.documentElement,
-        },
-      },
-    )
+    animate()
 
     return () => {
-      tween.scrollTrigger?.kill()
-      tween.kill()
+      cancelled = true
+      tween?.scrollTrigger?.kill()
+      tween?.kill()
     }
   }, [dockPosition.x, dockPosition.y, homePosition.x, homePosition.y, isHome])
 
+  const initialPosition = isHome ? homePosition : dockPosition
+
   return (
     <div
       className="theme-toggle-mover fixed left-0 top-0 z-[60]"
       ref={moverRef}
+      style={{ transform: `translate3d(${initialPosition.x}px, ${initialPosition.y}px, 0)` }}
     >
       <ThemeToggle theme={theme} onThemeChange={onThemeChange} />
     </div>
@@ -1488,7 +1502,6 @@ function AppContent() {
           dock: themeToggleDockPosition(navPillRef.current),
           home: defaultThemeTogglePosition(),
         })
-        ScrollTrigger.refresh()
       })
     }