Added visual cueing when submitting forms #52
Conversation
src/components/Loading.tsx
Outdated
| @@ -1,7 +1,22 @@ | |||
| export default function Loading() { | |||
| type LoadingProps = { | |||
| isButton?: boolean; | |||
There was a problem hiding this comment.
I dont think this is actually used anywhere else, the Loading component, so we could probably just make this only apply to buttons
There was a problem hiding this comment.
Sounds good. I wasn't sure if this was planned to be use elsewhere. Removed the isButton logic/prop
| @@ -44,6 +48,9 @@ export default function VariantForm(props: VariantFormProps) { | |||
| handleSubmit(values) | |||
| .then(() => { | |||
| clearError(); | |||
| setSuccess( | |||
| `Successfully ${submitPhrase.toLocaleLowerCase()}d variant.` | |||
There was a problem hiding this comment.
in some cases we end this message with a . and others we don't, like: https://github.com/flipt-io/flipt-ui/pull/52/files#diff-6fdc396f20dbeed901b28539b86f9ee4c7097a9f8aae89882a0c374dddfbb099R51
We should probably be consistent in the messaging/punctation, I'm just not sure which one I prefer (with the period or without). Thoughts?
There was a problem hiding this comment.
I think I actually like without the .
There was a problem hiding this comment.
Removed the . from success messages
| const { success, setSuccess } = useSuccess(); | ||
|
|
||
| return ( | ||
| <Transition show={success !== null}> |
There was a problem hiding this comment.
could we make the success notification clear itself after a short period? say 2-3 seconds? i think success notifications should be short-lived, while error notifications should persist until manually closed/acknowledged. wyt?
There was a problem hiding this comment.
This is a good thought, I wasn't sure if this was a desired functionality. Set timeout to be 3 seconds for now.
…od, set timeout to 3 seconds for success messages, made the loading component just be for buttons
Updated submit buttons with loaders upon submission, added success alerts
Changed ErrorProvider to become NotificationProvider, added success functionality and properties to that context.