create modals as needed rather than in advance

[huss]

Is your feature request related to a problem? Please describe.

The modals now present on many admin pages are all created when the page is loaded. For example, all the edit modals for all cards. It would be faster an more efficient to create the modals as needed since most are not used at any given time. While it should not matter, it may help with keeping state up-to-date.

Describe the solution you'd like

Find a mechanism to do this.

Describe alternatives you've considered

Leave as is

Additional context

None

[huss]

Another issue with modals is that some take props for show and the close function. Hopefully the changes for this issue could also eliminate those and maybe all props.

[ChrisMart21]

The same idea has also occured to me, and I've got some changes to admin pages undergoing tentative development that address this concept.
With the migration to rtk, react-router was also updated to v6. This introduced <Outlets/> which is currently being utilized for the admin pages.
The approach I've begin to look into is using a single modal, who's contents get dynamically swapped depending on the page, etc.
This differs with the current approach that creates a modal for each entity view.

This Admin Outlet has a SharedModal between all admin pages.
The only real difference to the current implementation of the current the admin pages, is that the entity views only return the body contents instead of a full modal. While there are minor changes to the admin pages, the functionality is largely the same, except for the return value which now returns the modal 'body, only. The new approch would still use react-state, but will also be saving backedup local edits to the redux state. So previous code will likely not change much for many of the components.