Implement scroll position saving with debouncing in dashboard, improving performance and user experience

Author: eduardolat

internal/view/static/js/dashboard-aside-scroll.js

@@ -4,10 +4,15 @@ export function initDashboardAsideScroll () {
 
   if (!el) return
 
-  window.addEventListener('beforeunload', function () {
-    const scrollPosition = el.scrollTop
-    localStorage.setItem(key, scrollPosition)
-  })
+  const saveScrollPosition = window.debounce(
+    () => {
+      const scrollPosition = el.scrollTop
+      localStorage.setItem(key, scrollPosition)
+      console.log(scrollPosition)
+    },
+    200
+  )
+  el.addEventListener('scroll', saveScrollPosition)
 
   document.addEventListener('DOMContentLoaded', function () {
     const scrollPosition = localStorage.getItem(key)

internal/view/static/js/init-helpers.js

@@ -1,4 +1,14 @@
 export function initHelpers () {
+  function debounce (fn, delayMilliseconds) {
+    let timeoutInstance
+    return function (...args) {
+      clearTimeout(timeoutInstance)
+      timeoutInstance = setTimeout(() => {
+        fn.apply(this, args)
+      }, delayMilliseconds)
+    }
+  }
+
   function copyToClipboard (textToCopy) {
     const successMessage = 'Text copied'
     const errorMessage = 'Error copying text'
@@ -58,6 +68,7 @@ export function initHelpers () {
     }
   }
 
+  window.debounce = debounce
   window.copyToClipboard = copyToClipboard
   window.textareaAutoGrow = textareaAutoGrow
   window.formatJson = formatJson