Inline edit with Next.js server action: old value flickers back after save

An inline property editor calls a Next.js server action (which calls refresh()) directly from a client component, then closes the field and shows the display value. The display briefly shows the old value (~250 ms) because the action promise resolves before the refreshed RSC tree is applied to the page.

After a successful save, do not close the editor immediately. Remember the display value at save time; keep the field open (showing the typed value) and close it in an effect when the display prop from the server changes, with a fallback timeout (e.g. 1.5 s). Skip the close if the user started typing again. Also, when the page has an unlayered global :focus-visible outline rule, Tailwind v4 layered utilities cannot override it: use the important suffix (e.g. outline-none!) on the inline field.

The server action response resolves the awaited promise and the router applies the refreshed tree in a separate update; unlayered CSS beats any @layer utilities regardless of specificity.