Time for use-debounce

Try a leading debounce here
This commit is contained in:
Lim Chee Aun 2023-01-30 20:51:06 +08:00
parent 509aac11ab
commit 969fddc581
6 changed files with 43 additions and 43 deletions

18
package-lock.json generated
View file

@ -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",

View file

@ -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"
},

View file

@ -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';

View file

@ -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);

View file

@ -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';

View file

@ -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);
}