Show Spinner from calypso while media is loading

Automattic · Jul 27, 2020 · ed5175d · ed5175d
1 parent 3b67a56
commit ed5175d
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 9 deletions.
diff --git a/extensions/blocks/story/player/slide.js b/extensions/blocks/story/player/slide.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
 import waitMediaReady from './lib/wait-media-ready';
 
 /**
@@ -151,10 +150,24 @@ export const Slide = ( {
 	}, [ mediaRef.current ] );
 
 	return (
-		<div className="wp-story-slide" style={ { display: visible ? 'block' : 'none' } }>
-			{ loading && <div className="wp-story-slide-loading"></div> }
-			<Media { ...media } index={ index } mediaRef={ mediaRef } />
-		</div>
+		<>
+			{ /* spinner from wp-calypso components */ }
+			{ visible && loading && (
+				<div className="wp-story-slide is-loading">
+					<div className="spinner">
+						<div className="spinner__outer">
+							<div className="spinner__inner" />
+						</div>
+					</div>
+				</div>
+			) }
+			<div
+				className="wp-story-slide"
+				style={ { display: visible && ! loading ? 'block' : 'none' } }
+			>
+				<Media { ...media } index={ index } mediaRef={ mediaRef } />
+			</div>
+		</>
 	);
 };
 

diff --git a/extensions/blocks/story/player/style.scss b/extensions/blocks/story/player/style.scss
@@ -1,6 +1,7 @@
 @import '../../../shared/styles/gutenberg-base-styles.scss';
 @import '../../../shared/styles/jetpack-variables.scss';
 @import './variables.scss';
+@import '~@wordpress/components/src/spinner/style';
 
 .wp-story-container {
 	height: 496px;
@@ -248,11 +249,45 @@
 			height: 100%;
 			width: auto;
 
-			.wp-story-slide-loading {
-				width: 100%;
-				height: 100%;
-				position: absolute;
+			&.is-loading {
 				background-color: #484542;
+				align-items: center;
+				justify-content: center;
+
+				@keyframes rotate-spinner {
+					100% {
+						transform: rotate( 360deg );
+					}
+				}
+
+				.spinner {
+					display: flex;
+					align-items: center;
+				}
+
+				.spinner__outer, .spinner__inner {
+					margin: auto;
+					box-sizing: border-box;
+					border: 0.1em solid transparent;
+					border-radius: 50%;
+					animation: 3s linear infinite;
+					animation-name: rotate-spinner;
+				}
+
+				.spinner__outer {
+					width: 40px;
+					height: 40px;
+					font-size: 40px;
+					border-top-color: #FFF;
+				}
+
+				.spinner__inner {
+					width: 100%;
+					height: 100%;
+					border-top-color: #C4C4C4;
+					border-right-color: #C4C4C4;
+					opacity: 0.4;
+				}
 			}
 		}