Allow for seeding useVisible with preferred default

2 files changed, 15 insertions, 9 deletions

diff --git a/thallium-frontend/src/components/CartStatus.tsx b/thallium-frontend/src/components/CartStatus.tsx
index 3524224..d65697a 100644
--- a/thallium-frontend/src/components/CartStatus.tsx
+++ b/thallium-frontend/src/components/CartStatus.tsx
@@ -48,7 +48,7 @@ const CartStatus = () => {
     const price = cart.cart.reduce((acc, item) => acc + (parseFloat(item.estPrice) * item.quantity), 0);
 
     const staticButtonRef = useRef<HTMLButtonElement>(null);
-    const buttonVisible = useVisible(staticButtonRef);
+    const buttonVisible = useVisible(staticButtonRef, true);
 
     const checkoutMsg = total > 0 ? "Confirm & Checkout >" : "Add some items to proceed to checkout";
 
diff --git a/thallium-frontend/src/utils/hooks.ts b/thallium-frontend/src/utils/hooks.ts
index 73cd814..79486a3 100644
--- a/thallium-frontend/src/utils/hooks.ts
+++ b/thallium-frontend/src/utils/hooks.ts
@@ -1,18 +1,24 @@
 import { useState, useEffect, useMemo } from "react";
 import { type RefObject } from "react";
 
-export function useVisible(ref: RefObject<HTMLElement>) {
-  const [isVisible, setVisible] = useState(false);
+export function useVisible(ref: RefObject<HTMLElement>, initialState: boolean = false) {
+  const [isVisible, setVisible] = useState(initialState);
+
+  const intersectionObserver = useMemo(() => {
+    return new IntersectionObserver(
+      ([entry]) => { setVisible(entry.isIntersecting) },
+      {
+        threshold: 0.5
+      }
+    )
+  }, [ref]);
 
-  useEffect(() => {
-    const observer = new IntersectionObserver(
-        ([entry]) => { setVisible(entry.isIntersecting); }
-    );
 
+  useEffect(() => {
     if (ref.current)
-      observer.observe(ref.current);
+      intersectionObserver.observe(ref.current);
 
-    return () => { observer.disconnect(); };
+    return () => { intersectionObserver.disconnect(); };
   }, [ref]);
 
   return isVisible;