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' : ''}}"
style="transform: scaleX({{lengthAsFractionRoundedAfterRaf || 0}});"
style="transform: scaleX({{lengthAsFractionDeferred || 0}});"
aria-hidden="true"
></div>
<style>
@ -21,27 +21,27 @@
import { CHAR_LIMIT } from '../../_static/statuses'
import { mark, stop } from '../../_utils/marks'
import { store } from '../../_store/store'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
export default {
oncreate() {
this.set({lengthAsFractionDeferred: this.get('lengthAsFraction')})
// perf improvement for keyboard input latency
this.observe('lengthAsFractionRounded', lengthAsFractionRounded => {
requestAnimationFrame(() => {
mark('set lengthAsFractionRoundedAfterRaf')
this.set({lengthAsFractionRoundedAfterRaf: lengthAsFractionRounded})
stop('set lengthAsFractionRoundedAfterRaf')
this.observe('lengthAsFraction', () => {
scheduleIdleTask(() => {
mark('set lengthAsFractionDeferred')
this.set({lengthAsFractionDeferred: this.get('lengthAsFraction')})
stop('set lengthAsFractionDeferred')
requestAnimationFrame(() => this.set({shouldAnimate: true}))
})
})
}, {init: false})
},
store: () => store,
computed: {
lengthAsFraction: (length) => Math.min(CHAR_LIMIT, length) / CHAR_LIMIT,
lengthAsFractionRounded: (lengthAsFraction) => {
lengthAsFraction: (length) => {
// 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)
int -= (int % 2)
return int / 100
let int = Math.round(Math.min(CHAR_LIMIT, length) / CHAR_LIMIT * 100)
return (int - (int % 2)) / 100
}
}
}

View file

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