observer scroll debounce, installed lodash.debounce and types

Author: nemanjam

docs/working-notes/todo4.md

@@ -102,9 +102,10 @@ extract types
 
 -----
 scroll to top, has bug in article mdx layout, bottom position and horizontal scroll
-add delay to fetch new page
+add delay to fetch new page, debounce
 phone tap on backdrop doesnt close lightbox
 responsive page size
+usehooks, isVisible or observer hook for infinite scroll, thumbnail, scroll to top
 ```
 
 

package.json

@@ -47,6 +47,7 @@
     "feed": "^4.2.2",
     "giscus": "^1.6.0",
     "github-slugger": "^2.0.0",
+    "lodash.debounce": "^4.0.8",
     "mdast-util-to-string": "^4.0.0",
     "object-treeify": "^5.0.1",
     "photoswipe": "^5.4.4",
@@ -66,6 +67,7 @@
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
     "@iconify-json/mdi": "^1.2.3",
     "@tailwindcss/typography": "^0.5.16",
+    "@types/lodash.debounce": "^4.0.9",
     "@types/mdast": "^4.0.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

src/components/react/NewGallery.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 
+import debounce from 'lodash.debounce';
 import PhotoSwipeLightbox from 'photoswipe/lightbox';
 
 import type { ImageProps } from '@/libs/gallery/transform';
 import type { FC } from 'react';
 
 import 'photoswipe/style.css';
 
-import { GALLERY_ID } from '@/constants/gallery';
+import { GALLERY } from '@/constants/gallery';
 import { cn } from '@/utils/styles';
 
 interface Props {
@@ -16,10 +17,7 @@ interface Props {
 
 type LoadedStates = Record<string, boolean>;
 
-// step
-const PAGE_SIZE = 3 as const; // Todo: make it responsive
-// page dependency in useEffect is more important
-const INITIAL_PAGE = 1 as const;
+const { PAGE_SIZE, INITIAL_PAGE, OBSERVER_DEBOUNCE, GALLERY_ID } = GALLERY;
 
 const fetchImagesUpToPage = (images: ImageProps[], nextPage: number): ImageProps[] => {
   const endIndex = nextPage * PAGE_SIZE;
@@ -55,11 +53,12 @@ const NewGallery: FC<Props> = ({ images }) => {
         setPage((prevPage) => prevPage + 1);
       }
     };
+    const debouncedCallback = debounce(callback, OBSERVER_DEBOUNCE);
     const options: IntersectionObserverInit = { threshold: 1 };
-    const observer = new IntersectionObserver(callback, options);
 
-    const observerRef = observerTarget.current;
+    const observer = new IntersectionObserver(debouncedCallback, options);
 
+    const observerRef = observerTarget.current;
     if (observerRef) observer.observe(observerRef);
 
     return () => {

src/constants/gallery.ts

@@ -1,3 +1,12 @@
 export const EXCLUDE_IMAGES = ['avatar1.jpg', 'square-night1.jpg'] as const;
 
-export const GALLERY_ID = 'my-gallery' as const;
+export const GALLERY = {
+  GALLERY_ID: 'my-gallery',
+  // Todo: make it responsive
+  /** step. */
+  PAGE_SIZE: 3,
+  /** page dependency in useEffect is more important */
+  INITIAL_PAGE: 1,
+  /** fine tuned for scroll */
+  OBSERVER_DEBOUNCE: 150,
+} as const;

yarn.lock

@@ -1401,6 +1401,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.16"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.16.tgz#94ae78fab4a38d73086e962d0b65c30d816bfb0a"
+  integrity sha512-HX7Em5NYQAXKW+1T+FiuG27NGwzJfCX3s1GjOa7ujxZa52kjJLOr4FUxT+giF6Tgxv1e+/czV/iTtBw27WTU9g==
+
 "@types/mdast@^4.0.0", "@types/mdast@^4.0.3":
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-4.0.4.tgz#7ccf72edd2f1aa7dd3437e180c64373585804dd6"
@@ -4139,6 +4151,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"