#3468050: Values in props edit form do not always match the selected component

While reviewing !171 (closed) by @bnjmnm I looked into why the components in ContextualPanel don't get re-rendered properly. Initially I just wanted to see if we could avoid dispatching the events. Then I also noticed during my testing that closing and re-opening the contextual panel results in a noticeable flicker, so I decided this issue deserved a deeper investigation.

I discovered that the ReactElement returned by hyperscriptify doesn't get re-rendered. After experimenting with a custom hook, and discussing with @effulgentsia I ended up wrapping the element returned by hyperscriptify and adding a key, so React knows when to re-render.

While I was there, I cleaned up the code to remove a previously added POC to asynchronously fetch data by a route loader which we were not using, then added a spinner element that shows when the rendered form markup is being fetched from the API endpoint. I had to make sure this is not happening when the form is being updated by the user, otherwise the form loses focus. This also led me to realize that we need to be careful with what key to use to re-render the form — see inline comments.

I also updated the end-to-end tests to make sure the form is re-rendered. Here I also uncovered a race condition issue with how we were referencing the component IDs once I introduced test IDs in the markup and we were able to directly assert those elements instead of doing it after finding an element — which previously made the race condition issue invisible.

One thing to note about the spinner is that it won't be visible once the component form was rendered for the first time. This is due the caching logic in Redux Toolkit Query.