debounce MutationObserver callback

Author: nemanjam

package.json

@@ -42,6 +42,7 @@
     "dotenv": "^16.4.5",
     "feed": "^4.2.2",
     "giscus": "^1.5.0",
+    "lodash.debounce": "^4.0.8",
     "mdast-util-to-string": "^4.0.0",
     "nanostores": "^0.10.3",
     "object-treeify": "^4.0.1",
@@ -60,6 +61,7 @@
     "@iconify-json/mdi": "^1.1.66",
     "@tailwindcss/typography": "^0.5.13",
     "@types/debounce": "^1.2.4",
+    "@types/lodash.debounce": "^4.0.9",
     "@types/mdast": "^4.0.3",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

src/components/react/ScrollToTop.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 
+import debounce from 'lodash.debounce';
+
 import { cn } from '@/utils/styles';
 
 import type { ReactNode } from 'react';
@@ -53,7 +55,8 @@ const ScrollToTop: React.FC<Props> = ({ children }) => {
       }
     };
 
-    const intersect = new IntersectionObserver(callback);
+    const debouncedCallback = debounce(callback, 500);
+    const intersect = new IntersectionObserver(debouncedCallback);
 
     if (topRef.current) intersect.observe(topRef.current);
     if (bottomRef.current) intersect.observe(bottomRef.current);

yarn.lock

@@ -1115,6 +1115,18 @@
   resolved "https://registry.yarnpkg.com/@types/is-empty/-/is-empty-1.2.3.tgz#a2d55ea8a5ec57bf61e411ba2a9e5132fe4f0899"
   integrity sha512-4J1l5d79hoIvsrKh5VUKVRA1aIdsOb10Hu5j3J2VfP/msDnfTdGPmNp2E1Wg+vs97Bktzo+MZePFFXSGoykYJw==
 
+"@types/lodash.debounce@^4.0.9":
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/@types/lodash.debounce/-/lodash.debounce-4.0.9.tgz#0f5f21c507bce7521b5e30e7a24440975ac860a5"
+  integrity sha512-Ma5JcgTREwpLRwMM+XwBR7DaWe96nC38uCBDFKZWbNKD+osjVzdpnUSwBcqCptrp16sSOLBAUb50Car5I0TCsQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
+  version "4.17.7"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.7.tgz#2f776bcb53adc9e13b2c0dfd493dfcbd7de43612"
+  integrity sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==
+
 "@types/mdast@^3.0.0":
   version "3.0.15"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.15.tgz#49c524a263f30ffa28b71ae282f813ed000ab9f5"
@@ -3944,6 +3956,11 @@ lodash.castarray@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
   integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
 lodash.isplainobject@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"