Use htmx in the frontend

[podliashanyk]

Todays solution:

The system in place is vanilla JS-HTML-CSS. It is somewhat chaotic and somewhat redundant some places in the codebase.
Replacing it with (or just adding on top of it) a component-based system, as mentioned in #2471, would require tons of refactoring in the long run and would require lots of overhead in the beginning. Additionally, there aren't many use cases in NAV that require a full complexity of a component-based system. Use cases that are on a roadmap to be fixed or to be implemented are of too little complexity for any component-based system.

Suggested solution:

Install htmx

Drawbacks:
htmx entails a paradigm shift when it comes to developing frontend. It would therefore require some overhead with implementation in the beginning. Simply because the team is not very used to htmx. But the team has so far a positive experience with htmx, both when it comes to complexity and ease of development.

[lunkwill42]

Suggestion for PoC: Create a dynamic preview of search results in the NAVbar, thereby reducing the number of clicks and pageloads necessary to get to a search result.

[lunkwill42]

I've added #2883 as a crude PoC here.

Another suggestion: There is a big JavaScript song-and-dance in the Seed Database IP Device edit form when clicking the "Check connectivity" button. This ultimately retrieves a JSON status response from the backend and spends a lot of cycles putting that response data into the right places of the UI (some as display, some as replaced form elements). This whole thing could be simplified a lot by using HTMX.

[lunkwill42]

PortAdmin relies heavily on JS code for the front-end as well. Much of this could probably be replaced by HTMX, but simple PoC here might be just the initial page load for a switch: When browsing PortAdmin with a switch as an argument, the initial page load can be quite slow, as Portadmin runs a live query against the switch in question, to get the most up-to-date data to display in the port configuration table.

The whole loading and rendering of the initial port table could be offloaded to an HTMX-request, which could give users better visual feedback that PortAdmin is indeed working on getting results from the switch and nothing is "frozen".