Time for use-debounce

Try a leading debounce here

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

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

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

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) => {
+  const loadStatuses = useDebouncedCallback(
-    if (loadingStatuses.current) return;
+    (firstLoad) => {
-    loadingStatuses.current = true;
+      if (loadingStatuses.current) return;
-    setUIState('loading');
+      loadingStatuses.current = true;
-    (async () => {
+      setUIState('loading');
-      try {
+      (async () => {
-        const { done } = await fetchStatuses(firstLoad);
+        try {
-        setShowMore(!done);
+          const { done } = await fetchStatuses(firstLoad);
-        setUIState('default');
+          setShowMore(!done);
-      } catch (e) {
+          setUIState('default');
-        console.warn(e);
+        } catch (e) {
-        setUIState('error');
+          console.warn(e);
-      } finally {
+          setUIState('error');
-        loadingStatuses.current = false;
+        } finally {
-      }
+          loadingStatuses.current = false;
-    })();
+        }
-  }, 1000);
+      })();
+    },
+    3000,
+    { leading: true, trailing: false },
+  );
 
   useEffect(() => {
     loadStatuses(true);

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

src/utils/useDebouncedCallback.js

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