investigating other approaches to removing page hash

TODO: look at https://github.com/gatsbyjs/gatsby/issues/19401

package.json

@@ -41,6 +41,7 @@
     "gatsby-source-filesystem": "^5.0.0",
     "gatsby-transformer-sharp": "^5.0.0",
     "kebab-case": "^1.0.1",
+    "lodash.debounce": "^4.0.8",
     "node-iptc": "^1.0.5",
     "node-vibrant": "3.1.6",
     "postcss": "^8.4.19",
@@ -60,6 +61,7 @@
   },
   "devDependencies": {
     "@types/chroma-js": "^2.1.4",
+    "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^18.8.3",
     "@types/ramda": "^0.28.15",
     "@types/react": "^18.0.21",

src/pages/photogallery.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as R from "ramda";
 import { graphql, Link, navigate, PageProps } from "gatsby";
 import { Helmet } from "react-helmet";
+import debounce from "lodash.debounce";
 // import { Picker, Item } from "@adobe/react-spectrum";
 
 import MasonryGallery from "../components/MasonryGallery";
@@ -86,31 +87,26 @@ const GalleryPage = ({
     [filterKeyword, hash, showDebug]
   );
 
-  const removeHash = React.useCallback(() => {
-    if (!hash.length) {
-      return;
-    }
-    // const url = new URL(
-    //   typeof window !== "undefined"
-    //     ? window.location.href.toString()
-    //     : "https://chuckdries.com/photogallery/"
-    // );
+  const removeHash = React.useCallback(
+    () => {
+      if (!hash.length) {
+        return;
+      }
+      navigate(
+        getGalleryPageUrl({ sortKey, keyword: filterKeyword, showDebug }, ""),
+        { replace: true, state: { suppressAutoscroll: true } }
+      );
+      // window.removeEventListener("scroll", removeHash);
+    },
+    [hash, sortKey, filterKeyword, showDebug]
+  );
 
-    // url.hash = "";
-    // window.history.replaceState(null, "", url.href.toString());
-    navigate(getGalleryPageUrl({ sortKey, keyword: filterKeyword, showDebug}, ""), { replace: true })
-    window.removeEventListener("wheel", removeHash);
-    window.removeEventListener("touchmove", removeHash);
-  }, [hash, sortKey, filterKeyword, showDebug]);
-
-  React.useEffect(() => {
-    window.addEventListener("wheel", removeHash);
-    window.addEventListener("touchmove", removeHash);
-    return () => {
-      window.removeEventListener("wheel", removeHash);
-      window.removeEventListener("touchmove", removeHash);
-    }
-  }, [removeHash]);
+  // React.useEffect(() => {
+  //   window.addEventListener("scroll", removeHash);
+  //   return () => {
+  //     window.removeEventListener("scroll", removeHash);
+  //   };
+  // }, [removeHash]);
 
   React.useEffect(() => {
     // hacky but it works for now
@@ -124,12 +120,18 @@ const GalleryPage = ({
         console.log("⚠️failed to find hash");
         return;
       }
-      console.log("scrolling into view manually");
+      console.log("scrolling into view manually", el.offsetTop);
       el.scrollIntoView({
         block: hash.startsWith("all") ? "start" : "center",
       });
+      setTimeout(() => {
+        removeHash();
+      }, 500)
     });
-  }, [hash]);
+  }, [
+    hash,
+    removeHash
+  ]);
 
   const images: GalleryImage[] = React.useMemo(() => {
     const sort =

src/styles/global.css

@@ -92,6 +92,7 @@
 
 body {
   @apply bg-gray-100;
+  overflow: auto;
   /* @apply bg-black; */
   /* @apply text-white; */
 }

src/utils.ts

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useRef } from "react";
 
 import { pathOr } from "ramda";
 // import kebabCase from 'lodash/kebabCase';
@@ -150,3 +150,29 @@ export function compareDates<T>(
   const diff = -1 * (date1.getTime() - date2.getTime());
   return diff;
 }
+
+
+/**
+ * Returns a memoized function that will only call the passed function when it hasn't been called for the wait period
+ * @param func The function to be called
+ * @param wait Wait period after function hasn't been called for
+ * @returns A memoized function that is debounced
+ */
+export const useDebouncedCallback = (func: Function, wait: number) => {
+  // Use a ref to store the timeout between renders
+  // and prevent changes to it from causing re-renders
+  const timeout = useRef<ReturnType<typeof setTimeout>>();
+
+  return useCallback(
+    (...args: any) => {
+      const later = () => {
+        clearTimeout(timeout.current!);
+        func(...args);
+      };
+
+      clearTimeout(timeout.current ?? undefined);
+      timeout.current = setTimeout(later, wait);
+    },
+    [func, wait]
+  );
+};

yarn.lock

@@ -4560,6 +4560,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash.debounce@npm:^4.0.7":
+  version: 4.0.7
+  resolution: "@types/lodash.debounce@npm:4.0.7"
+  dependencies:
+    "@types/lodash": "*"
+  checksum: e873b2d77f89010876baba3437ef826b17221b98948e00b5590828334a481dea1c8f9d28543210e564adc53199584f42c3cb171f8b6c3614fefc0b4e0888679c
+  languageName: node
+  linkType: hard
+
+"@types/lodash@npm:*":
+  version: 4.14.191
+  resolution: "@types/lodash@npm:4.14.191"
+  checksum: ba0d5434e10690869f32d5ea49095250157cae502f10d57de0a723fd72229ce6c6a4979576f0f13e0aa9fbe3ce2457bfb9fa7d4ec3d6daba56730a51906d1491
+  languageName: node
+  linkType: hard
+
 "@types/lodash@npm:^4.14.53":
   version: 4.14.170
   resolution: "@types/lodash@npm:4.14.170"
@@ -6464,6 +6480,7 @@ __metadata:
     "@react-spectrum/provider": ^3.6.0
     "@spectrum-icons/workflow": ^4.0.4
     "@types/chroma-js": ^2.1.4
+    "@types/lodash.debounce": ^4.0.7
     "@types/node": ^18.8.3
     "@types/ramda": ^0.28.15
     "@types/react": ^18.0.21
@@ -6495,6 +6512,7 @@ __metadata:
     gatsby-source-filesystem: ^5.0.0
     gatsby-transformer-sharp: ^5.0.0
     kebab-case: ^1.0.1
+    lodash.debounce: ^4.0.8
     node-iptc: ^1.0.5
     node-vibrant: 3.1.6
     postcss: ^8.4.19