fix: Reduce the scroll debounce timeout to 100ms and update only if offset changes (#3182)

* fix: Reduce the scroll debounce timeout to 100ms so offsets get updated faster when the container scrolled
fixes https://github.com/excalidraw/excalidraw/issues/3175

* update changelog

* update offsets only when if it changes

* up

* Update src/components/App.tsx

Co-authored-by: David Luzar <luzar.david@gmail.com>

src/components/App.tsx

@@ -1008,7 +1008,13 @@ class App extends React.Component<ExcalidrawProps, AppState> {
   }
 
   private onScroll = debounce(() => {
-    this.setState({ ...this.getCanvasOffsets() });
+    const { offsetTop, offsetLeft } = this.getCanvasOffsets();
+    this.setState((state) => {
+      if (state.offsetLeft === offsetLeft && state.offsetTop === offsetTop) {
+        return null;
+      }
+      return { offsetTop, offsetLeft };
+    });
   }, SCROLL_TIMEOUT);
 
   // Copy/paste

src/constants.ts

@@ -94,7 +94,7 @@ export const TOUCH_CTX_MENU_TIMEOUT = 500;
 export const TITLE_TIMEOUT = 10000;
 export const TOAST_TIMEOUT = 5000;
 export const VERSION_TIMEOUT = 30000;
-export const SCROLL_TIMEOUT = 500;
+export const SCROLL_TIMEOUT = 100;
 
 export const ZOOM_STEP = 0.1;
 

src/packages/excalidraw/CHANGELOG.md

@@ -12,6 +12,16 @@ The change should be grouped under one of the below section and must contain PR
 Please add the latest change on the top under the correct section.
 -->
 
+## Unreleased
+
+## Excalidraw API
+
+### Fixes
+
+- Reduce the scroll debounce timeout to `100ms` so `offsets` gets updated faster if changed when container scrolled [#3182](https://github.com/excalidraw/excalidraw/pull/3182).
+
+---
+
 ## 0.4.1
 
 ## Excalidraw API