Page MenuHomePhabricator

Debounce the Resize Listener in SearchResults.vue
Closed, ResolvedPublic

Description

Per this comment from @Gilles comment in T246792:

I'm noticing an unthrottled listener to "resize" events: https://github.com/wikimedia/mediawiki-extensions-WikibaseMediaInfo/blob/master/resources/mediasearch-vue/components/SearchResults.vue#L490

That's generally a bad idea, it's going to be very resource-intensive and slow down the browser on slow devices. That event listener should be debounced.

It would be even better to find a CSS solution to whatever layout issue it's trying to solve, to avoid a resize listener altogether.

A while back we made some changes to the SearchResults grid to address some weird layout bugs (items expanding too large when they appeared last in the grid, etc). Not sure we can rely on a pure CSS solution given everything the grid needs to do, but debouncing the resize listener should be an easy way to improve performance on older/mobile devices.

Event Timeline

Change 657202 had a related patch set uploaded (by Eric Gardner; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] Debounce the getResultStyle method

https://gerrit.wikimedia.org/r/657202

Change 657202 merged by jenkins-bot:
[mediawiki/extensions/WikibaseMediaInfo@master] Debounce the getResultStyle method

https://gerrit.wikimedia.org/r/657202