History tab uses >100% RAM for large histories

[Leland]

The History page's performance scales relative to its size. The more History items you have, the harder it is to load the page.

I have 1,500 entries right now. The History page completely maxes out memory usage on my M1 MBP, going into swap, even as the app is completely idle. In that screenshot above I am using the app for a while before clicking History.

That level of memory usage remains, however. Even after clicking to other tabs, it does not reduce.

I'm not as familiar with Vue, but in React this sort of memory pressure can be caused by expensive-to-render components that render over and over again in a loop. This may also be stemming from trying to render every single line in the history page all at once.

Replication

1. Pre-fill DiffusionBee history, ~/.diffusionbee/data.json, with 10,000 fake entries
2. Visit History tab in app

Possible fixes

• Use virtualized scrolling to only render items in view: https://github.com/tangbc/vue-virtual-scroll-list, https://github.com/TanStack/virtual, etc.
• Check Chrome Developer Tools to see if components are rendering in a loop

(I originally thought this was a v1.2.0 issue, but I have confirmed it is present on v1.1.0)

[divamgupta]

Yes, i think adding pagination will fix this.

[Leland]

Yep – pagination is definitely one fix!

If you like the infinite scrolling, you can use the GitHub links in my first comment to restrict rendering to only what's visible, and render new ones as users scroll. It might actually be less work than pagination.

[dngrlux]

Infinite scroll over pagination any day. 😛

[Leland]

I've investigated this a bit more – this is happening because of 3 things:

1. A component is being mounted for every image ever rendered
2. Every image ever rendered loads at the same time when the History tab is opened
3. Nothing in the History tab is persisted or cached, and has to be completely remounted when reopened

DiffusionBee produces ~0.5MB images at 512x512px. Even modest history sizes means users are having to chuck >1GB of images into memory each time they open the tab. Here's me toggling back and forth a couple times:

The lack of persistence happened recently, and maybe intentionally, in c46ea88 – which dropped <KeepAlive /> directives around the tabs. Unfortunately, this now means each time History is opened, thousands and thousands and thousands of mounts have to occur: