investigating other approaches to removing page hash

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

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]
+  );
+};