WebUI Variables page Performance

[thedist]

Is this a feature relevant to companion itself, and not a specific module?

• [x] I believe this to be a feature for companion, and is not specific to a module

Is there an existing issue for this?

• [x] I have searched for similiar existing issues

Describe the feature

Currently the Variables page for a connection within the WebUI (eg, /variables/connection/vmix) renders every single variable for that connection, resulting in thousands, potentially tens of thousands, of elements in the table, leading to long initial load times. and high CPU and mem usage for the tab.

What I'd recommend is changing this to something similar to text input fields which appear to be using react-select for variable suggestions. This limits the number of elements needing to be rendered into DOM at any one time, whilst allowing the scrollbar to still scroll through the entire list, resulting in a great performance improvement as currently a connection with thousands of variables loads and scrolls fast in a text input variable suggestion, but lags in the Variables page.

An alternative idea would be to do pagination, and whilst that would be an improvement over the existing implementation I believe that being able to scroll through the entire list of variables would lead to a better UX compared to needing to go through pages to find something (particularly for modules with a dynamic number of variables, so the number of pages could be changing as the user browses).

Usecases

Any time the user through accesses a connections Variables list within the WebUI is impacted by rendering of every single variable for that connection, so this feature request would benefit all of those users, particularly those accessing the WebUI through older/mobile devices such as phones or tablets which have more limited resources.

[Julusian]

I propose that we either try again at using react-window to solve this. I tried in the past, but didnt have success in making it perform better.
There is also the challenge of the dynamic row heights makes it hard.

Perhaps pagination would be fine? There is the filter already, which will be easier to find something than navigating the pages. If the page navigation is done by tracking the 'first variable' name then it would minimise the jumping around.
Pages could maybe also be kept rather long, minimising the amount of page changing that users do?

[thedist]

I'll have a play around and see what I can try to achieve. Unfortunately I very rarely touch Companions WebUI so it'll take me a little while to get up to speed on it as while I do some React stuff, Companions setup is a lot different any of the setups I've worked on before.