Move loading animation to the Animate component (#17106)

* 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
WordPress · Aug 30, 2019 · f4bbc8a · f4bbc8a
1 parent 7eb4aca
commit f4bbc8a
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 87 deletions.
diff --git a/assets/stylesheets/_animations.scss b/assets/stylesheets/_animations.scss
@@ -1,7 +1,3 @@
-@mixin edit-post__loading-fade-animation {
-	animation: edit-post__loading-fade-animation 1.6s ease-in-out infinite;
-}
-
 @mixin edit-post__fade-in-animation($speed: 0.2s, $delay: 0s) {
 	animation: edit-post__fade-in-animation $speed ease-out $delay;
 	animation-fill-mode: forwards;

diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
@@ -12,6 +12,7 @@ import {
 	revokeBlobURL,
 } from '@wordpress/blob';
 import {
+	Animate,
 	ClipboardButton,
 	IconButton,
 	Toolbar,
@@ -205,43 +206,47 @@ class FileEdit extends Component {
 						</Toolbar>
 					</MediaUploadCheck>
 				</BlockControls>
-				<div className={ classes }>
-					<div className={ 'wp-block-file__content-wrapper' }>
-						<RichText
-							wrapperClassName={ 'wp-block-file__textlink' }
-							tagName="div" // must be block-level or else cursor disappears
-							value={ fileName }
-							placeholder={ __( 'Write file name…' ) }
-							withoutInteractiveFormatting
-							onChange={ ( text ) => setAttributes( { fileName: text } ) }
-						/>
-						{ showDownloadButton &&
-							<div className={ 'wp-block-file__button-richtext-wrapper' }>
-								{ /* Using RichText here instead of PlainText so that it can be styled like a button */ }
+				<Animate type={ isBlobURL( href ) ? 'loading' : null }>
+					{ ( { className: animateClassName } ) => (
+						<div className={ classnames( classes, animateClassName ) }>
+							<div className={ 'wp-block-file__content-wrapper' }>
 								<RichText
+									wrapperClassName={ 'wp-block-file__textlink' }
 									tagName="div" // must be block-level or else cursor disappears
-									className={ 'wp-block-file__button' }
-									value={ downloadButtonText }
+									value={ fileName }
+									placeholder={ __( 'Write file name…' ) }
 									withoutInteractiveFormatting
-									placeholder={ __( 'Add text…' ) }
-									onChange={ ( text ) => setAttributes( { downloadButtonText: text } ) }
+									onChange={ ( text ) => setAttributes( { fileName: text } ) }
 								/>
+								{ showDownloadButton &&
+									<div className={ 'wp-block-file__button-richtext-wrapper' }>
+										{ /* Using RichText here instead of PlainText so that it can be styled like a button */ }
+										<RichText
+											tagName="div" // must be block-level or else cursor disappears
+											className={ 'wp-block-file__button' }
+											value={ downloadButtonText }
+											withoutInteractiveFormatting
+											placeholder={ __( 'Add text…' ) }
+											onChange={ ( text ) => setAttributes( { downloadButtonText: text } ) }
+										/>
+									</div>
+								}
 							</div>
-						}
-					</div>
-					{ isSelected &&
-						<ClipboardButton
-							isDefault
-							text={ href }
-							className={ 'wp-block-file__copy-url-button' }
-							onCopy={ this.confirmCopyURL }
-							onFinishCopy={ this.resetCopyConfirmation }
-							disabled={ isBlobURL( href ) }
-						>
-							{ showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy URL' ) }
-						</ClipboardButton>
-					}
-				</div>
+							{ isSelected &&
+								<ClipboardButton
+									isDefault
+									text={ href }
+									className={ 'wp-block-file__copy-url-button' }
+									onCopy={ this.confirmCopyURL }
+									onFinishCopy={ this.resetCopyConfirmation }
+									disabled={ isBlobURL( href ) }
+								>
+									{ showCopyConfirmation ? __( 'Copied!' ) : __( 'Copy URL' ) }
+								</ClipboardButton>
+							}
+						</div>
+					) }
+				</Animate>
 			</>
 		);
 	}

diff --git a/packages/block-library/src/file/editor.scss b/packages/block-library/src/file/editor.scss
@@ -4,10 +4,6 @@
 	align-items: center;
 	margin-bottom: 0;
 
-	&.is-transient {
-		@include edit-post__loading-fade-animation;
-	}
-
 	.wp-block-file__content-wrapper {
 		flex-grow: 1;
 	}

diff --git a/packages/components/src/animate/README.md b/packages/components/src/animate/README.md
@@ -38,6 +38,10 @@ Name | Type | Default | Description
 --- | --- | --- | ---
 `origin` | `string` | `top center` | Point of origin (`top`, `bottom`,` middle right`, `left`, `center`).
 
+### loading
+
+This animation is meant to be used to indicate that activity is happening in the background. It is an infinitely-looping fade from 50% to full opacity. This animation has no options, and should be removed as soon as its relevant operation is completed. 
+
 ### slide-in
 
 This animation is meant for sidebars and sliding menus. It shows the height and width of the animated element moving from a hidden position to its normal one.

diff --git a/packages/components/src/animate/index.js b/packages/components/src/animate/index.js
@@ -30,6 +30,14 @@ function Animate( { type, options = {}, children } ) {
 		} );
 	}
 
+	if ( type === 'loading' ) {
+		return children( {
+			className: classnames(
+				'components-animate__loading',
+			),
+		} );
+	}
+
 	return children( {} );
 }
 

diff --git a/packages/components/src/animate/style.scss b/packages/components/src/animate/style.scss
@@ -43,3 +43,19 @@
 		transform: translateX(0%);
 	}
 }
+
+.components-animate__loading {
+	animation: components-animate__loading 1.6s ease-in-out infinite;
+}
+
+@keyframes components-animate__loading {
+	0% {
+		opacity: 0.5;
+	}
+	50% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0.5;
+	}
+}
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -30,18 +30,6 @@
 // These keyframes should not be part of the _animations.scss mixins file.
 // Because keyframe animations can't be defined as mixins properly, they are duplicated.
 // Since hey are intended only for the editor, we add them here instead.
-@keyframes edit-post__loading-fade-animation {
-	0% {
-		opacity: 0.5;
-	}
-	50% {
-		opacity: 1;
-	}
-	100% {
-		opacity: 0.5;
-	}
-}
-
 @keyframes edit-post__fade-in-animation {
 	from {
 		opacity: 0;

diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss
@@ -56,18 +56,6 @@ body.gutenberg_page_gutenberg-widgets {
 // These keyframes should not be part of the _animations.scss mixins file.
 // Because keyframe animations can't be defined as mixins properly, they are duplicated.
 // Since hey are intended only for the editor, we add them here instead.
-@keyframes edit-post__loading-fade-animation {
-	0% {
-		opacity: 0.5;
-	}
-	50% {
-		opacity: 1;
-	}
-	100% {
-		opacity: 0.5;
-	}
-}
-
 @keyframes edit-post__fade-in-animation {
 	from {
 		opacity: 0;

diff --git a/packages/editor/src/components/post-saved-state/index.js b/packages/editor/src/components/post-saved-state/index.js
@@ -8,7 +8,7 @@ import { get } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Dashicon, Button, IconButton } from '@wordpress/components';
+import { Animate, Dashicon, Button, IconButton } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { displayShortcut } from '@wordpress/keycodes';
@@ -66,10 +66,14 @@ export class PostSavedState extends Component {
 			} );
 
 			return (
-				<span className={ classes }>
-					<Dashicon icon="cloud" />
-					{ isAutosaving ? __( 'Autosaving' ) : __( 'Saving' ) }
-				</span>
+				<Animate type="loading">
+					{ ( { className: animateClassName } ) => (
+						<span className={ classnames( classes, animateClassName ) }>
+							<Dashicon icon="cloud" />
+							{ isAutosaving ? __( 'Autosaving' ) : __( 'Saving' ) }
+						</span>
+					) }
+				</Animate>
 			);
 		}
 

diff --git a/packages/editor/src/components/post-saved-state/style.scss b/packages/editor/src/components/post-saved-state/style.scss
@@ -7,10 +7,6 @@
 	overflow: hidden;
 	white-space: nowrap;
 
-	&.is-saving {
-		animation: edit-post__loading-fade-animation 0.5s infinite;
-	}
-
 	.dashicon {
 		display: inline-block;
 		flex: 0 0 auto;

diff --git a/packages/editor/src/components/post-saved-state/test/index.js b/packages/editor/src/components/post-saved-state/test/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 
 /**
  * Internal dependencies
@@ -10,7 +10,7 @@ import { PostSavedState } from '../';
 
 describe( 'PostSavedState', () => {
 	it( 'should display saving while save in progress, even if not saveable', () => {
-		const wrapper = shallow(
+		const wrapper = mount(
 			<PostSavedState
 				isNew
 				isDirty={ false }

diff --git a/playground/src/style.scss b/playground/src/style.scss
@@ -43,18 +43,6 @@
 // These keyframes should not be part of the _animations.scss mixins file.
 // Because keyframe animations can't be defined as mixins properly, they are duplicated.
 // Since hey are intended only for the editor, we add them here instead.
-@keyframes edit-post__loading-fade-animation {
-	0% {
-		opacity: 0.5;
-	}
-	50% {
-		opacity: 1;
-	}
-	100% {
-		opacity: 0.5;
-	}
-}
-
 @keyframes edit-post__fade-in-animation {
 	from {
 		opacity: 0;