Skip to content

Settings page - Load addons lazily - #9037

Open
DNin01 wants to merge 10 commits into
ScratchAddons:masterfrom
DNin01:addon-lazy
Open

Settings page - Load addons lazily#9037
DNin01 wants to merge 10 commits into
ScratchAddons:masterfrom
DNin01:addon-lazy

Conversation

@DNin01

@DNin01 DNin01 commented May 23, 2026

Copy link
Copy Markdown
Member

Finally. Should help with #2531, something @WorldLanguages knows is pretty annoying.

Settings.page.top.load.in.0.3s.mp4

Description

This pull request changes two things which significantly contributed to the perceived loading time of the list of addon settings:

  1. Rendering every item in the list, including those offscreen, wasted time. Now, all contents of addon list items and loaded lazily, which means they render only after they are scrolled into view, using IntersectionObserver.
  2. Populating the entire list in one pass also adds a delay. Now, a set number of items near the top of the page are rendered and the rest of the list continues to render after the screen refreshes, allowing the first page of content to be presented quicker.

Now the addon settings UI responds much faster after loading the page or returning to the main categories after opening a Related Addons list. I challenge you to go back to how it was before after testing this out!

Here are the most notable side effects caused by each change:

  1. Addons may briefly appear blank before they render. You might see this if you scroll quickly or search, but it's a small trade-off for improved response time.
  2. Numbers may appear dynamically and the scroll track may shift as items load.

Some code comments have also been clarified.

Notes

Tested on Edge 148.

Some changes to addon-body.js were based on carefully reviewed code generated by Claude Haiku 4.5 via GitHub Copilot.

DNin01 added 5 commits May 23, 2026 09:09
- Allow the first 15 items from the top of the list to display before continuing to populate it
- Decrease the number of placeholders from 25 to 15
Happened if a category was selected while addonListObjs was still populating
@DNin01 DNin01 added scope: webpages Related to the web pages (settings page, pop-up, etc) scope: performance Related to performance of the extension or an addon scope: user experience Related to the user experience (UX) aspect of the extension labels May 23, 2026
@Samq64

Samq64 commented May 23, 2026

Copy link
Copy Markdown
Member

In my testing with the CPU throttled the initial load is roughly on par with Vue 3!

I do have a couple suggestions though:

  1. Could the group headers wait until the final count is known before displaying it?
  2. On slow systems there may be many placeholders when scrolling. Could those be replaced with a single loading message?

@WorldLanguages WorldLanguages changed the title Load addons lazily Settings page - Load addons lazily May 23, 2026
@DNin01

DNin01 commented May 24, 2026

Copy link
Copy Markdown
Member Author
  1. Could the group headers wait until the final count is known before displaying it?

Good idea for slower devices. Done.

  1. On slow systems there may be many placeholders when scrolling. Could those be replaced with a single loading message?

All the placeholders trying to load while you're scrolling fast can be a hindrance, but I don't know of a simple way to fix this.

Ending the list after a few unloaded items with "Loading more...", if that's what you meant by "a single loading message", would have to account for collapsed groups and the variable order of list items among other things. I played around with throttling (limiting how many can be loading at the same time), but the way I did it adds the items loading to a permanent queue, even if they go offscreen before they load.

Let me know if you have any other ideas. At least a user can search, collapse groups, or filter to reduce the number of lazy items they have to scroll through.

@DNin01
DNin01 requested a review from Samq64 May 24, 2026 01:13
They were redundant after "Display unloaded items as placeholders"
@Samq64

Samq64 commented May 27, 2026

Copy link
Copy Markdown
Member

Ending the list after a few unloaded items with "Loading more...", if that's what you meant by "a single loading message"

Or a spinner. Either way I see now that it is not that easy to implement well.

@DNin01

DNin01 commented Jun 13, 2026

Copy link
Copy Markdown
Member Author

For those who haven't tried it out yet, here's what scrolling through unrendered items looks like with CPU throttling active:

Scrolling.through.rendering.addons.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: performance Related to performance of the extension or an addon scope: user experience Related to the user experience (UX) aspect of the extension scope: webpages Related to the web pages (settings page, pop-up, etc)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants