[PR #6939] Smooth animation of command palette filtering #26821

Open
opened 2026-01-31 09:18:20 +00:00 by claunia · 0 comments
Owner

Original Pull Request: https://github.com/microsoft/terminal/pull/6939

State: closed
Merged: Yes


The command palette is a ListView of commands. As you type into the
search box, commands are added or removed from the ListView. Currently,
each update is done by completely clearing the backing list, then adding
back any items that should be displayed. However, this defeats the
ListView's built-in animations: upon every keystroke, ListView displays
its list-clearing animation, then animates the insertion of every item
that wasn't deleted. This results in noticeable flickering.

This PR changes the update logic so that it updates the list using
(roughly) the minimum number of Insert and Remove calls, so the ListView
makes smoother transitions as you type.

Detailed Description of the Pull Request / Additional comments

I implemented it by keeping the existing code that builds the filtered
list, but I changed it to build into a scratch list. Then I grafted on
a generic delta algorithm to make the real list look like the scratch
list.

To verify the delta algorithm, I tested all 360,000 permutations of
pairs of up to 5 element lists in a toy C# app.

Validation Steps Performed

I'm not sure if my screen capture tool really caught all the flickering
here, but the screencasts below should give a rough idea of the
difference. (All the flickering was becoming a nuisance while I was
testing out the HC changes.)

Existing behavior:
old

New behavior:
new

**Original Pull Request:** https://github.com/microsoft/terminal/pull/6939 **State:** closed **Merged:** Yes --- The command palette is a ListView of commands. As you type into the search box, commands are added or removed from the ListView. Currently, each update is done by completely clearing the backing list, then adding back any items that should be displayed. However, this defeats the ListView's built-in animations: upon every keystroke, ListView displays its list-clearing animation, then animates the insertion of every item that wasn't deleted. This results in noticeable flickering. This PR changes the update logic so that it updates the list using (roughly) the minimum number of Insert and Remove calls, so the ListView makes smoother transitions as you type. ## Detailed Description of the Pull Request / Additional comments I implemented it by keeping the existing code that builds the filtered list, but I changed it to build into a scratch list. Then I grafted on a generic delta algorithm to make the real list look like the scratch list. To verify the delta algorithm, I tested all 360,000 permutations of pairs of up to 5 element lists in a toy C# app. ## Validation Steps Performed I'm not sure if my screen capture tool really caught all the flickering here, but the screencasts below should give a rough idea of the difference. (All the flickering was becoming a nuisance while I was testing out the HC changes.) Existing behavior: ![old](https://user-images.githubusercontent.com/10259764/87609408-53796180-c6b7-11ea-86b2-ab94f40c8ed0.gif) New behavior: ![new](https://user-images.githubusercontent.com/10259764/87609416-56745200-c6b7-11ea-8415-fde870385485.gif)
claunia added the pull-request label 2026-01-31 09:18:20 +00:00
Sign in to join this conversation.
No Label pull-request
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/terminal#26821