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

src/routes/_components/compose/ComposeContentWarning.html

@@ -15,9 +15,11 @@
 </style>
 <script>
   import { store } from '../../_store/store'
-  import debounce from 'lodash-es/debounce'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
   import { observe } from 'svelte-extras'
+  import { throttleTimer } from '../../_utils/throttleTimer'
+
+  const updateContentWarningInStore = throttleTimer(scheduleIdleTask)
 
   export default {
     oncreate () {
@@ -36,16 +38,14 @@
         })
       },
       setupSyncToStore () {
-        const saveText = debounce(() => scheduleIdleTask(() => this.store.save()), 1000)
+        const { realm } = this.get()
-
         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 })
       }
     }
   }
-</script>
+</script>

src/routes/_components/compose/ComposeMediaItem.html

@@ -123,7 +123,6 @@
 <script>
   import { store } from '../../_store/store'
   import { deleteMedia } from '../../_actions/media'
-  import debounce from 'lodash-es/debounce'
   import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
   import { observe } from 'svelte-extras'
   import SvgIcon from '../SvgIcon.html'
@@ -132,6 +131,9 @@
   import { get } from '../../_utils/lodash-lite'
   import { coordsToPercent } from '../../_utils/coordsToPercent'
   import { importMediaFocalPointDialog } from '../dialog/asyncDialogs'
+  import { throttleTimer } from '../../_utils/throttleTimer'
+
+  const updateMediaInStore = throttleTimer(scheduleIdleTask)
 
   export default {
     oncreate () {
@@ -183,15 +185,15 @@
         })
       },
       setupSyncToStore () {
-        const saveStore = debounce(() => scheduleIdleTask(() => this.store.save()), 1000)
-
         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 })
       },
       setupAutosize () {

src/routes/_components/compose/ComposePoll.html

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