Adding a key makes Preact treat each item as a separate thing and fixes the weird UX of previous images staying on the screen when you paginate.
It should probably be done at the <img> level by default in Gutenberg, using the image database ID for the key. Here I did it in the <li> just for convenience.
luisherranz
commented
1 year ago
Adding a key makes Preact treat each item as a separate thing and fixes the weird UX of previous images staying on the screen when you paginate.
It should probably be done at the
<img>level by default in Gutenberg, using the image database ID for the key. Here I did it in the<li>just for convenience.Before (using Slow 3G):
https://user-images.githubusercontent.com/3305402/225347063-ca1cbfe5-04e8-4a4a-9499-040d75d5ceb1.mp4
After (using Slow 3G):
https://user-images.githubusercontent.com/3305402/225347224-528384eb-00fc-4bfb-a645-86c76bdee2c5.mp4