ntp: virtual list for favorites

[shakyShane]

Asana Task/Github Issue: https://app.asana.com/0/1201141132935289/1208792034336660/f

Description

• only render the rows of favorites that are visible
  • this addresses a major pain-point from our native desktop browsers
• when expanded, defer rendering children until the main thread is free
  • this means users on the very slowest devices still get an instant feedback on click

Example

Part of this PR is optimizing the expand/collapse action of the favorites list. On slow devices this can cause over a second of input delay since the act of rendering a screen full of favorites can be an expensive main-thread-blocking operation.

To combat this problem, I separated the expand/collapse action from the rendering of the actual tiles, which had the following impact: 💪🏻

BEFORE (20x CPU slowdown)

AFTER (20x CPU slowdown)

TODO:

• add some perf metrics to explain the change

Testing Steps

• https://deploy-preview-1269--content-scope-scripts.netlify.app/build/pages/new-tab/?favorites=100
• Verify that the page works as expected with showing/hiding along with drag+drop

Checklist

Please tick all that apply:

• I have tested this change locally
• I have tested this change locally in all supported browsers
• This change will be visible to users
• I have added automated tests that cover this change
• I have ensured the change is gated by config
• This change was covered by a ship review
• This change was covered by a tech design
• Any dependent config has been merged

[shakyShane]

• ntp: virtual list for favorites #1269 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[netlify]

✅ Deploy Preview for content-scope-scripts ready!

Name	Link
🔨 Latest commit	5444764
🔍 Latest deploy log	https://app.netlify.com/sites/content-scope-scripts/deploys/6745b6e7a7cf080008477dbb
😎 Deploy Preview	https://deploy-preview-1269--content-scope-scripts.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Temporary Branch Update

The temporary branch has been updated with the latest changes. Below are the details:

• Branch Name: pr-releases/pr-1269
• Commit Hash: b6ab47a470851ddd7ff2285d719881ee41bbf8e0
• Install Command: npm i github:duckduckgo/content-scope-scripts#b6ab47a470851ddd7ff2285d719881ee41bbf8e0

Please use the above install command to update to the latest version.

[github-actions]

[Beta] Generated file diff

Time updated: Tue, 26 Nov 2024 11:55:14 GMT

Integration

    - integration/pages/new-tab/js/index.css

• integration/pages/new-tab/js/index.js

File has changed

Windows

    - windows/pages/new-tab/js/index.css

• windows/pages/new-tab/js/index.js

File has changed

Apple

    - dist/pages/new-tab/js/index.css

• dist/pages/new-tab/js/index.js

File has changed

[shakyShane]

I have tested this on Windows ✅