Adds an is-busy state to the save button of the widgets page #16019
Conversation
youknowriad
added
the
[Feature] Widgets Screen
| const [ isSaving, setIsSaving ] = useState( false ); | ||
| const { saveWidgetAreas } = useDispatch( 'core/edit-widgets' ); | ||
| const onClick = useCallback( async () => { | ||
| setIsSaving( true ); |
There was a problem hiding this comment.
This made me wonder if we'd need a isPerforming selector for actions similar to the isResolving one we have for resolvers. cc @aduth
There was a problem hiding this comment.
I like this idea but wonder why not also name it isResolving since, to me, having an entity saved is a 'resolution'.
There was a problem hiding this comment.
This made me wonder if we'd need a
isPerformingselector for actions similar to theisResolvingone we have for resolvers. cc @aduth
Built-in? Or as a pattern?
Generally I'd like if these could actually be resolvers, so we're not setting any state, the state is reflected by the selection of the existing isResolving on the widgets save resolution.
There was a problem hiding this comment.
I was thinking built-in similarily to resolvers but for actions. Technically speaking resolvers and actions are the exact same thing right now (in terms of code), the only different is that one get triggered when you call a selector, the other when you call an action :)
There was a problem hiding this comment.
Code looks perfect, and when I test this locally with network throttling on I see that it's working.
One bug I noticed that exists also in the post editor is that the button text is white which is hard to read:
edit: Ah, yep, you mentioned this in the description! 🙂
Specifically: #15029 |
| const { saveWidgetAreas } = useDispatch( 'core/edit-widgets' ); | ||
| const onClick = useCallback( async () => { | ||
| setIsSaving( true ); | ||
| await saveWidgetAreas(); |
There was a problem hiding this comment.
I did not realize this is a thing we could be doing now... and I'm not sure how I feel about it 😅
| const [ isSaving, setIsSaving ] = useState( false ); | ||
| const { saveWidgetAreas } = useDispatch( 'core/edit-widgets' ); | ||
| const onClick = useCallback( async () => { | ||
| setIsSaving( true ); |
There was a problem hiding this comment.
This made me wonder if we'd need a
isPerformingselector for actions similar to theisResolvingone we have for resolvers. cc @aduth
Built-in? Or as a pattern?
Generally I'd like if these could actually be resolvers, so we're not setting any state, the state is reflected by the selection of the existing isResolving on the widgets save resolution.
This PR just updates the save button of the widgets screen to apply the
is-busyandaria-disabledstates when the widgets are being saved.I also extracted the button to its own component. Notice that the design of the busy state is not great at the moment but this is not specific to the widgets screen and is tracked separately.
I also wanted to add "snackbar notifications" to the save success action but decided to that separately?