Skip to content

Remove transition on selected line to increase perceived speed

Created by: quinnkeast

Problem Statement

When users click a line of code, there is a CSS transition (transition: background 200ms ease-out;) that animates the background colour change. While the actual line selection happens (near) instantly, the animation creates a perception of sluggishness in the UI. If we improve this, it'll make the UI feel faster and more responsive.

Proposed Solution

Remove the transition for the selected row's background colour.

Before

Kapture 2020-08-14 at 12 35 10

After

Kapture 2020-08-14 at 12 35 20

Note: this might have side effects on extensions or other meta information. I'd target only the background colour of the row, rather than remove the transition altogether without being sure it doesn't have side effects.