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

Move loading animation to the Animate component #17106

Merged
merged 10 commits into from Aug 30, 2019

Conversation

@kjellr
Copy link
Contributor

commented Aug 20, 2019

Followup related to #17090.

This PR takes Gutenberg's loading animation and moves it into the Animate component. Previously, this was defined as a mixin in _animate.scss, with the keyframes declared in three separate places:

Moving it to the Animate component removes that duplication, and allows developers to include this in a per-component basis.

This PR:

  • Adds the loading animation to the Animate component, and updates documentation there.
  • Updates the post-saved-state and file block components to use the Animate component.
  • Removes the (now-unused) animation keyframes and mixin.

Screenshots

These should look exactly the same as before, but here's what you should see when testing:

File Block "Uploading" state:
image

Saving state:
save

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Aug 20, 2019

I haven't yet had time to go deep on the animate component, so I think I'll have to defer to someone like Riad who has. But just wanted to say thank you for working on this, and I absolutely think this is the right place for this stuff! 👍 👍

<Dashicon icon="cloud" />
{ isAutosaving ? __( 'Autosaving' ) : __( 'Saving' ) }
</span>
<Animate type="loading">

This comment has been minimized.

Copy link
@youknowriad

youknowriad Aug 21, 2019

Contributor

Seeing this component used and the fact that it adds a level in the hierarchy makes me wonder if we could replace it with a hook. (Not for this PR though)

const  animationProps = useAnimation( type );

This comment has been minimized.

Copy link
@kjellr

kjellr Aug 21, 2019

Author Contributor

Yeah, I agree — implementing this felt a bit verbose.

kjellr and others added 2 commits Aug 21, 2019
Co-Authored-By: Riad Benguella <benguella@gmail.com>
@kjellr

This comment has been minimized.

Copy link
Contributor Author

commented Aug 21, 2019

Thanks for the help, @youknowriad! Those changes are committed, so I think this should be good to go.

@kjellr

This comment has been minimized.

Copy link
Contributor Author

commented Aug 21, 2019

@youknowriad any idea what's going on with those failing tests?

@youknowriad

This comment has been minimized.

Copy link
Contributor

commented Aug 21, 2019

The unit tests failure are legit, the build artifacts one are not (we've been seeing failures the whole day, probably related to an npm upgrade)

@kjellr

This comment has been minimized.

Copy link
Contributor Author

commented Aug 23, 2019

Ok, thanks. It looks like that new <Animate> wrapper is causing the unit test to fail. I'm not super-familiar with how those tests are constructed, so any help patching that would be much appreciated.

@kjellr kjellr referenced this pull request Aug 23, 2019
3 of 9 tasks complete
@gziolo

This comment has been minimized.

Copy link
Member

commented Aug 30, 2019

I added 596000d which should unblock this PR :)

@gziolo gziolo added this to the Gutenberg 6.5 milestone Aug 30, 2019
@kjellr

This comment has been minimized.

Copy link
Contributor Author

commented Aug 30, 2019

🎉 Tests are green. Thanks for the fix, @gziolo!

@kjellr kjellr merged commit f4bbc8a into master Aug 30, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@kjellr kjellr deleted the try/loading-animation-to-animate-component branch Aug 30, 2019
dd32 pushed a commit to dd32/gutenberg that referenced this pull request Sep 27, 2019
* Add loading animation to the Animate component.

* Update post-saved-state to use Animate component.

* Update file block to use Animate component.

* Remove unused animation.

* Update README to include the loading animation.

* Update packages/block-library/src/file/edit.js

Co-Authored-By: Riad Benguella <benguella@gmail.com>

* Remove unnecessary animate prop.

* Fix faling unit test which no longer can use shallow rendering
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.