[atable] poor performance when rendering

[agritheory]

Using a 28x53 table loading takes about 8 seconds in FAB customer application

[Alchez]

@agritheory Okay, so I looked into this, and here's what I've found:

• Although Vue can handle DOM changes pretty efficiently, performing DOM manipulation adds up and can still generally be expensive.
  • For example, trying to render a 25x150 table (3750 cells) in the ATable default story - with minor custom formatting - took 2.5 seconds.
  • I'm not sure why a 28x53 table (1484 cells; 60% fewer cells) is taking ~5 seconds, but I'm guessing it's also dealing with a lot of DOM manipulation.
• Vue recommends some general optimization tips while creating an application, and one of them is to virtualize large lists.
  • Virtualizing lists sounds like a memory technique that limits processing to a small portion of the dataset, both visually and in-memory.
  • Vue suggests using vue-virtual-scroller (by the same guy who made Histoire) to apply virtualization, but there's also a VueUse composable that does the same (and seems to be more modern and less buggy than the recommended one, although with fewer features).

I tried implementing the VueUse offering into the Histoire story as a POC, but I couldn't get it to work correctly. The other approach is to try to implement this directly at the ATable-level, which would have it work automatically for all tables, but that's a fair amount of work as well.

What do you think? And where should we place this in the priority list?