Hi there!
I’m dealing with a problem which I’m not sure what the best way to solve is, and I was hoping someone could point me in the right direction.
Background
I have a multi-page dash app where one of the pages displays ‘assets’. An asset is a combination of a figure and a table. The tables holds some specific properties of the asset, like its name and some calculated metric values.
On the top of the page there is a dropdown, with some of those metric values. This dropdown value is used to determine the sort order of the assets.
Problem
When there are many of these assets, the page can become very slow and/or crash. Think hundreds of figures, each with a few thousand points.
Proposed Solution
I was thinking a good solution would be to only display the top 10 assets as determined by the sort order, and add a ‘load 10 more’ button at the bottom.
Question
Is there a way to add the 10 additional figures without reloading the div? Currently I’m doing it by having my container div be a State and Output to a callback, and appending the additional assets to its children. This works functionally, but it reloads the div every time, and that’s disruptive to the user experience.
Bonus question: is this even a good solution? Is there a better one?
