using throttle for better performance

deno.json

@@ -52,7 +52,8 @@
     "iconoir-react": "https://esm.sh/[email protected]?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&external=preact",
     "clsx": "npm:[email protected]",
     "@react-spring/web": "npm:@react-spring/[email protected]",
-    "class-variance-authority": "npm:[email protected]"
+    "class-variance-authority": "npm:[email protected]",
+    "lodash.throttle": "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/throttle.js"
   },
   "compilerOptions": {
     "lib": ["dom", "dom.asynciterable", "deno.ns"],

hooks/utils/useShowHeader.ts

@@ -1,5 +1,6 @@
 import { useEffect } from 'preact/hooks'
 import { useSignal } from '@preact/signals'
+import throttle from 'lodash.throttle'
 
 type Props = {
   defaultShowHeader?: boolean
@@ -21,11 +22,15 @@ export function useShowHeader({ defaultShowHeader = true }: Props = {}) {
 
       lastScrollY.value = currentScrollY
     }
+    const throttledHandleScroll = throttle(handleScroll, 100) as (
+      this: Window,
+      ev: Event,
+    ) => void
 
-    globalThis.addEventListener('scroll', handleScroll)
+    globalThis.addEventListener('scroll', throttledHandleScroll)
 
     return () => {
-      globalThis.removeEventListener('scroll', handleScroll)
+      globalThis.removeEventListener('scroll', throttledHandleScroll)
     }
   }, [])
 

routes/[locale]/(default)/index.tsx

@@ -10,7 +10,6 @@ export const handler = define.handlers({
     ctx.state.title = 'metadata.homeTitle'
     ctx.state.description = 'metadata.description'
     ctx.state.ogImage = new URL(asset('/ogp.jpg'), ctx.url).href
-
     return page()
   },
 })