From ce997790ab57f16064378c3b50781906b58372dd Mon Sep 17 00:00:00 2001
From: Rene Haas <king-sora@hotmail.de>
Date: Fri, 4 Nov 2022 01:00:11 +0100
Subject: [PATCH] use debounce for window resize

---
 packages/overlayscrollbars/src/environment.ts      |  5 ++---
 .../overlayscrollbars/src/overlayscrollbars.ts     |  8 ++++++--
 .../src/setups/structureSetup/structureSetup.ts    | 14 +++-----------
 3 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/packages/overlayscrollbars/src/environment.ts b/packages/overlayscrollbars/src/environment.ts
index 0e49176..b235dfd 100644
--- a/packages/overlayscrollbars/src/environment.ts
+++ b/packages/overlayscrollbars/src/environment.ts
@@ -17,7 +17,7 @@ import {
   createCache,
   equalXY,
   createEventListenerHub,
-  selfClearTimeout,
+  debounce,
 } from '~/support';
 import {
   classNameEnvironment,
@@ -183,7 +183,6 @@ const createEnvironment = (): InternalEnvironment => {
   const envDOM = createDOM(`<div class="${classNameEnvironment}"><div></div></div>`);
   const envElm = envDOM[0] as HTMLElement;
   const envChildElm = envElm.firstChild as HTMLElement;
-  const [requestResizeAnimationFrame] = selfClearTimeout();
   const [addEvent, , triggerEvent] = createEventListenerHub<EnvironmentEventMap>();
   const [updateNativeScrollbarSizeCache, getNativeScrollbarSizeCache] = createCache(
     {
@@ -251,7 +250,7 @@ const createEnvironment = (): InternalEnvironment => {
   // needed in case content has css viewport units
   windowAddEventListener(
     'resize',
-    requestResizeAnimationFrame.bind(0, triggerEvent.bind(0, 'r', []))
+    debounce(triggerEvent.bind(0, 'r', []), { _timeout: 33, _maxDelay: 99 })
   );
 
   if (!nativeScrollbarsHiding && (!nativeScrollbarsOverlaid.x || !nativeScrollbarsOverlaid.y)) {
diff --git a/packages/overlayscrollbars/src/overlayscrollbars.ts b/packages/overlayscrollbars/src/overlayscrollbars.ts
index 89029be..f2ee169 100644
--- a/packages/overlayscrollbars/src/overlayscrollbars.ts
+++ b/packages/overlayscrollbars/src/overlayscrollbars.ts
@@ -237,7 +237,8 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = (
   options?: PartialOptions,
   eventListeners?: EventListeners
 ) => {
-  const { _getDefaultOptions, _getDefaultInitialization, _addZoomListener } = getEnvironment();
+  const { _getDefaultOptions, _getDefaultInitialization, _addZoomListener, _addResizeListener } =
+    getEnvironment();
   const plugins = getPlugins();
   const targetIsElement = isHTMLElement(target);
   const instanceTarget = targetIsElement ? target : target.target;
@@ -270,10 +271,13 @@ export const OverlayScrollbars: OverlayScrollbarsStatic = (
     );
     const update = (changedOptions: PartialOptions, force?: boolean): boolean =>
       updateStructure(changedOptions, !!force);
-    const removeZoomListener = _addZoomListener(update.bind(0, {}, true));
+    const forceUpdate = update.bind(0, {}, true);
+    const removeZoomListener = _addZoomListener(forceUpdate);
+    const removeResizeListener = _addResizeListener(forceUpdate);
     const destroy = (canceled?: boolean) => {
       removeInstance(instanceTarget);
       removeZoomListener();
+      removeResizeListener();
 
       destroyScrollbars();
       destroyStructure();
diff --git a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts
index be0fe12..fb56640 100644
--- a/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts
+++ b/packages/overlayscrollbars/src/setups/structureSetup/structureSetup.ts
@@ -1,4 +1,3 @@
-import { getEnvironment } from '~/environment';
 import { createEventListenerHub, isEmptyObject, keys, scrollLeft, scrollTop } from '~/support';
 import { createState, createOptionCheck } from '~/setups/setups';
 import { createStructureSetupElements } from '~/setups/structureSetup/structureSetup.elements';
@@ -70,7 +69,6 @@ export const createStructureSetup = (
   target: InitializationTarget,
   options: ReadonlyOptions
 ): Setup<StructureSetupState, StructureSetupStaticState, [], boolean> => {
-  const { _addResizeListener } = getEnvironment();
   const checkOptionsFallback = createOptionCheck(options, {});
   const state = createState(initialStructureSetupUpdateState);
   const [addEvent, removeEvent, triggerEvent] = createEventListenerHub<StructureSetupEventMap>();
@@ -89,15 +87,10 @@ export const createStructureSetup = (
     }
     return changed;
   };
-  const updateWithHints = (updateHints: Partial<StructureSetupUpdateHints>) =>
-    triggerUpdateEvent(updateStructure(checkOptionsFallback, updateHints), {}, false);
   const [destroyObservers, appendObserverElements, updateObservers, updateObserversOptions] =
-    createStructureSetupObservers(elements, setState, updateWithHints);
-  const removeResizeListener = _addResizeListener(
-    updateWithHints.bind(0, {
-      _contentMutation: true,
-    })
-  );
+    createStructureSetupObservers(elements, setState, (updateHints) =>
+      triggerUpdateEvent(updateStructure(checkOptionsFallback, updateHints), {}, false)
+    );
 
   const structureSetupState = getState.bind(0) as (() => StructureSetupState) &
     StructureSetupStaticState;
@@ -130,7 +123,6 @@ export const createStructureSetup = (
       removeEvent();
       destroyObservers();
       destroyElements();
-      removeResizeListener();
     },
   ];
 };