added functionality for a 'scroll buffer' that prevents the hash from being checked or changed for about 1 second after a navlink is clicked. This prevents the scroll from stuttering or restarting.

Author: JS-GitRepo

src/components/HVContent.tsx

@@ -1,4 +1,10 @@
-import { MutableRefObject, useContext, useEffect, useState } from "react";
+import {
+  MutableRefObject,
+  SetStateAction,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { animated, useTransition } from "react-spring";
 import "./styles/HVContent.css";
 import Deerfall from "./projects/Deerfall";
@@ -22,6 +28,7 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
   const navigate = useNavigate();
   // - - - - CONTEXT - - - -
   const { scrollRefs, hueRotation } = useContext(AppContext);
+  const [scrollIsBuffering, setScrollIsBuffering] = useState(false);
   const observerOptions: IntersectionObserverInit = {
     threshold: 0.5,
     root: null,
@@ -107,26 +114,46 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
   }, [allParams]);
 
   useEffect(() => {
-    if (mediaScrollObserver?.isIntersecting) {
+    if (mediaScrollObserver?.isIntersecting && !scrollIsBuffering) {
       navigate(`${location.pathname}#media`);
     }
   }, [mediaScrollObserver?.isIntersecting]);
 
   useEffect(() => {
-    if (techScrollObserver?.isIntersecting)
+    if (techScrollObserver?.isIntersecting && !scrollIsBuffering)
       navigate(`${location.pathname}#tech`);
   }, [techScrollObserver?.isIntersecting]);
 
   useEffect(() => {
-    if (blogScrollObserver?.isIntersecting)
+    if (blogScrollObserver?.isIntersecting && !scrollIsBuffering)
       navigate(`${location.pathname}#blog`);
   }, [blogScrollObserver?.isIntersecting]);
 
   useEffect(() => {
-    if (aboutScrollObserver?.isIntersecting)
+    if (aboutScrollObserver?.isIntersecting && !scrollIsBuffering)
       navigate(`${location.pathname}#about`);
   }, [aboutScrollObserver?.isIntersecting]);
 
+  useEffect(() => {
+    if (location.hash === "#media") {
+      scrollToElement(scrollRefs.media);
+    } else if (location.hash === "#tech") {
+      scrollToElement(scrollRefs.tech);
+    } else if (location.hash === "#about") {
+      scrollToElement(scrollRefs.about);
+    } else if (location.hash === "#blog") {
+      scrollToElement(scrollRefs.blog);
+    }
+    console.log(location.hash);
+  }, [location.hash]);
+
+  useEffect(() => {
+    if (scrollIsBuffering) {
+      setTimeout(() => setScrollIsBuffering(false), 800);
+    }
+    console.log(scrollIsBuffering);
+  }, [scrollIsBuffering]);
+
   return (
     <main className='HVContent'>
       {isIntro ? (
@@ -138,6 +165,7 @@ const HVContent = ({ project, isIntro, allParams }: Props) => {
           scrollRefs={scrollRefs}
           hueRotation={hueRotation}
           scrollToElement={scrollToElement}
+          setScrollIsBuffering={setScrollIsBuffering}
         />
       )}
 

src/components/HVSideNav.tsx

@@ -6,13 +6,15 @@ import blogIcon from "../img/navIcons/blog.png";
 import { animated, useSpring } from "react-spring";
 import { useEffect, useState } from "react";
 import { ScrollRefs, HueRotation } from "../models/Models";
+import { useLocation, useNavigate } from "react-router-dom";
 
 interface Props {
   scrollRefs: ScrollRefs;
   hueRotation: HueRotation;
   isPortfolio: boolean;
   allParams: string[];
   scrollToElement: (ref: React.MutableRefObject<any>) => void;
+  setScrollIsBuffering: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const HVSideNav = ({
@@ -21,25 +23,37 @@ const HVSideNav = ({
   scrollRefs,
   hueRotation,
   scrollToElement,
+  setScrollIsBuffering,
 }: Props) => {
   const [hlNav, setHLNav] = useState("media");
+  const navigate = useNavigate();
+  const location = useLocation();
   const navSizeChange = useSpring({
     from: { height: "150px" },
     to: { height: "110px" },
     config: { mass: 1, tension: 200, friction: 15 },
     reverse: isPortfolio,
   });
 
+  // const handleNavClick = (
+  //   ref: React.MutableRefObject<any>,
+  //   navName: string
+  // ) => {
+  //   scrollToElement(ref);
+  //   setHLNav(navName);
+  // };
+
   const handleNavClick = (
     ref: React.MutableRefObject<any>,
     navName: string
   ) => {
-    scrollToElement(ref);
+    navigate(`${location.pathname}#${navName}`);
+    setScrollIsBuffering(true);
     setHLNav(navName);
   };
 
   useEffect(() => {
-    scrollRefs.media.current?.scrollIntoView({ behavior: "smooth" });
+    navigate(`${location.pathname}#media`);
     setHLNav("media");
   }, [allParams[1]]);