From 98f08efdb8048b8f78c7476b774d1128c1d31295 Mon Sep 17 00:00:00 2001
From: Tung Du <dinhtungdu@gmail.com>
Date: Thu, 11 Aug 2022 11:21:57 +0700
Subject: [PATCH] try: render placeholder serverside

---
 .../components/loading-placeholder/index.tsx  | 18 ++++--
 .../js/base/components/price-slider/index.tsx | 18 ------
 .../base/components/price-slider/style.scss   |  2 -
 .../PriceFilterLoadingPlaceholder.tsx         | 57 +++++++++++++++++++
 assets/js/blocks/price-filter/block.tsx       | 15 +++++
 assets/js/blocks/price-filter/index.tsx       |  8 +--
 6 files changed, 90 insertions(+), 28 deletions(-)
 create mode 100644 assets/js/blocks/price-filter/PriceFilterLoadingPlaceholder.tsx

diff --git a/assets/js/base/components/loading-placeholder/index.tsx b/assets/js/base/components/loading-placeholder/index.tsx
index db90d4ac419..147f87d6670 100644
--- a/assets/js/base/components/loading-placeholder/index.tsx
+++ b/assets/js/base/components/loading-placeholder/index.tsx
@@ -1,15 +1,25 @@
 interface Props {
-	isLoading: boolean;
-	width: string;
+	isLoading?: boolean;
+	width?: string;
 	height: string;
+	style?: Record< string, string | number >;
 }
 
-const LoadingPlaceHolder = ( { isLoading, width, height }: Props ) => {
+const LoadingPlaceHolder = ( {
+	isLoading = true,
+	width,
+	height,
+	style,
+}: Props ) => {
 	if ( ! isLoading ) return null;
 	return (
 		<div
 			className="wc-block-loading-placeholder"
-			style={ { width, height } }
+			style={ {
+				width,
+				height,
+				...style,
+			} }
 		/>
 	);
 };
diff --git a/assets/js/base/components/price-slider/index.tsx b/assets/js/base/components/price-slider/index.tsx
index 5a462b9fa2a..0a8f7b45e20 100644
--- a/assets/js/base/components/price-slider/index.tsx
+++ b/assets/js/base/components/price-slider/index.tsx
@@ -21,7 +21,6 @@ import './style.scss';
 import { constrainRangeSliderValues } from './constrain-range-slider-values';
 import FilterSubmitButton from '../filter-submit-button';
 import { isValidMaxValue, isValidMinValue } from './utils';
-import LoadingPlaceHolder from '../loading-placeholder';
 
 export interface PriceSliderProps {
 	/**
@@ -374,11 +373,6 @@ const PriceSlider = ( {
 			{ ( ! inlineInput || ! showInputFields ) && slider }
 			{ showInputFields && (
 				<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
-					<LoadingPlaceHolder
-						isLoading={ isLoading && ! hasValidConstraints }
-						width="120px"
-						height="34px"
-					/>
 					<FormattedMonetaryAmount
 						currency={ currency }
 						displayType="input"
@@ -426,11 +420,6 @@ const PriceSlider = ( {
 						disabled={ isLoading || ! hasValidConstraints }
 						value={ maxPriceInput }
 					/>
-					<LoadingPlaceHolder
-						isLoading={ isLoading && ! hasValidConstraints }
-						width="120px"
-						height="34px"
-					/>
 				</div>
 			) }
 			<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
@@ -452,13 +441,6 @@ const PriceSlider = ( {
 							/>
 						</div>
 					) }
-				<LoadingPlaceHolder
-					isLoading={
-						isLoading && ! showInputFields && ! hasValidConstraints
-					}
-					width="200px"
-					height="25px"
-				/>
 				{ showFilterButton && (
 					<FilterSubmitButton
 						className="wc-block-price-filter__button wc-block-components-price-slider__button"
diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss
index 52e56479be8..97ec3a3d80a 100644
--- a/assets/js/base/components/price-slider/style.scss
+++ b/assets/js/base/components/price-slider/style.scss
@@ -56,7 +56,6 @@
 		.wc-block-components-price-slider__range-input-wrapper,
 		.wc-block-components-filter-reset-button,
 		.wc-block-components-filter-submit-button {
-			@include placeholder();
 			box-shadow: none;
 		}
 
@@ -261,7 +260,6 @@
 	.wc-block-components-price-slider {
 		&.is-loading.is-disabled {
 			.wc-block-components-price-slider__range-input-wrapper {
-				@include placeholder();
 				box-shadow: none;
 			}
 		}
diff --git a/assets/js/blocks/price-filter/PriceFilterLoadingPlaceholder.tsx b/assets/js/blocks/price-filter/PriceFilterLoadingPlaceholder.tsx
new file mode 100644
index 00000000000..a354fa38d06
--- /dev/null
+++ b/assets/js/blocks/price-filter/PriceFilterLoadingPlaceholder.tsx
@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import LoadingPlaceHolder from '@woocommerce/base-components/loading-placeholder';
+
+interface Props {
+	showInputFields: boolean;
+	inlineInput: boolean;
+	showFilterButton: boolean;
+	isEditor?: boolean;
+}
+
+const PriceFilterLoadingPlaceholder = ( {
+	showInputFields,
+	inlineInput,
+	showFilterButton,
+	isEditor = false,
+}: Props ) => (
+	<>
+		{ ! isEditor && (
+			<LoadingPlaceHolder
+				height="35px"
+				width="200px"
+				style={ { marginBottom: '20px' } }
+			/>
+		) }
+
+		<div className="wc-block-price-slider">
+			<LoadingPlaceHolder
+				height="8px"
+				isLoading={ ! inlineInput || ! showInputFields }
+			/>
+			<div className="wc-block-components-price-slider__controls">
+				<LoadingPlaceHolder width="120px" height="34px" />
+				<LoadingPlaceHolder height="8px" isLoading={ inlineInput } />
+				<LoadingPlaceHolder width="120px" height="34px" />
+			</div>
+			<div className="wc-block-components-price-slider__controls">
+				<LoadingPlaceHolder
+					isLoading={ ! showInputFields }
+					width="200px"
+					height="25px"
+				/>
+				<LoadingPlaceHolder
+					isLoading={ showFilterButton }
+					width="100px"
+					height="50px"
+					style={ {
+						marginLeft: 'auto',
+					} }
+				/>
+			</div>
+		</div>
+	</>
+);
+
+export default PriceFilterLoadingPlaceholder;
diff --git a/assets/js/blocks/price-filter/block.tsx b/assets/js/blocks/price-filter/block.tsx
index 87c5df5cb2d..975e3c58f56 100644
--- a/assets/js/blocks/price-filter/block.tsx
+++ b/assets/js/blocks/price-filter/block.tsx
@@ -28,6 +28,7 @@ import {
 import usePriceConstraints from './use-price-constraints';
 import './style.scss';
 import { Attributes } from './types';
+import PriceFilterLoadingPlaceholder from './PriceFilterLoadingPlaceholder';
 
 /**
  * Formats filter values into a string for the URL parameters needed for filtering PHP templates.
@@ -300,6 +301,20 @@ const PriceFilterBlock = ( {
 		return null;
 	}
 
+	if (
+		isLoading &&
+		! ( isFinite( minConstraint ) && isFinite( maxConstraint ) )
+	) {
+		return (
+			<PriceFilterLoadingPlaceholder
+				showInputFields={ attributes.showInputFields }
+				inlineInput={ attributes.inlineInput }
+				showFilterButton={ attributes.showFilterButton }
+				isEditor={ isEditor }
+			/>
+		);
+	}
+
 	const TagName =
 		`h${ attributes.headingLevel }` as keyof JSX.IntrinsicElements;
 
diff --git a/assets/js/blocks/price-filter/index.tsx b/assets/js/blocks/price-filter/index.tsx
index 407c62b3d13..e33f60d77cb 100644
--- a/assets/js/blocks/price-filter/index.tsx
+++ b/assets/js/blocks/price-filter/index.tsx
@@ -14,6 +14,7 @@ import { useBlockProps } from '@wordpress/block-editor';
 import edit from './edit';
 import metadata from './block.json';
 import { blockAttributes } from './attributes';
+import PriceFilterLoadingPlaceholder from './PriceFilterLoadingPlaceholder';
 
 registerBlockType( metadata, {
 	title: __( 'Filter Products by Price', 'woo-gutenberg-products-block' ),
@@ -72,6 +73,7 @@ registerBlockType( metadata, {
 			className,
 			showInputFields,
 			showFilterButton,
+			inlineInput,
 			heading,
 			headingLevel,
 		} = attributes;
@@ -80,6 +82,7 @@ registerBlockType( metadata, {
 			'data-showfilterbutton': showFilterButton,
 			'data-heading': heading,
 			'data-heading-level': headingLevel,
+			'data-inline-input': inlineInput,
 		};
 		return (
 			<div
@@ -88,10 +91,7 @@ registerBlockType( metadata, {
 				} ) }
 				{ ...data }
 			>
-				<span
-					aria-hidden
-					className="wc-block-product-categories__placeholder"
-				/>
+				<PriceFilterLoadingPlaceholder { ...attributes } />
 			</div>
 		);
 	},