Slow request creation form when there are lots of approved

[keymon]

Summary

Rules with 100s of approvers (ie one approver group with 100s of users or users added directly) are very slow to render and use when creating a request.

Also the UI is not very friendly, with a lot to scroll down to click on send the request.

Glide version

Glide v0.15.13

Observed behavior

the page starts to send 1000s of requests to the API, just to resolve the email of the users to display in the bottom. This causes a lot of overload and slowness, making the UI very unresponsive. Lots of GC calls, etc.

How to reproduce

1. Create a rule with a group with 100s of users, or just 100s of users directly
2. Start a debugging session (Inspect) in the browser
3. Try to create a new request

See recording here:

https://github.com/common-fate/glide/assets/280032/96d73ec1-aa3f-47ad-948e-5736959e17ad

Expected behaviour

We would expect:

• UI to not be so slow at all, just render the users
• Possibly, if # of approvers is > 5-10, just use a collapsable field and not load the users
• Or only show the approvers group

Technical comments and suggestions

Inspecting the code, the problem comes here:

• the API just returns a list of user ids when called to this rest endpoint https://github.com/common-fate/glide/blob/release/v0.15/web/src/utils/backend-client/end-user/end-user.ts#L141-L148 (open api here)
• then the page it iterates across all the users using this map(): https://github.com/common-fate/glide/blob/66ef3beef8a9e35d1e71e41675f3786be4b90a0f/web/src/pages/access/request/%5Bid%5D.tsx#L853
• that does one call per user https://github.com/common-fate/glide/blob/66ef3beef8a9e35d1e71e41675f3786be4b90a0f/web/src/components/UserAvatar.tsx#L28

It would be more efficient to have and endpoint to list all users in batch including their name, email and id.

Also, one fellow frontend dev pointed that this line needs uncommenting as map() needs a key so React can keep track of when the items have (or have not) changed.