diff --git a/routes/_components/compose/LiteComposeBox.html b/routes/_components/compose/LiteComposeBox.html index cc089319..291e1416 100644 --- a/routes/_components/compose/LiteComposeBox.html +++ b/routes/_components/compose/LiteComposeBox.html @@ -13,8 +13,8 @@ ref:textarea bind:value=inputText > -
{ + this.observe('inputLengthAsFractionOfMaxRounded', inputLengthAsFractionOfMaxRounded => { requestAnimationFrame(() => { - mark('set inputLengthAsFractionOfMaxAfterRaf') - this.set({inputLengthAsFractionOfMaxAfterRaf: inputLengthAsFractionOfMax}) - stop('set inputLengthAsFractionOfMaxAfterRaf') + mark('set inputLengthAsFractionOfMaxRoundedAfterRaf') + this.set({inputLengthAsFractionOfMaxRoundedAfterRaf: inputLengthAsFractionOfMaxRounded}) + stop('set inputLengthAsFractionOfMaxRoundedAfterRaf') + requestAnimationFrame(() => this.set({shouldAnimate: true})) }) }) }, @@ -201,7 +205,13 @@ currentInputTextInCompose: ($currentInputTextInCompose) => $currentInputTextInCompose, inputLength: (inputText) => inputText ? inputText.length : 0, inputLengthToDisplay: (inputLength) => (inputLength <= CHAR_LIMIT ? inputLength : CHAR_LIMIT - inputLength), - inputLengthAsFractionOfMax: (inputLength) => Math.round(100 * (Math.min(CHAR_LIMIT, inputLength)) / CHAR_LIMIT) / 100, + inputLengthAsFractionOfMax: (inputLength) => (Math.min(CHAR_LIMIT, inputLength) / CHAR_LIMIT), + inputLengthAsFractionOfMaxRounded: (inputLengthAsFractionOfMax) => { + // We don't need to update the gauge for every decimal point, so round it to the nearest 0.02 + let int = Math.round(inputLengthAsFractionOfMax * 100) + int -= (int % 2) + return int / 100 + }, overLimit: (inputLength) => inputLength > CHAR_LIMIT, inputLengthLabel: (overLimit, inputLengthToDisplay) => { if (overLimit) {