pinafore/routes/_components/compose/ComposeLengthGauge.html

<div class="compose-box-length-gauge {shouldAnimate ? 'should-animate' : ''}  {overLimit ? 'over-char-limit' : ''}"
     style="transform: scaleX({lengthAsFractionDeferred});"
     aria-hidden="true"
></div>
<style>
  .compose-box-length-gauge {
    grid-area: gauge;
    margin: 0 0 5px 5px;
    height: 2px;
    background: var(--main-theme-color);
    transform-origin: left;
  }
  .compose-box-length-gauge.should-animate {
    transition: transform 0.2s linear;
  }
  .compose-box-length-gauge.over-char-limit {
    background: var(--warning-color);
  }
</style>
<script>
  import { CHAR_LIMIT } from '../../_static/statuses'
  import { mark, stop } from '../../_utils/marks'
  import { store } from '../../_store/store'
  import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
  import { observe } from 'svelte-extras'

  export default {
    oncreate () {
      let { lengthAsFraction } = this.get()
      this.set({lengthAsFractionDeferred: lengthAsFraction})
      // perf improvement for keyboard input latency
      this.observe('lengthAsFraction', () => {
        scheduleIdleTask(() => {
          mark('set lengthAsFractionDeferred')
          let { lengthAsFraction } = this.get()
          this.set({lengthAsFractionDeferred: lengthAsFraction})
          stop('set lengthAsFractionDeferred')
          requestAnimationFrame(() => this.set({shouldAnimate: true}))
        })
      }, {init: false})
    },
    data: () => ({
      shouldAnimate: false,
      lengthAsFractionDeferred: 0
    }),
    store: () => store,
    computed: {
      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(Math.min(CHAR_LIMIT, length) / CHAR_LIMIT * 100)
        return (int - (int % 2)) / 100
      }
    },
    methods: {
      observe
    }
  }
</script>