Debounce localstorage save (#328)

I profiled dragging and it looks like it takes ~3ms to save to localStorage a smallish scene and we're doing it twice per mousemove. Let's debounce so we don't pay that cost on every mouse move.

Stole the implementation from #220 which got reverted.
This commit is contained in:
Christopher Chedeau 2020-01-11 20:15:41 -08:00 committed by GitHub
parent c745fd4e5e
commit 3db7d69849
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 2 deletions

View file

@ -28,7 +28,7 @@ import { renderScene } from "./renderer";
import { AppState } from "./types";
import { ExcalidrawElement, ExcalidrawTextElement } from "./element/types";
import { getDateTime, isInputLike, measureText } from "./utils";
import { getDateTime, isInputLike, measureText, debounce } from "./utils";
import { KEYS, META_KEY, isArrowKey } from "./keys";
import { findShapeByKey, shapesShortcutKeys } from "./shapes";
@ -1016,13 +1016,17 @@ export class App extends React.Component<{}, AppState> {
}
}
private saveDebounced = debounce(() => {
saveToLocalStorage(elements, this.state);
}, 300);
componentDidUpdate() {
renderScene(elements, this.rc!, this.canvas!, {
scrollX: this.state.scrollX,
scrollY: this.state.scrollY,
viewBackgroundColor: this.state.viewBackgroundColor
});
saveToLocalStorage(elements, this.state);
this.saveDebounced();
if (history.isRecording()) {
history.pushEntry(history.generateCurrentEntry(elements));
history.clearRedoStack();