From eae1c1d904a67ef5477fe39ec1e998a0ed5a372f Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 20 Nov 2020 05:08:11 +1000
Subject: [PATCH] Refactored Gallery: Add loading state to gallery image size
 options (#27087)

* Add loading spinner for image size options
Co-authored-by: Glen Davies <glen.davies@a8c.com>
---
 packages/block-library/src/gallery/edit.js    | 20 +++++++++---
 .../block-library/src/gallery/editor.scss     | 31 +++++++++++++++----
 2 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index 281e4ccfd8a2f8..13e9fb2adf97f6 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -16,12 +16,14 @@ import {
  */
 import { compose } from '@wordpress/compose';
 import {
+	BaseControl,
 	Button,
 	PanelBody,
 	SelectControl,
 	ToggleControl,
 	withNotices,
 	RangeControl,
+	Spinner,
 } from '@wordpress/components';
 import {
 	MediaPlaceholder,
@@ -364,7 +366,7 @@ function GalleryEdit( props ) {
 		return <View { ...blockProps }>{ mediaPlaceholder }</View>;
 	}
 
-	const shouldShowSizeOptions = hasImages && ! isEmpty( imageSizeOptions );
+	const shouldShowSizeOptions = ! isEmpty( imageSizeOptions );
 	const hasLinkTo = linkTo && linkTo !== 'none';
 
 	return (
@@ -401,16 +403,26 @@ function GalleryEdit( props ) {
 							onChange={ toggleOpenInNewTab }
 						/>
 					) }
-					{ shouldShowSizeOptions && (
+					{ shouldShowSizeOptions ? (
 						<SelectControl
 							label={ __( 'Image size' ) }
 							value={ sizeSlug }
 							options={ imageSizeOptions }
 							onChange={ updateImagesSize }
 						/>
+					) : (
+						<BaseControl className={ 'gallery-image-sizes' }>
+							<BaseControl.VisualLabel>
+								{ __( 'Image size' ) }
+							</BaseControl.VisualLabel>
+							<View className={ 'gallery-image-sizes__loading' }>
+								<Spinner />
+								{ __( 'Loading options…' ) }
+							</View>
+						</BaseControl>
 					) }
 					{ dirtyImageOptions && (
-						<div className={ 'gallery-settings-buttons' }>
+						<View className={ 'gallery-settings-buttons' }>
 							<Button isPrimary onClick={ applyImageOptions }>
 								{ __( 'Apply to all images' ) }
 							</Button>
@@ -421,7 +433,7 @@ function GalleryEdit( props ) {
 							>
 								{ __( 'Cancel' ) }
 							</Button>
-						</div>
+						</View>
 					) }
 				</PanelBody>
 			</InspectorControls>
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 899594708d923d..402cab6eca2e54 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -35,14 +35,15 @@ figure.wp-block-gallery {
 
 .blocks-gallery-item {
 	// Hide the focus outline that otherwise briefly appears when selecting a block.
-	figure:not( .is-selected ):focus,
+	figure:not(.is-selected):focus,
 	img:focus {
 		outline: none;
 	}
 
 	figure.is-selected {
-		box-shadow: 0 0 0 $border-width $white,
-			0 0 0 3px var( --wp-admin-theme-color );
+		box-shadow:
+			0 0 0 $border-width $white,
+			0 0 0 3px var(--wp-admin-theme-color);
 		border-radius: $radius-block-ui;
 		outline: 2px solid transparent;
 
@@ -86,9 +87,9 @@ figure.wp-block-gallery {
 	position: absolute;
 	top: -2px;
 	margin: $grid-unit-10;
-	z-index: z-index( '.block-library-gallery-item__inline-menu' );
+	z-index: z-index(".block-library-gallery-item__inline-menu");
 	transition: box-shadow 0.2s ease-out;
-	@include reduce-motion( 'transition' );
+	@include reduce-motion( "transition" );
 	border-radius: $radius-block-ui;
 	background: $white;
 	border: $border-width solid $gray-900;
@@ -106,7 +107,7 @@ figure.wp-block-gallery {
 	}
 
 	.components-button.has-icon {
-		&:not( :focus ) {
+		&:not(:focus) {
 			border: none;
 			box-shadow: none;
 		}
@@ -144,3 +145,21 @@ figure.wp-block-gallery {
 		margin-right: 8px;
 	}
 }
+
+.gallery-image-sizes {
+	.components-base-control__label {
+		display: block;
+		margin-bottom: 4px;
+	}
+
+	.gallery-image-sizes__loading {
+		display: flex;
+		align-items: center;
+		color: $gray-700;
+		font-size: $helptext-font-size;
+	}
+
+	.components-spinner {
+		margin: 0 8px 0 4px;
+	}
+}