src/components/InfinateCanvas.tsx

@@ -10,12 +10,10 @@ import { Logo } from "./Logo"
 import { useThemeDetector } from "../utils/useThemeDetector"
 import { TextItem } from "./TextItem"
 import texts from "../signals/texts"
-import { useDebounce } from "../utils/useDebounce"
 
 export default function InfiniteCanvas() {
   const containerRef = useRef<HTMLDivElement>(null)
   const isDarkTheme = useThemeDetector()
-  const { debounce } = useDebounce()
 
   useEffect(() => {
     const initPos = getInitialPosition(canvasDimentsion)
@@ -29,24 +27,22 @@ export default function InfiniteCanvas() {
     }
 
     function _updatePosition() {
-      debounce(() => {
+      localStorage.setItem("pos", JSON.stringify({
-        localStorage.setItem("pos", JSON.stringify({
+        left: window.scrollX,
-          left: window.scrollX,
+        top: window.scrollY
-          top: window.scrollY
+      }))
-        }))
-      })
     }
 
     _updateDimensions()
     window.addEventListener("resize", _updateDimensions)
-    window.addEventListener("scroll", _updatePosition)
+    window.addEventListener("scrollend", _updatePosition)
     notes.loadLocalStorage()
     images.loadLocalStorage()
     texts.loadLocalStorage()
 
     return () => {
       window.removeEventListener("resize", _updateDimensions)
-      window.removeEventListener("scroll", _updatePosition)
+      window.removeEventListener("scrollend", _updatePosition)
     }
   }, [])