Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign upMove loading animation to the Animate component #17106
Conversation
kjellr
requested review from
ajitbohra,
chrisvanpatten,
gziolo,
jorgefilipecosta,
Soean and
talldan
as
code owners
|
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.
This comment has been minimized.
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.
This comment has been minimized.
Co-Authored-By: Riad Benguella <[email protected]>
|
Thanks for the help, @youknowriad! Those changes are committed, so I think this should be good to go. |
|
@youknowriad any idea what's going on with those failing tests? |
|
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) |
|
Ok, thanks. It looks like that new |
|
I added 596000d which should unblock this PR :) |
|
|
* 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 <[email protected]> * Remove unnecessary animate prop. * Fix faling unit test which no longer can use shallow rendering
kjellr commentedAug 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:
post-saved-stateandfileblock components to use the Animate component.Screenshots
These should look exactly the same as before, but here's what you should see when testing:
File Block "Uploading" state:
Saving state:
