-
-
Notifications
You must be signed in to change notification settings - Fork 717
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Debounce ResizeObserver's call to map.resize() #2973
Conversation
Codecov ReportPatch coverage:
Additional details and impacted files@@ Coverage Diff @@
## main #2973 +/- ##
==========================================
+ Coverage 75.01% 75.03% +0.01%
==========================================
Files 240 240
Lines 19110 19124 +14
Branches 4311 4315 +4
==========================================
+ Hits 14336 14350 +14
Misses 4774 4774
☔ View full report in Codecov by Sentry. |
this._resizeObserver = new ResizeObserver((entries) => { | ||
let resizeDebounceTimerId: ReturnType<typeof setTimeout> | null = null; | ||
const resizeDebounceTime = 30; | ||
const shouldResize = () => this._trackResize && !this._removed; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Calling resize() is no longer necessarily synchronous, so need to check if the map has been removed each time
@@ -638,14 +638,33 @@ export class Map extends Camera { | |||
if (typeof window !== 'undefined') { | |||
addEventListener('online', this._onWindowOnline, false); | |||
let initialResizeEventCaptured = false; | |||
this._resizeObserver = new ResizeObserver((entries) => { | |||
let resizeDebounceTimerId: ReturnType<typeof setTimeout> | null = null; | |||
const resizeDebounceTime = 30; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hard-coded value, at least for now
if (resizeDebounceTimerId) { | ||
clearTimeout(resizeDebounceTimerId); | ||
} else if (shouldResize()) { | ||
resizedImmediately = true; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If nothing was queued, then resize immediately and force the next resize to wait
}, resizeDebounceTime); | ||
} | ||
if (!resizedImmediately && shouldResize()) { | ||
resizeDebounceTimerId = setTimeout(() => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If an immediate resize didn't happen, then queue one
I think there's a throttle utility somewhere in the code. |
There is, but throttle and debounce are not the same, and debounce seemed more appropriate here as it will wait while the user is resizing. If you think throttle would be better though, I could switch it, but the throttle utility would need an update to handle arguments to the function. What do you think about using lodash for these? I know lodash is large, but it is possible to pull in only what we want. |
I would like to avoid adding lodash just for this although it is super useful in general. |
I can try using throttle instead and let you know. The time might need to be higher than for debounce too though, since it's "guaranteed" to fire that often. Understood on lodash. The only reason I mentioned it is for the reason you stated: it's well-tested and maintained. |
There are a few problems with the existing throttle() implementation in the codebase, but I think they can be overcome.
The only other usage of throttle() so far is in the Hash class. I think that might benefit from a leading-edge execution as well, so I can go ahead and change throttle() to invoke immediately the first time, unless you think that's a problem. |
As long as the code is written in the utilities file I'm fine with the solution 🙂 |
Launch Checklist
CHANGELOG.md
under the## main
section.