improve keyboard latency in compose box

This commit is contained in:
Nolan Lawson 2018-03-12 20:18:34 -07:00
parent 136ec67d61
commit 624020dd01
2 changed files with 24 additions and 22 deletions

View file

@ -1,5 +1,5 @@
<div class="compose-box-length-gauge {{shouldAnimate ? 'should-animate' : ''}} {{overLimit ? 'over-char-limit' : ''}}" <div class="compose-box-length-gauge {{shouldAnimate ? 'should-animate' : ''}} {{overLimit ? 'over-char-limit' : ''}}"
style="transform: scaleX({{lengthAsFractionRoundedAfterRaf || 0}});" style="transform: scaleX({{lengthAsFractionDeferred || 0}});"
aria-hidden="true" aria-hidden="true"
></div> ></div>
<style> <style>
@ -21,27 +21,27 @@
import { CHAR_LIMIT } from '../../_static/statuses' import { CHAR_LIMIT } from '../../_static/statuses'
import { mark, stop } from '../../_utils/marks' import { mark, stop } from '../../_utils/marks'
import { store } from '../../_store/store' import { store } from '../../_store/store'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
export default { export default {
oncreate() { oncreate() {
this.set({lengthAsFractionDeferred: this.get('lengthAsFraction')})
// perf improvement for keyboard input latency // perf improvement for keyboard input latency
this.observe('lengthAsFractionRounded', lengthAsFractionRounded => { this.observe('lengthAsFraction', () => {
requestAnimationFrame(() => { scheduleIdleTask(() => {
mark('set lengthAsFractionRoundedAfterRaf') mark('set lengthAsFractionDeferred')
this.set({lengthAsFractionRoundedAfterRaf: lengthAsFractionRounded}) this.set({lengthAsFractionDeferred: this.get('lengthAsFraction')})
stop('set lengthAsFractionRoundedAfterRaf') stop('set lengthAsFractionDeferred')
requestAnimationFrame(() => this.set({shouldAnimate: true})) requestAnimationFrame(() => this.set({shouldAnimate: true}))
}) })
}) }, {init: false})
}, },
store: () => store, store: () => store,
computed: { computed: {
lengthAsFraction: (length) => Math.min(CHAR_LIMIT, length) / CHAR_LIMIT, lengthAsFraction: (length) => {
lengthAsFractionRounded: (lengthAsFraction) => {
// We don't need to update the gauge for every decimal point, so round it to the nearest 0.02 // We don't need to update the gauge for every decimal point, so round it to the nearest 0.02
let int = Math.round(lengthAsFraction * 100) let int = Math.round(Math.min(CHAR_LIMIT, length) / CHAR_LIMIT * 100)
int -= (int % 2) return (int - (int % 2)) / 100
return int / 100
} }
} }
} }

View file

@ -1,6 +1,6 @@
<span class="compose-box-length {{overLimit ? 'over-char-limit' : ''}}" <span class="compose-box-length {{overLimit ? 'over-char-limit' : ''}}"
aria-label="{{lengthLabel}}"> aria-label="{{lengthLabel}}">
{{lengthToDisplayAfterRaf || '0'}} {{lengthToDisplayDeferred || '0'}}
</span> </span>
<style> <style>
.compose-box-length { .compose-box-length {
@ -19,26 +19,28 @@
import { CHAR_LIMIT } from '../../_static/statuses' import { CHAR_LIMIT } from '../../_static/statuses'
import { mark, stop } from '../../_utils/marks' import { mark, stop } from '../../_utils/marks'
import { store } from '../../_store/store' import { store } from '../../_store/store'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
export default { export default {
oncreate() { oncreate() {
this.set({lengthToDisplayDeferred: this.get('lengthToDisplay')})
// perf improvement for keyboard input latency // perf improvement for keyboard input latency
this.observe('lengthToDisplay', lengthToDisplay => { this.observe('lengthToDisplay', () => {
requestAnimationFrame(() => { scheduleIdleTask(() => {
mark('set lengthToDisplayAfterRaf') mark('set lengthToDisplayDeferred')
this.set({lengthToDisplayAfterRaf: lengthToDisplay}) this.set({lengthToDisplayDeferred: this.get('lengthToDisplay')})
stop('set lengthToDisplayAfterRaf') stop('set lengthToDisplayDeferred')
})
}) })
}, {init: false})
}, },
store: () => store, store: () => store,
computed: { computed: {
lengthToDisplay: (length) => CHAR_LIMIT - length, lengthToDisplay: (length) => CHAR_LIMIT - length,
lengthLabel: (overLimit, lengthToDisplay) => { lengthLabel: (overLimit, lengthToDisplayDeferred) => {
if (overLimit) { if (overLimit) {
return `${lengthToDisplay} characters over limit` return `${lengthToDisplayDeferred} characters over limit`
} else { } else {
return `${lengthToDisplay} characters remaining` return `${lengthToDisplayDeferred} characters remaining`
} }
} }
} }