Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds an is-busy state to the save button of the widgets page #16019

Merged
merged 1 commit into from Jun 7, 2019

Conversation

Projects
None yet
3 participants
@youknowriad
Copy link
Contributor

commented Jun 6, 2019

This PR just updates the save button of the widgets screen to apply the is-busy and aria-disabled states 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?

@youknowriad youknowriad self-assigned this Jun 6, 2019

@youknowriad youknowriad added the Widgets label Jun 6, 2019

const [ isSaving, setIsSaving ] = useState( false );
const { saveWidgetAreas } = useDispatch( 'core/edit-widgets' );
const onClick = useCallback( async () => {
setIsSaving( true );

This comment has been minimized.

Copy link
@youknowriad

youknowriad Jun 6, 2019

Author Contributor

This made me wonder if we'd need a isPerforming selector for actions similar to the isResolving one we have for resolvers. cc @aduth

This comment has been minimized.

Copy link
@noisysocks

noisysocks Jun 7, 2019

Member

I like this idea but wonder why not also name it isResolving since, to me, having an entity saved is a 'resolution'.

This comment has been minimized.

Copy link
@aduth

aduth Jun 7, 2019

Member

This made me wonder if we'd need a isPerforming selector for actions similar to the isResolving one 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 comment has been minimized.

Copy link
@youknowriad

youknowriad Jun 10, 2019

Author Contributor

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 :)

@noisysocks
Copy link
Member

left a 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:

Screen Shot 2019-06-07 at 15 45 22

edit: Ah, yep, you mentioned this in the description! 🙂

@youknowriad youknowriad merged commit f410c46 into master Jun 7, 2019

1 check passed

Travis CI - Pull Request Build Passed
Details

@youknowriad youknowriad deleted the add/is-busy-state-widgets-save-button branch Jun 7, 2019

@youknowriad youknowriad added this to the Gutenberg 5.9 milestone Jun 7, 2019

@aduth

This comment has been minimized.

Copy link
Member

commented Jun 7, 2019

busy state is not great at the moment but this is not specific to the widgets screen and is tracked separately.

Specifically: #15029

const { saveWidgetAreas } = useDispatch( 'core/edit-widgets' );
const onClick = useCallback( async () => {
setIsSaving( true );
await saveWidgetAreas();

This comment has been minimized.

Copy link
@aduth

aduth Jun 7, 2019

Member

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 );

This comment has been minimized.

Copy link
@aduth

aduth Jun 7, 2019

Member

This made me wonder if we'd need a isPerforming selector for actions similar to the isResolving one 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.

nicolad added a commit to nicolad/gutenberg that referenced this pull request Jun 15, 2019

jg314 added a commit to jg314/gutenberg that referenced this pull request Jul 19, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.