🐛 [UX] After saving an inline form, there's a delay before the content changes

[tristan-orourke]

🐛 Bug

When you save an inline form, it immediately goes back to the non-editable version, but showing the old data. Only when the request comes back successfully does the content update to what you just submitted. That delay can be a bit jarring, especially if it takes longer than a second.

Also oddly, you may see the toast indicating success before the content is actually updated.

🦋 Expected Behaviour

When the form returns to the non-editable display, it should show the data you just entered.

If this is not possible, there should at least be some indication that something is in progress.

🕵️ Details

Add any additional details that could assist with troubleshooting/fixing the issue.

• Operating System: Name and version (if possible).
• Browser: Name and version (if possible).

📋 Steps to Reproduce

1. Log in as admin@test.com
2. Go to create a new pool
3. On the edit pool page, click "Edit this section" (for any section)
4. Submit changes
5. See the form revert to the non-editable display, showing OLD data
6. See a toast indicated successful save
7. THEN see the display update to the new data

📸 Screenshot

https://recordit.co/JLSvRiHSKD

Proposed Solution

I can see two ways to improve this right now.

1. Display a spinner on the display-mode card while its data fetch is in progress.
2. Write some more urql code to more smartly update the local cache after a mutation. Currently we run a mutation, which invalidates the local cache and switches the UI back to display mode, but then the content is out of date while URQL runs a new request to refresh the cache. However, we can almost always get the fresh data right away from the mutation, if we write a bit of extra code to manually update the cache.

Both these solutions may require changes not just to the Inline Form itself, but to every component its used in.

✅ Acceptance Criteria

A set of assumptions which, when tested, verify that the bug was addressed.

• [ ] After saving an inline form, we don't see old data
• [ ] If we must wait to see new data, there is a clear indication of something in progress

[vd1992]

@tristan-orourke I see you are still assigned to this issue, are you doing something with it still or should I clear your assignment?

[tristan-orourke]

Added my proposed improvement and removed my assignment.