fix: update voteBtn sparks container on resize

src/Components/VoteButton/VoteButton.tsx

@@ -1,6 +1,6 @@
 import { MdLocalFireDepartment } from 'react-icons/md'
 import Button from 'src/Components/Button/Button'
-import { useAppSelector, usePressHolder } from 'src/utils/hooks'
+import { useAppSelector, usePressHolder, useResizeListener } from 'src/utils/hooks'
 import { ComponentProps, useRef, useState } from 'react'
 import styles from './styles.module.scss'
 import { random, randomItem, numberFormatter } from 'src/utils/helperFunctions'
@@ -156,6 +156,10 @@ export default function VoteButton({
         setBtnBoundingRect(btnContainerRef.current.getBoundingClientRect())
     })
 
+    useResizeListener(() => {
+        setBtnBoundingRect(btnContainerRef.current.getBoundingClientRect())
+    }, { debounce: 300 })
+
     return (
         <button
             onMouseDown={handlePressDown}
@@ -215,6 +219,7 @@ export default function VoteButton({
 
             <Portal id='effects-container'>
                 <div
+                    className='absolute pointer-events-none'
                     style={btnBoundingRect && {
                         position: 'absolute',
                         top: btnBoundingRect.top + window.scrollY,

src/utils/hooks/useResizeListener.ts

@@ -1,19 +1,17 @@
-import { useEffect } from "react";
-import _throttle from "lodash.throttle";
+import { useDebouncedCallback, useMountEffect } from "@react-hookz/web";
 
 export const useResizeListener = (
   listener: () => void,
-  options: { throttleValue?: number } = {}
+  options: { debounce?: number } = {}
 ) => {
-  options.throttleValue = options.throttleValue ?? 250;
-  useEffect(() => {
-    const func = _throttle(listener, 250);
-    func();
+  options.debounce = options.debounce ?? 250;
 
-    window.addEventListener("resize", listener);
+  const func = useDebouncedCallback(listener, [], options.debounce)
+  useMountEffect(() => {
+    window.addEventListener("resize", func);
 
     return () => {
-      window.removeEventListener("resize", listener);
+      window.removeEventListener("resize", func);
     };
-  }, [listener]);
+  });
 };