From 969fddc5811f6231b3247abe4992f0cb67585db7 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Mon, 30 Jan 2023 20:51:06 +0800 Subject: [PATCH] Time for use-debounce Try a leading debounce here --- package-lock.json | 18 ++++++++++++++ package.json | 1 + src/components/compose.jsx | 2 +- src/pages/home.jsx | 40 +++++++++++++++++-------------- src/pages/status.jsx | 2 +- src/utils/useDebouncedCallback.js | 23 ------------------ 6 files changed, 43 insertions(+), 43 deletions(-) delete mode 100644 src/utils/useDebouncedCallback.js diff --git a/package-lock.json b/package-lock.json index 90b8be8d..8c3d0307 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "swiped-events": "~1.1.7", "toastify-js": "~1.12.0", "uid": "~2.0.1", + "use-debounce": "~9.0.3", "use-resize-observer": "~9.1.0", "valtio": "~1.9.0" }, @@ -5466,6 +5467,17 @@ "punycode": "^2.1.0" } }, + "node_modules/use-debounce": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-9.0.3.tgz", + "integrity": "sha512-FhtlbDtDXILJV7Lix5OZj5yX/fW1tzq+VrvK1fnT2bUrPOGruU9Rw8NCEn+UI9wopfERBEZAOQ8lfeCJPllgnw==", + "engines": { + "node": ">= 10.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/use-resize-observer": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz", @@ -9854,6 +9866,12 @@ "punycode": "^2.1.0" } }, + "use-debounce": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-9.0.3.tgz", + "integrity": "sha512-FhtlbDtDXILJV7Lix5OZj5yX/fW1tzq+VrvK1fnT2bUrPOGruU9Rw8NCEn+UI9wopfERBEZAOQ8lfeCJPllgnw==", + "requires": {} + }, "use-resize-observer": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz", diff --git a/package.json b/package.json index 4c8d49e1..b0600751 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "swiped-events": "~1.1.7", "toastify-js": "~1.12.0", "uid": "~2.0.1", + "use-debounce": "~9.0.3", "use-resize-observer": "~9.1.0", "valtio": "~1.9.0" }, diff --git a/src/components/compose.jsx b/src/components/compose.jsx index ecea1d89..fd170e93 100644 --- a/src/components/compose.jsx +++ b/src/components/compose.jsx @@ -7,6 +7,7 @@ import { useEffect, useMemo, useRef, useState } from 'preact/hooks'; import { useHotkeys } from 'react-hotkeys-hook'; import stringLength from 'string-length'; import { uid } from 'uid/single'; +import { useDebouncedCallback } from 'use-debounce'; import { useSnapshot } from 'valtio'; import supportedLanguages from '../data/status-supported-languages'; @@ -17,7 +18,6 @@ import openCompose from '../utils/open-compose'; import states from '../utils/states'; import store from '../utils/store'; import { getCurrentAccount, getCurrentAccountNS } from '../utils/store-utils'; -import useDebouncedCallback from '../utils/useDebouncedCallback'; import useInterval from '../utils/useInterval'; import visibilityIconsMap from '../utils/visibility-icons-map'; diff --git a/src/pages/home.jsx b/src/pages/home.jsx index 00cb8bef..4c012dc3 100644 --- a/src/pages/home.jsx +++ b/src/pages/home.jsx @@ -1,6 +1,7 @@ import { memo } from 'preact/compat'; import { useEffect, useRef, useState } from 'preact/hooks'; import { useHotkeys } from 'react-hotkeys-hook'; +import { useDebouncedCallback } from 'use-debounce'; import { useSnapshot } from 'valtio'; import Icon from '../components/icon'; @@ -10,7 +11,6 @@ import Status from '../components/status'; import db from '../utils/db'; import states, { saveStatus } from '../utils/states'; import { getCurrentAccountNS } from '../utils/store-utils'; -import useDebouncedCallback from '../utils/useDebouncedCallback'; import useScroll from '../utils/useScroll'; import useTitle from '../utils/useTitle'; @@ -119,23 +119,27 @@ function Home({ hidden }) { } const loadingStatuses = useRef(false); - const loadStatuses = useDebouncedCallback((firstLoad) => { - if (loadingStatuses.current) return; - loadingStatuses.current = true; - setUIState('loading'); - (async () => { - try { - const { done } = await fetchStatuses(firstLoad); - setShowMore(!done); - setUIState('default'); - } catch (e) { - console.warn(e); - setUIState('error'); - } finally { - loadingStatuses.current = false; - } - })(); - }, 1000); + const loadStatuses = useDebouncedCallback( + (firstLoad) => { + if (loadingStatuses.current) return; + loadingStatuses.current = true; + setUIState('loading'); + (async () => { + try { + const { done } = await fetchStatuses(firstLoad); + setShowMore(!done); + setUIState('default'); + } catch (e) { + console.warn(e); + setUIState('error'); + } finally { + loadingStatuses.current = false; + } + })(); + }, + 3000, + { leading: true, trailing: false }, + ); useEffect(() => { loadStatuses(true); diff --git a/src/pages/status.jsx b/src/pages/status.jsx index 882b07af..b2b0fffe 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -7,6 +7,7 @@ import { useEffect, useMemo, useRef, useState } from 'preact/hooks'; import { useHotkeys } from 'react-hotkeys-hook'; import { InView } from 'react-intersection-observer'; import { useLocation, useNavigate, useParams } from 'react-router-dom'; +import { useDebouncedCallback } from 'use-debounce'; import { useSnapshot } from 'valtio'; import Avatar from '../components/avatar'; @@ -20,7 +21,6 @@ import htmlContentLength from '../utils/html-content-length'; import shortenNumber from '../utils/shorten-number'; import states, { saveStatus, threadifyStatus } from '../utils/states'; import { getCurrentAccount } from '../utils/store-utils'; -import useDebouncedCallback from '../utils/useDebouncedCallback'; import useScroll from '../utils/useScroll'; import useTitle from '../utils/useTitle'; diff --git a/src/utils/useDebouncedCallback.js b/src/utils/useDebouncedCallback.js deleted file mode 100644 index c40a3f13..00000000 --- a/src/utils/useDebouncedCallback.js +++ /dev/null @@ -1,23 +0,0 @@ -import { useCallback, useRef } from 'preact/hooks'; - -export default function useDebouncedCallback( - callback, - delay, - dependencies = [], -) { - const timeout = useRef(); - - const comboDeps = dependencies - ? [callback, delay, ...dependencies] - : [callback, delay]; - - return useCallback((...args) => { - if (timeout.current != null) { - clearTimeout(timeout.current); - } - - timeout.current = setTimeout(() => { - callback(...args); - }, delay); - }, comboDeps); -}