From f5793b78d269789f777bfe3b0da849e750e946dd Mon Sep 17 00:00:00 2001 From: KishiTheMechanic Date: Thu, 31 Oct 2024 12:35:48 +0100 Subject: [PATCH] using throttle for better performance --- deno.json | 3 ++- deno.lock | 17 ++++++++++++++++- hooks/utils/useShowHeader.ts | 9 +++++++-- routes/[locale]/(default)/index.tsx | 1 - 4 files changed, 25 insertions(+), 5 deletions(-) diff --git a/deno.json b/deno.json index 322e319..0ec17c7 100644 --- a/deno.json +++ b/deno.json @@ -52,7 +52,8 @@ "iconoir-react": "https://esm.sh/iconoir-react@7.9.0?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat&external=preact", "clsx": "npm:clsx@2.1.1", "@react-spring/web": "npm:@react-spring/web@9.7.4", - "class-variance-authority": "npm:class-variance-authority@0.7.0" + "class-variance-authority": "npm:class-variance-authority@0.7.0", + "lodash.throttle": "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/throttle.js" }, "compilerOptions": { "lib": ["dom", "dom.asynciterable", "deno.ns"], diff --git a/deno.lock b/deno.lock index f67fdb3..175c6f6 100644 --- a/deno.lock +++ b/deno.lock @@ -1964,7 +1964,22 @@ "https://esm.sh/v135/use-sidecar@1.1.2/X-YS9yZWFjdC1kb206cHJlYWN0QDEwLjI0LjMvY29tcGF0LHJlYWN0OnByZWFjdEAxMC4yNC4zL2NvbXBhdA/denonext/dist/es2015/medium.js": "4af16d66b0a1cbf9ec505e85a3fa0c7dffd3dd0cdd9d3dddbb9906160df24af1", "https://esm.sh/v135/use-sidecar@1.1.2/X-YS9yZWFjdC1kb206cHJlYWN0QDEwLjI0LjMvY29tcGF0LHJlYWN0OnByZWFjdEAxMC4yNC4zL2NvbXBhdA/denonext/dist/es2015/renderProp.js": "52010704e46a1165598167930a149dabb590b5c7c9eaaea09ae884ba9d8e0fba", "https://esm.sh/v135/use-sidecar@1.1.2/X-YS9yZWFjdC1kb206cHJlYWN0QDEwLjI0LjMvY29tcGF0LHJlYWN0OnByZWFjdEAxMC4yNC4zL2NvbXBhdA/denonext/use-sidecar.mjs": "4719a7a55106baaf9d154efa21ae86d829b5313a6c8bc4787bed88888af9b8ec", - "https://esm.sh/v135/use-sidecar@1.1.2/X-ZS9yZWFjdCxyZWFjdC1kb20/es2022/use-sidecar.mjs": "68f4b0afe0a5f7c9d74f6b8fd90fddad873c737df7dd2deba7f885b0484ed619" + "https://esm.sh/v135/use-sidecar@1.1.2/X-ZS9yZWFjdCxyZWFjdC1kb20/es2022/use-sidecar.mjs": "68f4b0afe0a5f7c9d74f6b8fd90fddad873c737df7dd2deba7f885b0484ed619", + "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/_Symbol.js": "631160c3c0cbd05ec8a3d1934ded4a312504a29f04a00be2b29372d00dd6bc6d", + "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/_baseGetTag.js": "3a9eebe37ba231eff0380b5f76ac5b5fcee4590665642fd052d77aa51c7d063f", + "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/_baseTrim.js": "8cce4af7b95677ab2c74cc39cac7abb359eaab9515427191974f5edd69ad5a71", + "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/_freeGlobal.js": "0b65c37b3c1ce6d1800cb59a330dde73f1009f0d10eeaf8fd45f7607b87db4c5", + "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/_getRawTag.js": "0023dec54160317b70d52df1d7918638bc16a2869b1bf355f0a4f3e755aa6faf", + "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/_objectToString.js": "8f1bb6043dc27219e71dfae28900a7f214a0856118a628efeb120169fe46fe8c", + "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/_root.js": "df58ff96c454ca91ace20d20e6af49b354c70dfba7e737adc00cd23e8ff77168", + "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/_trimmedEndIndex.js": "1ff25e476022aa45aa96dbea87228e3ff709c1f3b8b82561b7f040279575a2ef", + "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/debounce.js": "d5f2c62200af44e14130d0018a27a47b0d6256220ea41b35b8d8fd0807805030", + "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/isObject.js": "fc44c8f265db1492ea04f777d9e2d8598b44d481f5eb38360cb58c1e45b8cbd9", + "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/isObjectLike.js": "e45d69136695e8568c6fb3c7327f96ac1a8ff7284b1b22f26fb4654255fd0c6c", + "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/isSymbol.js": "f0dc1666c3cec2306cd4fd0f63a9a7ab1f25ed21d2db6664b1edc81bd3641a41", + "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/now.js": "1304c9968c6c069d6529465225da0dbccf18055c0e340eda213ce6c47565a58f", + "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/throttle.js": "d236ef311beb5042f68688ddc473e473edfe9be3b1ec5806431ad97828f4ac16", + "https://raw.githubusercontent.com/lodash/lodash/4.17.21-es/toNumber.js": "05f8ad055069ca69ac0c91112a70906367e167a088bd4d6b84f15cb0b100a2e0" }, "workspace": { "dependencies": [ diff --git a/hooks/utils/useShowHeader.ts b/hooks/utils/useShowHeader.ts index 6808bcd..c201986 100644 --- a/hooks/utils/useShowHeader.ts +++ b/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) } }, []) diff --git a/routes/[locale]/(default)/index.tsx b/routes/[locale]/(default)/index.tsx index 5c033a4..13827c1 100644 --- a/routes/[locale]/(default)/index.tsx +++ b/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() }, })