Optimistic UI profile modal

[bknoles]

Steps

• Visit any page with an Avatar component
  
• Click the avatar
• Notice how the modal that opens takes a full second to load its data
• Use the back/forward buttons and see that the modal opens and closes in response
• With the modal open, hard refresh the page. You will see that the modal is still rendered onto the page.

What is happening?

The source of truth for the modal's open/closed state is our Page object, which we get from our server. We like this because it allows React to just read the data that comes from the server. When we click the user's Avatar, our React app will make an Inertia request to pull down the user's profile. Our UserProfileShareable concern will return both the profile data and the user id that was requested. When React sees that the user id exists, it opens the modal.

The downside to this is that modal won't open until the network request completes. So if the request is slow, there will be a pause before the user see the modal appear. You can verify this by removing the click handler in Avatar.tsx. So, what is that click handler doing? It's making a client side visit. This optimistically updates our modal's state to "open". We do the reverse in the onBefore event callback in UserProfileModal.tsx, optimistically closing the modal. The expected back button behavior works because we are using router.push.

Also notice that the visit to open the modal adds a query parameter to the URL. When we hard refresh, it's still open! Using this pattern, we can create a shareable URL for these types of UI workflows. If we don't want or need a shareable URL, we could add the preserveUrl attribute to the <Link /> component in <Avatar />.

An exercise left for the reader: what happens if you try to visit a non-existent user's profile? Something like ?user_profile_id=300. How might you address what happens?