FormidableLabs / FormidableLabs/envy
UI performance audit and fixes
- Dominant language
- TypeScript
- Stars
- 144
- Forks
- 5
- PR merge metrics
- No merged PRs in 30d
Description
So far, Envy has likely only be used is short bursts where the number of traces present in the list are small in number; rarely more than one or two hundred, for example.
As such the web viewer UI (and the skunkworks network viewer which preceeds it) has not be optimised for large quantities or traces, and would in all likelihood collapse under the weight of 5,000+ traces.
I raised an unrelated PR #190 which includes some tweaks to allow us to inject 1,300 traces. I had tried this with 13,000 traces and found the UI to be very unresponsive.
Therefore, we should:
- Provide a way to inject large numbers (10,000+) mock traces. See [this change](https://github.com/FormidableLabs/envy/pull/190/files#diff-3911705848f1fbc9a5f7fae490baace57a211e777d3117acb2705974e9968594R21-R28) for reference.
- Audit the UI performance and identify areas to improve.
One definite improvement would be to virtualise the trace list (so that only in-view traces are rendered in the DOM). Beyond that, we need to ensure that Envy can scale to this number of traces, even if just for the barmy cases where somebody in userland has it always running in the background whilst they work (or use) an application sending traces to it.
Another option to consider is that we cap the number of traces we list to a reasonable number.
Contributor guide
Research direction
Start with PR #190 and the web viewer and skunkworks network viewer mentioned in the issue. Reproduce the reported responsiveness difference with roughly 1,300 and 13,000 traces, then audit rendering at 10,000+ traces. Done means the issue's chosen scaling approach is implemented and the viewer remains usable at that size.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, react, typescript
- Domain
- frontend, performance
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100