perf: be more consistent about compose input scheduling (#1414)

This commit is contained in:
Nolan Lawson 2019-08-20 08:08:15 -07:00 committed by GitHub
parent cccbfd70da
commit f80ca32478
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 21 deletions

View file

@ -15,9 +15,11 @@
</style> </style>
<script> <script>
import { store } from '../../_store/store' import { store } from '../../_store/store'
import debounce from 'lodash-es/debounce'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask' import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { observe } from 'svelte-extras' import { observe } from 'svelte-extras'
import { throttleTimer } from '../../_utils/throttleTimer'
const updateContentWarningInStore = throttleTimer(scheduleIdleTask)
export default { export default {
oncreate () { oncreate () {
@ -36,14 +38,12 @@
}) })
}, },
setupSyncToStore () { setupSyncToStore () {
const saveText = debounce(() => scheduleIdleTask(() => this.store.save()), 1000) const { realm } = this.get()
this.observe('rawText', rawText => { this.observe('rawText', rawText => {
const { realm } = this.get() updateContentWarningInStore(() => {
this.store.setComposeData(realm, { this.store.setComposeData(realm, { contentWarning: rawText })
contentWarning: rawText this.store.save()
}) })
saveText()
}, { init: false }) }, { init: false })
} }
} }

View file

@ -123,7 +123,6 @@
<script> <script>
import { store } from '../../_store/store' import { store } from '../../_store/store'
import { deleteMedia } from '../../_actions/media' import { deleteMedia } from '../../_actions/media'
import debounce from 'lodash-es/debounce'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask' import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { observe } from 'svelte-extras' import { observe } from 'svelte-extras'
import SvgIcon from '../SvgIcon.html' import SvgIcon from '../SvgIcon.html'
@ -132,6 +131,9 @@
import { get } from '../../_utils/lodash-lite' import { get } from '../../_utils/lodash-lite'
import { coordsToPercent } from '../../_utils/coordsToPercent' import { coordsToPercent } from '../../_utils/coordsToPercent'
import { importMediaFocalPointDialog } from '../dialog/asyncDialogs' import { importMediaFocalPointDialog } from '../dialog/asyncDialogs'
import { throttleTimer } from '../../_utils/throttleTimer'
const updateMediaInStore = throttleTimer(scheduleIdleTask)
export default { export default {
oncreate () { oncreate () {
@ -183,15 +185,15 @@
}) })
}, },
setupSyncToStore () { setupSyncToStore () {
const saveStore = debounce(() => scheduleIdleTask(() => this.store.save()), 1000)
this.observe('rawText', rawText => { this.observe('rawText', rawText => {
const { realm, index, media } = this.get() updateMediaInStore(() => {
if (media[index].description !== rawText) { const { realm, index, media } = this.get()
media[index].description = rawText if (media[index].description !== rawText) {
this.store.setComposeData(realm, { media }) media[index].description = rawText
saveStore() this.store.setComposeData(realm, { media })
} this.store.save()
}
})
}, { init: false }) }, { init: false })
}, },
setupAutosize () { setupAutosize () {

View file

@ -109,43 +109,48 @@
const poll = this.store.getComposeData(realm, 'poll') const poll = this.store.getComposeData(realm, 'poll')
poll.options[i] = element.value poll.options[i] = element.value
this.store.setComposeData(realm, { poll }) this.store.setComposeData(realm, { poll })
this.store.save()
}) })
}, },
onMultipleChange () { onMultipleChange () {
requestAnimationFrame(() => { scheduleIdleTask(() => {
const { realm } = this.get() const { realm } = this.get()
const element = document.getElementById(`poll-option-multiple-${realm}`) const element = document.getElementById(`poll-option-multiple-${realm}`)
const poll = this.store.getComposeData(realm, 'poll') const poll = this.store.getComposeData(realm, 'poll')
poll.multiple = !!element.checked poll.multiple = !!element.checked
this.store.setComposeData(realm, { poll }) this.store.setComposeData(realm, { poll })
this.store.save()
}) })
}, },
onDeleteClick (i) { onDeleteClick (i) {
requestAnimationFrame(() => { scheduleIdleTask(() => {
const { realm } = this.get() const { realm } = this.get()
const poll = this.store.getComposeData(realm, 'poll') const poll = this.store.getComposeData(realm, 'poll')
poll.options.splice(i, 1) poll.options.splice(i, 1)
this.store.setComposeData(realm, { poll }) this.store.setComposeData(realm, { poll })
this.store.save()
flushPollOptionsToDom(poll, realm) flushPollOptionsToDom(poll, realm)
}) })
}, },
onAddClick () { onAddClick () {
requestAnimationFrame(() => { scheduleIdleTask(() => {
const { realm } = this.get() const { realm } = this.get()
const poll = this.store.getComposeData(realm, 'poll') const poll = this.store.getComposeData(realm, 'poll')
if (!poll.options.length !== 4) { if (!poll.options.length !== 4) {
poll.options.push('') poll.options.push('')
} }
this.store.setComposeData(realm, { poll }) this.store.setComposeData(realm, { poll })
this.store.save()
}) })
}, },
onExpiryChange (e) { onExpiryChange (e) {
requestAnimationFrame(() => { scheduleIdleTask(() => {
const { realm } = this.get() const { realm } = this.get()
const { value } = e.target const { value } = e.target
const poll = this.store.getComposeData(realm, 'poll') const poll = this.store.getComposeData(realm, 'poll')
poll.expiry = parseInt(value, 10) poll.expiry = parseInt(value, 10)
this.store.setComposeData(realm, { poll }) this.store.setComposeData(realm, { poll })
this.store.save()
}) })
} }
}, },