@wordpress/server-side-render 3.0.2 → 3.0.6

package/README.md

@@ -18,7 +18,7 @@ Install the module
 npm install @wordpress/server-side-render --save
 ```
 
-_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
 
 ## Usage
 
@@ -58,6 +58,7 @@ The HTTP request method to use, either 'GET' or 'POST'. It's 'GET' by default. T
 -   Required: No
 
 #### Example:
+
 ```php
 function add_rest_method( $endpoints ) {
     if ( is_wp_version_compatible( '5.5' ) ) {
@@ -108,9 +109,7 @@ The component is rendered while the API request is being processed (loading stat
 
 ```jsx
 const MyServerSideRender = () => (
-	<ServerSideRender
-		LoadingResponsePlaceholder={ MyAmazingPlaceholder }
-	/>
+	<ServerSideRender LoadingResponsePlaceholder={ MyAmazingPlaceholder } />
 );
 ```
 

package/build/index.js

@@ -49,11 +49,12 @@ const ExportedServerSideRender = (0, _data.withSelect)(select => {
   }
 
   return EMPTY_OBJECT;
-})(({
-  urlQueryArgs = EMPTY_OBJECT,
-  currentPostId,
-  ...props
-}) => {
+})(_ref => {
+  let {
+    urlQueryArgs = EMPTY_OBJECT,
+    currentPostId,
+    ...props
+  } = _ref;
   const newUrlQueryArgs = (0, _element.useMemo)(() => {
     if (!currentPostId) {
       return urlQueryArgs;

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/server-side-render/src/index.js"],"names":["EMPTY_OBJECT","ExportedServerSideRender","select","coreEditorSelect","currentPostId","getCurrentPostId","urlQueryArgs","props","newUrlQueryArgs","post_id","window","wp","components","ServerSideRender","ref","since","alternative"],"mappings":";;;;;;;;;AAGA;;;;AACA;;AACA;;AAKA;;AAVA;AACA;AACA;;AAKA;AACA;AACA;;AAGA;AACA;AACA;AACA,MAAMA,YAAY,GAAG,EAArB;AAEA,MAAMC,wBAAwB,GAAG,sBAAcC,MAAF,IAAc;AAC1D;AACA;AACA;AACA,QAAMC,gBAAgB,GAAGD,MAAM,CAAE,aAAF,CAA/B;;AACA,MAAKC,gBAAL,EAAwB;AACvB,UAAMC,aAAa,GAAGD,gBAAgB,CAACE,gBAAjB,EAAtB,CADuB,CAEvB;AACA;AACA;AACA;;AACA,QAAKD,aAAa,IAAI,OAAOA,aAAP,KAAyB,QAA/C,EAA0D;AACzD,aAAO;AACNA,QAAAA;AADM,OAAP;AAGA;AACD;;AACD,SAAOJ,YAAP;AACA,CAlBgC,EAkB5B,CAAE;AAAEM,EAAAA,YAAY,GAAGN,YAAjB;AAA+BI,EAAAA,aAA/B;AAA8C,KAAGG;AAAjD,CAAF,KAAgE;AACpE,QAAMC,eAAe,GAAG,sBAAS,MAAM;AACtC,QAAK,CAAEJ,aAAP,EAAuB;AACtB,aAAOE,YAAP;AACA;;AACD,WAAO;AACNG,MAAAA,OAAO,EAAEL,aADH;AAEN,SAAGE;AAFG,KAAP;AAIA,GARuB,EAQrB,CAAEF,aAAF,EAAiBE,YAAjB,CARqB,CAAxB;AAUA,SAAO,4BAAC,yBAAD;AAAkB,IAAA,YAAY,EAAGE;AAAjC,KAAwDD,KAAxD,EAAP;AACA,CA9BgC,CAAjC;;AAgCA,IAAKG,MAAM,IAAIA,MAAM,CAACC,EAAjB,IAAuBD,MAAM,CAACC,EAAP,CAAUC,UAAtC,EAAmD;AAClDF,EAAAA,MAAM,CAACC,EAAP,CAAUC,UAAV,CAAqBC,gBAArB,GAAwC,yBAAY,CAAEN,KAAF,EAASO,GAAT,KAAkB;AACrE,6BAAY,gCAAZ,EAA8C;AAC7CC,MAAAA,KAAK,EAAE,KADsC;AAE7CC,MAAAA,WAAW,EAAE;AAFgC,KAA9C;AAIA,WAAO,4BAAC,wBAAD,6BAA+BT,KAA/B;AAAuC,MAAA,GAAG,EAAGO;AAA7C,OAAP;AACA,GANuC,CAAxC;AAOA;;eAEcb,wB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, forwardRef } from '@wordpress/element';\nimport { withSelect } from '@wordpress/data';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport ServerSideRender from './server-side-render';\n\n/**\n * Constants\n */\nconst EMPTY_OBJECT = {};\n\nconst ExportedServerSideRender = withSelect( ( select ) => {\n\t// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.\n\t// It is used by blocks that can be loaded into a *non-post* block editor.\n\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\tconst coreEditorSelect = select( 'core/editor' );\n\tif ( coreEditorSelect ) {\n\t\tconst currentPostId = coreEditorSelect.getCurrentPostId();\n\t\t// For templates and template parts we use a custom ID format.\n\t\t// Since they aren't real posts, we don't want to use their ID\n\t\t// for server-side rendering. Since they use a string based ID,\n\t\t// we can assume real post IDs are numbers.\n\t\tif ( currentPostId && typeof currentPostId === 'number' ) {\n\t\t\treturn {\n\t\t\t\tcurrentPostId,\n\t\t\t};\n\t\t}\n\t}\n\treturn EMPTY_OBJECT;\n} )( ( { urlQueryArgs = EMPTY_OBJECT, currentPostId, ...props } ) => {\n\tconst newUrlQueryArgs = useMemo( () => {\n\t\tif ( ! currentPostId ) {\n\t\t\treturn urlQueryArgs;\n\t\t}\n\t\treturn {\n\t\t\tpost_id: currentPostId,\n\t\t\t...urlQueryArgs,\n\t\t};\n\t}, [ currentPostId, urlQueryArgs ] );\n\n\treturn <ServerSideRender urlQueryArgs={ newUrlQueryArgs } { ...props } />;\n} );\n\nif ( window && window.wp && window.wp.components ) {\n\twindow.wp.components.ServerSideRender = forwardRef( ( props, ref ) => {\n\t\tdeprecated( 'wp.components.ServerSideRender', {\n\t\t\tsince: '5.3',\n\t\t\talternative: 'wp.serverSideRender',\n\t\t} );\n\t\treturn <ExportedServerSideRender { ...props } ref={ ref } />;\n\t} );\n}\n\nexport default ExportedServerSideRender;\n"]}
+{"version":3,"sources":["@wordpress/server-side-render/src/index.js"],"names":["EMPTY_OBJECT","ExportedServerSideRender","select","coreEditorSelect","currentPostId","getCurrentPostId","urlQueryArgs","props","newUrlQueryArgs","post_id","window","wp","components","ServerSideRender","ref","since","alternative"],"mappings":";;;;;;;;;AAGA;;;;AACA;;AACA;;AAKA;;AAVA;AACA;AACA;;AAKA;AACA;AACA;;AAGA;AACA;AACA;AACA,MAAMA,YAAY,GAAG,EAArB;AAEA,MAAMC,wBAAwB,GAAG,sBAAcC,MAAF,IAAc;AAC1D;AACA;AACA;AACA,QAAMC,gBAAgB,GAAGD,MAAM,CAAE,aAAF,CAA/B;;AACA,MAAKC,gBAAL,EAAwB;AACvB,UAAMC,aAAa,GAAGD,gBAAgB,CAACE,gBAAjB,EAAtB,CADuB,CAEvB;AACA;AACA;AACA;;AACA,QAAKD,aAAa,IAAI,OAAOA,aAAP,KAAyB,QAA/C,EAA0D;AACzD,aAAO;AACNA,QAAAA;AADM,OAAP;AAGA;AACD;;AACD,SAAOJ,YAAP;AACA,CAlBgC,EAkB5B,QAAgE;AAAA,MAA9D;AAAEM,IAAAA,YAAY,GAAGN,YAAjB;AAA+BI,IAAAA,aAA/B;AAA8C,OAAGG;AAAjD,GAA8D;AACpE,QAAMC,eAAe,GAAG,sBAAS,MAAM;AACtC,QAAK,CAAEJ,aAAP,EAAuB;AACtB,aAAOE,YAAP;AACA;;AACD,WAAO;AACNG,MAAAA,OAAO,EAAEL,aADH;AAEN,SAAGE;AAFG,KAAP;AAIA,GARuB,EAQrB,CAAEF,aAAF,EAAiBE,YAAjB,CARqB,CAAxB;AAUA,SAAO,4BAAC,yBAAD;AAAkB,IAAA,YAAY,EAAGE;AAAjC,KAAwDD,KAAxD,EAAP;AACA,CA9BgC,CAAjC;;AAgCA,IAAKG,MAAM,IAAIA,MAAM,CAACC,EAAjB,IAAuBD,MAAM,CAACC,EAAP,CAAUC,UAAtC,EAAmD;AAClDF,EAAAA,MAAM,CAACC,EAAP,CAAUC,UAAV,CAAqBC,gBAArB,GAAwC,yBAAY,CAAEN,KAAF,EAASO,GAAT,KAAkB;AACrE,6BAAY,gCAAZ,EAA8C;AAC7CC,MAAAA,KAAK,EAAE,KADsC;AAE7CC,MAAAA,WAAW,EAAE;AAFgC,KAA9C;AAIA,WAAO,4BAAC,wBAAD,6BAA+BT,KAA/B;AAAuC,MAAA,GAAG,EAAGO;AAA7C,OAAP;AACA,GANuC,CAAxC;AAOA;;eAEcb,wB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, forwardRef } from '@wordpress/element';\nimport { withSelect } from '@wordpress/data';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport ServerSideRender from './server-side-render';\n\n/**\n * Constants\n */\nconst EMPTY_OBJECT = {};\n\nconst ExportedServerSideRender = withSelect( ( select ) => {\n\t// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.\n\t// It is used by blocks that can be loaded into a *non-post* block editor.\n\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\tconst coreEditorSelect = select( 'core/editor' );\n\tif ( coreEditorSelect ) {\n\t\tconst currentPostId = coreEditorSelect.getCurrentPostId();\n\t\t// For templates and template parts we use a custom ID format.\n\t\t// Since they aren't real posts, we don't want to use their ID\n\t\t// for server-side rendering. Since they use a string based ID,\n\t\t// we can assume real post IDs are numbers.\n\t\tif ( currentPostId && typeof currentPostId === 'number' ) {\n\t\t\treturn {\n\t\t\t\tcurrentPostId,\n\t\t\t};\n\t\t}\n\t}\n\treturn EMPTY_OBJECT;\n} )( ( { urlQueryArgs = EMPTY_OBJECT, currentPostId, ...props } ) => {\n\tconst newUrlQueryArgs = useMemo( () => {\n\t\tif ( ! currentPostId ) {\n\t\t\treturn urlQueryArgs;\n\t\t}\n\t\treturn {\n\t\t\tpost_id: currentPostId,\n\t\t\t...urlQueryArgs,\n\t\t};\n\t}, [ currentPostId, urlQueryArgs ] );\n\n\treturn <ServerSideRender urlQueryArgs={ newUrlQueryArgs } { ...props } />;\n} );\n\nif ( window && window.wp && window.wp.components ) {\n\twindow.wp.components.ServerSideRender = forwardRef( ( props, ref ) => {\n\t\tdeprecated( 'wp.components.ServerSideRender', {\n\t\t\tsince: '5.3',\n\t\t\talternative: 'wp.serverSideRender',\n\t\t} );\n\t\treturn <ExportedServerSideRender { ...props } ref={ ref } />;\n\t} );\n}\n\nexport default ExportedServerSideRender;\n"]}

package/build/server-side-render.js

@@ -5,8 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rendererPath = rendererPath;
 exports.default = ServerSideRender;
+exports.rendererPath = rendererPath;
 
 var _element = require("@wordpress/element");
 
@@ -33,7 +33,9 @@ var _blocks = require("@wordpress/blocks");
 /**
  * WordPress dependencies
  */
-function rendererPath(block, attributes = null, urlQueryArgs = {}) {
+function rendererPath(block) {
+  let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  let urlQueryArgs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   return (0, _url.addQueryArgs)(`/wp/v2/block-renderer/${block}`, {
     context: 'edit',
     ...(null !== attributes ? {
@@ -43,18 +45,20 @@ function rendererPath(block, attributes = null, urlQueryArgs = {}) {
   });
 }
 
-function DefaultEmptyResponsePlaceholder({
-  className
-}) {
+function DefaultEmptyResponsePlaceholder(_ref) {
+  let {
+    className
+  } = _ref;
   return (0, _element.createElement)(_components.Placeholder, {
     className: className
   }, (0, _i18n.__)('Block rendered as empty.'));
 }
 
-function DefaultErrorResponsePlaceholder({
-  response,
-  className
-}) {
+function DefaultErrorResponsePlaceholder(_ref2) {
+  let {
+    response,
+    className
+  } = _ref2;
   const errorMessage = (0, _i18n.sprintf)( // translators: %s: error message describing the problem
   (0, _i18n.__)('Error loading block: %s'), response.errorMsg);
   return (0, _element.createElement)(_components.Placeholder, {
@@ -62,12 +66,28 @@ function DefaultErrorResponsePlaceholder({
   }, errorMessage);
 }
 
-function DefaultLoadingResponsePlaceholder({
-  className
-}) {
-  return (0, _element.createElement)(_components.Placeholder, {
-    className: className
-  }, (0, _element.createElement)(_components.Spinner, null));
+function DefaultLoadingResponsePlaceholder(_ref3) {
+  let {
+    children,
+    showLoader
+  } = _ref3;
+  return (0, _element.createElement)("div", {
+    style: {
+      position: 'relative'
+    }
+  }, showLoader && (0, _element.createElement)("div", {
+    style: {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      marginTop: '-9px',
+      marginLeft: '-9px'
+    }
+  }, (0, _element.createElement)(_components.Spinner, null)), (0, _element.createElement)("div", {
+    style: {
+      opacity: showLoader ? '0.3' : 1
+    }
+  }, children));
 }
 
 function ServerSideRender(props) {
@@ -82,19 +102,18 @@ function ServerSideRender(props) {
     LoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder
   } = props;
   const isMountedRef = (0, _element.useRef)(true);
+  const [showLoader, setShowLoader] = (0, _element.useState)(false);
   const fetchRequestRef = (0, _element.useRef)();
   const [response, setResponse] = (0, _element.useState)(null);
   const prevProps = (0, _compose.usePrevious)(props);
+  const [isLoading, setIsLoading] = (0, _element.useState)(false);
 
   function fetchData() {
     if (!isMountedRef.current) {
       return;
     }
 
-    if (null !== response) {
-      setResponse(null);
-    }
-
+    setIsLoading(true);
     const sanitizedAttributes = attributes && (0, _blocks.__experimentalSanitizeBlockAttributes)(block, attributes); // If httpMethod is 'POST', send the attributes in the request body instead of the URL.
     // This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.
 
@@ -121,6 +140,10 @@ function ServerSideRender(props) {
           errorMsg: error.message
         });
       }
+    }).finally(() => {
+      if (isMountedRef.current && fetchRequest === fetchRequestRef.current) {
+        setIsLoading(false);
+      }
     });
     return fetchRequest;
   }
@@ -140,17 +163,44 @@ function ServerSideRender(props) {
       debouncedFetchData();
     }
   });
+  /**
+   * Effect to handle showing the loading placeholder.
+   * Show it only if there is no previous response or
+   * the request takes more than one second.
+   */
+
+  (0, _element.useEffect)(() => {
+    if (!isLoading) {
+      return;
+    }
 
-  if (response === '') {
+    const timeout = setTimeout(() => {
+      setShowLoader(true);
+    }, 1000);
+    return () => clearTimeout(timeout);
+  }, [isLoading]);
+  const hasResponse = !!response;
+  const hasEmptyResponse = response === '';
+  const hasError = response === null || response === void 0 ? void 0 : response.error;
+
+  if (hasEmptyResponse || !hasResponse) {
     return (0, _element.createElement)(EmptyResponsePlaceholder, props);
-  } else if (!response) {
-    return (0, _element.createElement)(LoadingResponsePlaceholder, props);
-  } else if (response.error) {
+  }
+
+  if (hasError) {
     return (0, _element.createElement)(ErrorResponsePlaceholder, (0, _extends2.default)({
       response: response
     }, props));
   }
 
+  if (isLoading) {
+    return (0, _element.createElement)(LoadingResponsePlaceholder, (0, _extends2.default)({}, props, {
+      showLoader: showLoader
+    }), hasResponse && (0, _element.createElement)(_element.RawHTML, {
+      className: className
+    }, response));
+  }
+
   return (0, _element.createElement)(_element.RawHTML, {
     className: className
   }, response);

package/build/server-side-render.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/server-side-render/src/server-side-render.js"],"names":["rendererPath","block","attributes","urlQueryArgs","context","DefaultEmptyResponsePlaceholder","className","DefaultErrorResponsePlaceholder","response","errorMessage","errorMsg","DefaultLoadingResponsePlaceholder","ServerSideRender","props","httpMethod","EmptyResponsePlaceholder","ErrorResponsePlaceholder","LoadingResponsePlaceholder","isMountedRef","fetchRequestRef","setResponse","prevProps","fetchData","current","sanitizedAttributes","isPostRequest","urlAttributes","path","data","fetchRequest","method","then","fetchResponse","rendered","catch","error","message","debouncedFetchData","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useDebounce, usePrevious } from '@wordpress/compose';\nimport { RawHTML, useEffect, useRef, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport apiFetch from '@wordpress/api-fetch';\nimport { addQueryArgs } from '@wordpress/url';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';\n\nexport function rendererPath( block, attributes = null, urlQueryArgs = {} ) {\n\treturn addQueryArgs( `/wp/v2/block-renderer/${ block }`, {\n\t\tcontext: 'edit',\n\t\t...( null !== attributes ? { attributes } : {} ),\n\t\t...urlQueryArgs,\n\t} );\n}\n\nfunction DefaultEmptyResponsePlaceholder( { className } ) {\n\treturn (\n\t\t<Placeholder className={ className }>\n\t\t\t{ __( 'Block rendered as empty.' ) }\n\t\t</Placeholder>\n\t);\n}\n\nfunction DefaultErrorResponsePlaceholder( { response, className } ) {\n\tconst errorMessage = sprintf(\n\t\t// translators: %s: error message describing the problem\n\t\t__( 'Error loading block: %s' ),\n\t\tresponse.errorMsg\n\t);\n\treturn <Placeholder className={ className }>{ errorMessage }</Placeholder>;\n}\n\nfunction DefaultLoadingResponsePlaceholder( { className } ) {\n\treturn (\n\t\t<Placeholder className={ className }>\n\t\t\t<Spinner />\n\t\t</Placeholder>\n\t);\n}\n\nexport default function ServerSideRender( props ) {\n\tconst {\n\t\tattributes,\n\t\tblock,\n\t\tclassName,\n\t\thttpMethod = 'GET',\n\t\turlQueryArgs,\n\t\tEmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,\n\t\tErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,\n\t\tLoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,\n\t} = props;\n\n\tconst isMountedRef = useRef( true );\n\tconst fetchRequestRef = useRef();\n\tconst [ response, setResponse ] = useState( null );\n\tconst prevProps = usePrevious( props );\n\n\tfunction fetchData() {\n\t\tif ( ! isMountedRef.current ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( null !== response ) {\n\t\t\tsetResponse( null );\n\t\t}\n\n\t\tconst sanitizedAttributes =\n\t\t\tattributes &&\n\t\t\t__experimentalSanitizeBlockAttributes( block, attributes );\n\n\t\t// If httpMethod is 'POST', send the attributes in the request body instead of the URL.\n\t\t// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.\n\t\tconst isPostRequest = 'POST' === httpMethod;\n\t\tconst urlAttributes = isPostRequest\n\t\t\t? null\n\t\t\t: sanitizedAttributes ?? null;\n\t\tconst path = rendererPath( block, urlAttributes, urlQueryArgs );\n\t\tconst data = isPostRequest\n\t\t\t? { attributes: sanitizedAttributes ?? null }\n\t\t\t: null;\n\n\t\t// Store the latest fetch request so that when we process it, we can\n\t\t// check if it is the current request, to avoid race conditions on slow networks.\n\t\tconst fetchRequest = ( fetchRequestRef.current = apiFetch( {\n\t\t\tpath,\n\t\t\tdata,\n\t\t\tmethod: isPostRequest ? 'POST' : 'GET',\n\t\t} )\n\t\t\t.then( ( fetchResponse ) => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current &&\n\t\t\t\t\tfetchResponse\n\t\t\t\t) {\n\t\t\t\t\tsetResponse( fetchResponse.rendered );\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.catch( ( error ) => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current\n\t\t\t\t) {\n\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\terror: true,\n\t\t\t\t\t\terrorMsg: error.message,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t} ) );\n\n\t\treturn fetchRequest;\n\t}\n\n\tconst debouncedFetchData = useDebounce( fetchData, 500 );\n\n\t// When the component unmounts, set isMountedRef to false. This will\n\t// let the async fetch callbacks know when to stop.\n\tuseEffect(\n\t\t() => () => {\n\t\t\tisMountedRef.current = false;\n\t\t},\n\t\t[]\n\t);\n\n\tuseEffect( () => {\n\t\t// Don't debounce the first fetch. This ensures that the first render\n\t\t// shows data as soon as possible\n\t\tif ( prevProps === undefined ) {\n\t\t\tfetchData();\n\t\t} else if ( ! isEqual( prevProps, props ) ) {\n\t\t\tdebouncedFetchData();\n\t\t}\n\t} );\n\n\tif ( response === '' ) {\n\t\treturn <EmptyResponsePlaceholder { ...props } />;\n\t} else if ( ! response ) {\n\t\treturn <LoadingResponsePlaceholder { ...props } />;\n\t} else if ( response.error ) {\n\t\treturn <ErrorResponsePlaceholder response={ response } { ...props } />;\n\t}\n\n\treturn <RawHTML className={ className }>{ response }</RawHTML>;\n}\n"]}
+{"version":3,"sources":["@wordpress/server-side-render/src/server-side-render.js"],"names":["rendererPath","block","attributes","urlQueryArgs","context","DefaultEmptyResponsePlaceholder","className","DefaultErrorResponsePlaceholder","response","errorMessage","errorMsg","DefaultLoadingResponsePlaceholder","children","showLoader","position","top","left","marginTop","marginLeft","opacity","ServerSideRender","props","httpMethod","EmptyResponsePlaceholder","ErrorResponsePlaceholder","LoadingResponsePlaceholder","isMountedRef","setShowLoader","fetchRequestRef","setResponse","prevProps","isLoading","setIsLoading","fetchData","current","sanitizedAttributes","isPostRequest","urlAttributes","path","data","fetchRequest","method","then","fetchResponse","rendered","catch","error","message","finally","debouncedFetchData","undefined","timeout","setTimeout","clearTimeout","hasResponse","hasEmptyResponse","hasError"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useDebounce, usePrevious } from '@wordpress/compose';\nimport { RawHTML, useEffect, useRef, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport apiFetch from '@wordpress/api-fetch';\nimport { addQueryArgs } from '@wordpress/url';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';\n\nexport function rendererPath( block, attributes = null, urlQueryArgs = {} ) {\n\treturn addQueryArgs( `/wp/v2/block-renderer/${ block }`, {\n\t\tcontext: 'edit',\n\t\t...( null !== attributes ? { attributes } : {} ),\n\t\t...urlQueryArgs,\n\t} );\n}\n\nfunction DefaultEmptyResponsePlaceholder( { className } ) {\n\treturn (\n\t\t<Placeholder className={ className }>\n\t\t\t{ __( 'Block rendered as empty.' ) }\n\t\t</Placeholder>\n\t);\n}\n\nfunction DefaultErrorResponsePlaceholder( { response, className } ) {\n\tconst errorMessage = sprintf(\n\t\t// translators: %s: error message describing the problem\n\t\t__( 'Error loading block: %s' ),\n\t\tresponse.errorMsg\n\t);\n\treturn <Placeholder className={ className }>{ errorMessage }</Placeholder>;\n}\n\nfunction DefaultLoadingResponsePlaceholder( { children, showLoader } ) {\n\treturn (\n\t\t<div style={ { position: 'relative' } }>\n\t\t\t{ showLoader && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: '50%',\n\t\t\t\t\t\tleft: '50%',\n\t\t\t\t\t\tmarginTop: '-9px',\n\t\t\t\t\t\tmarginLeft: '-9px',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Spinner />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div style={ { opacity: showLoader ? '0.3' : 1 } }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default function ServerSideRender( props ) {\n\tconst {\n\t\tattributes,\n\t\tblock,\n\t\tclassName,\n\t\thttpMethod = 'GET',\n\t\turlQueryArgs,\n\t\tEmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,\n\t\tErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,\n\t\tLoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,\n\t} = props;\n\n\tconst isMountedRef = useRef( true );\n\tconst [ showLoader, setShowLoader ] = useState( false );\n\tconst fetchRequestRef = useRef();\n\tconst [ response, setResponse ] = useState( null );\n\tconst prevProps = usePrevious( props );\n\tconst [ isLoading, setIsLoading ] = useState( false );\n\n\tfunction fetchData() {\n\t\tif ( ! isMountedRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetIsLoading( true );\n\n\t\tconst sanitizedAttributes =\n\t\t\tattributes &&\n\t\t\t__experimentalSanitizeBlockAttributes( block, attributes );\n\n\t\t// If httpMethod is 'POST', send the attributes in the request body instead of the URL.\n\t\t// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.\n\t\tconst isPostRequest = 'POST' === httpMethod;\n\t\tconst urlAttributes = isPostRequest\n\t\t\t? null\n\t\t\t: sanitizedAttributes ?? null;\n\t\tconst path = rendererPath( block, urlAttributes, urlQueryArgs );\n\t\tconst data = isPostRequest\n\t\t\t? { attributes: sanitizedAttributes ?? null }\n\t\t\t: null;\n\n\t\t// Store the latest fetch request so that when we process it, we can\n\t\t// check if it is the current request, to avoid race conditions on slow networks.\n\t\tconst fetchRequest = ( fetchRequestRef.current = apiFetch( {\n\t\t\tpath,\n\t\t\tdata,\n\t\t\tmethod: isPostRequest ? 'POST' : 'GET',\n\t\t} )\n\t\t\t.then( ( fetchResponse ) => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current &&\n\t\t\t\t\tfetchResponse\n\t\t\t\t) {\n\t\t\t\t\tsetResponse( fetchResponse.rendered );\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.catch( ( error ) => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current\n\t\t\t\t) {\n\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\terror: true,\n\t\t\t\t\t\terrorMsg: error.message,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.finally( () => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current\n\t\t\t\t) {\n\t\t\t\t\tsetIsLoading( false );\n\t\t\t\t}\n\t\t\t} ) );\n\n\t\treturn fetchRequest;\n\t}\n\n\tconst debouncedFetchData = useDebounce( fetchData, 500 );\n\n\t// When the component unmounts, set isMountedRef to false. This will\n\t// let the async fetch callbacks know when to stop.\n\tuseEffect(\n\t\t() => () => {\n\t\t\tisMountedRef.current = false;\n\t\t},\n\t\t[]\n\t);\n\n\tuseEffect( () => {\n\t\t// Don't debounce the first fetch. This ensures that the first render\n\t\t// shows data as soon as possible\n\t\tif ( prevProps === undefined ) {\n\t\t\tfetchData();\n\t\t} else if ( ! isEqual( prevProps, props ) ) {\n\t\t\tdebouncedFetchData();\n\t\t}\n\t} );\n\n\t/**\n\t * Effect to handle showing the loading placeholder.\n\t * Show it only if there is no previous response or\n\t * the request takes more than one second.\n\t */\n\tuseEffect( () => {\n\t\tif ( ! isLoading ) {\n\t\t\treturn;\n\t\t}\n\t\tconst timeout = setTimeout( () => {\n\t\t\tsetShowLoader( true );\n\t\t}, 1000 );\n\t\treturn () => clearTimeout( timeout );\n\t}, [ isLoading ] );\n\n\tconst hasResponse = !! response;\n\tconst hasEmptyResponse = response === '';\n\tconst hasError = response?.error;\n\n\tif ( hasEmptyResponse || ! hasResponse ) {\n\t\treturn <EmptyResponsePlaceholder { ...props } />;\n\t}\n\n\tif ( hasError ) {\n\t\treturn <ErrorResponsePlaceholder response={ response } { ...props } />;\n\t}\n\n\tif ( isLoading ) {\n\t\treturn (\n\t\t\t<LoadingResponsePlaceholder { ...props } showLoader={ showLoader }>\n\t\t\t\t{ hasResponse && (\n\t\t\t\t\t<RawHTML className={ className }>{ response }</RawHTML>\n\t\t\t\t) }\n\t\t\t</LoadingResponsePlaceholder>\n\t\t);\n\t}\n\n\treturn <RawHTML className={ className }>{ response }</RawHTML>;\n}\n"]}

package/build-module/index.js

@@ -37,11 +37,12 @@ const ExportedServerSideRender = withSelect(select => {
   }
 
   return EMPTY_OBJECT;
-})(({
-  urlQueryArgs = EMPTY_OBJECT,
-  currentPostId,
-  ...props
-}) => {
+})(_ref => {
+  let {
+    urlQueryArgs = EMPTY_OBJECT,
+    currentPostId,
+    ...props
+  } = _ref;
   const newUrlQueryArgs = useMemo(() => {
     if (!currentPostId) {
       return urlQueryArgs;

package/build-module/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/server-side-render/src/index.js"],"names":["useMemo","forwardRef","withSelect","deprecated","ServerSideRender","EMPTY_OBJECT","ExportedServerSideRender","select","coreEditorSelect","currentPostId","getCurrentPostId","urlQueryArgs","props","newUrlQueryArgs","post_id","window","wp","components","ref","since","alternative"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,OAAT,EAAkBC,UAAlB,QAAoC,oBAApC;AACA,SAASC,UAAT,QAA2B,iBAA3B;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,gBAAP,MAA6B,sBAA7B;AAEA;AACA;AACA;;AACA,MAAMC,YAAY,GAAG,EAArB;AAEA,MAAMC,wBAAwB,GAAGJ,UAAU,CAAIK,MAAF,IAAc;AAC1D;AACA;AACA;AACA,QAAMC,gBAAgB,GAAGD,MAAM,CAAE,aAAF,CAA/B;;AACA,MAAKC,gBAAL,EAAwB;AACvB,UAAMC,aAAa,GAAGD,gBAAgB,CAACE,gBAAjB,EAAtB,CADuB,CAEvB;AACA;AACA;AACA;;AACA,QAAKD,aAAa,IAAI,OAAOA,aAAP,KAAyB,QAA/C,EAA0D;AACzD,aAAO;AACNA,QAAAA;AADM,OAAP;AAGA;AACD;;AACD,SAAOJ,YAAP;AACA,CAlB0C,CAAV,CAkB5B,CAAE;AAAEM,EAAAA,YAAY,GAAGN,YAAjB;AAA+BI,EAAAA,aAA/B;AAA8C,KAAGG;AAAjD,CAAF,KAAgE;AACpE,QAAMC,eAAe,GAAGb,OAAO,CAAE,MAAM;AACtC,QAAK,CAAES,aAAP,EAAuB;AACtB,aAAOE,YAAP;AACA;;AACD,WAAO;AACNG,MAAAA,OAAO,EAAEL,aADH;AAEN,SAAGE;AAFG,KAAP;AAIA,GAR8B,EAQ5B,CAAEF,aAAF,EAAiBE,YAAjB,CAR4B,CAA/B;AAUA,SAAO,cAAC,gBAAD;AAAkB,IAAA,YAAY,EAAGE;AAAjC,KAAwDD,KAAxD,EAAP;AACA,CA9BgC,CAAjC;;AAgCA,IAAKG,MAAM,IAAIA,MAAM,CAACC,EAAjB,IAAuBD,MAAM,CAACC,EAAP,CAAUC,UAAtC,EAAmD;AAClDF,EAAAA,MAAM,CAACC,EAAP,CAAUC,UAAV,CAAqBb,gBAArB,GAAwCH,UAAU,CAAE,CAAEW,KAAF,EAASM,GAAT,KAAkB;AACrEf,IAAAA,UAAU,CAAE,gCAAF,EAAoC;AAC7CgB,MAAAA,KAAK,EAAE,KADsC;AAE7CC,MAAAA,WAAW,EAAE;AAFgC,KAApC,CAAV;AAIA,WAAO,cAAC,wBAAD,eAA+BR,KAA/B;AAAuC,MAAA,GAAG,EAAGM;AAA7C,OAAP;AACA,GANiD,CAAlD;AAOA;;AAED,eAAeZ,wBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, forwardRef } from '@wordpress/element';\nimport { withSelect } from '@wordpress/data';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport ServerSideRender from './server-side-render';\n\n/**\n * Constants\n */\nconst EMPTY_OBJECT = {};\n\nconst ExportedServerSideRender = withSelect( ( select ) => {\n\t// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.\n\t// It is used by blocks that can be loaded into a *non-post* block editor.\n\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\tconst coreEditorSelect = select( 'core/editor' );\n\tif ( coreEditorSelect ) {\n\t\tconst currentPostId = coreEditorSelect.getCurrentPostId();\n\t\t// For templates and template parts we use a custom ID format.\n\t\t// Since they aren't real posts, we don't want to use their ID\n\t\t// for server-side rendering. Since they use a string based ID,\n\t\t// we can assume real post IDs are numbers.\n\t\tif ( currentPostId && typeof currentPostId === 'number' ) {\n\t\t\treturn {\n\t\t\t\tcurrentPostId,\n\t\t\t};\n\t\t}\n\t}\n\treturn EMPTY_OBJECT;\n} )( ( { urlQueryArgs = EMPTY_OBJECT, currentPostId, ...props } ) => {\n\tconst newUrlQueryArgs = useMemo( () => {\n\t\tif ( ! currentPostId ) {\n\t\t\treturn urlQueryArgs;\n\t\t}\n\t\treturn {\n\t\t\tpost_id: currentPostId,\n\t\t\t...urlQueryArgs,\n\t\t};\n\t}, [ currentPostId, urlQueryArgs ] );\n\n\treturn <ServerSideRender urlQueryArgs={ newUrlQueryArgs } { ...props } />;\n} );\n\nif ( window && window.wp && window.wp.components ) {\n\twindow.wp.components.ServerSideRender = forwardRef( ( props, ref ) => {\n\t\tdeprecated( 'wp.components.ServerSideRender', {\n\t\t\tsince: '5.3',\n\t\t\talternative: 'wp.serverSideRender',\n\t\t} );\n\t\treturn <ExportedServerSideRender { ...props } ref={ ref } />;\n\t} );\n}\n\nexport default ExportedServerSideRender;\n"]}
+{"version":3,"sources":["@wordpress/server-side-render/src/index.js"],"names":["useMemo","forwardRef","withSelect","deprecated","ServerSideRender","EMPTY_OBJECT","ExportedServerSideRender","select","coreEditorSelect","currentPostId","getCurrentPostId","urlQueryArgs","props","newUrlQueryArgs","post_id","window","wp","components","ref","since","alternative"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,OAAT,EAAkBC,UAAlB,QAAoC,oBAApC;AACA,SAASC,UAAT,QAA2B,iBAA3B;AACA,OAAOC,UAAP,MAAuB,uBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,gBAAP,MAA6B,sBAA7B;AAEA;AACA;AACA;;AACA,MAAMC,YAAY,GAAG,EAArB;AAEA,MAAMC,wBAAwB,GAAGJ,UAAU,CAAIK,MAAF,IAAc;AAC1D;AACA;AACA;AACA,QAAMC,gBAAgB,GAAGD,MAAM,CAAE,aAAF,CAA/B;;AACA,MAAKC,gBAAL,EAAwB;AACvB,UAAMC,aAAa,GAAGD,gBAAgB,CAACE,gBAAjB,EAAtB,CADuB,CAEvB;AACA;AACA;AACA;;AACA,QAAKD,aAAa,IAAI,OAAOA,aAAP,KAAyB,QAA/C,EAA0D;AACzD,aAAO;AACNA,QAAAA;AADM,OAAP;AAGA;AACD;;AACD,SAAOJ,YAAP;AACA,CAlB0C,CAAV,CAkB5B,QAAgE;AAAA,MAA9D;AAAEM,IAAAA,YAAY,GAAGN,YAAjB;AAA+BI,IAAAA,aAA/B;AAA8C,OAAGG;AAAjD,GAA8D;AACpE,QAAMC,eAAe,GAAGb,OAAO,CAAE,MAAM;AACtC,QAAK,CAAES,aAAP,EAAuB;AACtB,aAAOE,YAAP;AACA;;AACD,WAAO;AACNG,MAAAA,OAAO,EAAEL,aADH;AAEN,SAAGE;AAFG,KAAP;AAIA,GAR8B,EAQ5B,CAAEF,aAAF,EAAiBE,YAAjB,CAR4B,CAA/B;AAUA,SAAO,cAAC,gBAAD;AAAkB,IAAA,YAAY,EAAGE;AAAjC,KAAwDD,KAAxD,EAAP;AACA,CA9BgC,CAAjC;;AAgCA,IAAKG,MAAM,IAAIA,MAAM,CAACC,EAAjB,IAAuBD,MAAM,CAACC,EAAP,CAAUC,UAAtC,EAAmD;AAClDF,EAAAA,MAAM,CAACC,EAAP,CAAUC,UAAV,CAAqBb,gBAArB,GAAwCH,UAAU,CAAE,CAAEW,KAAF,EAASM,GAAT,KAAkB;AACrEf,IAAAA,UAAU,CAAE,gCAAF,EAAoC;AAC7CgB,MAAAA,KAAK,EAAE,KADsC;AAE7CC,MAAAA,WAAW,EAAE;AAFgC,KAApC,CAAV;AAIA,WAAO,cAAC,wBAAD,eAA+BR,KAA/B;AAAuC,MAAA,GAAG,EAAGM;AAA7C,OAAP;AACA,GANiD,CAAlD;AAOA;;AAED,eAAeZ,wBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, forwardRef } from '@wordpress/element';\nimport { withSelect } from '@wordpress/data';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport ServerSideRender from './server-side-render';\n\n/**\n * Constants\n */\nconst EMPTY_OBJECT = {};\n\nconst ExportedServerSideRender = withSelect( ( select ) => {\n\t// FIXME: @wordpress/server-side-render should not depend on @wordpress/editor.\n\t// It is used by blocks that can be loaded into a *non-post* block editor.\n\t// eslint-disable-next-line @wordpress/data-no-store-string-literals\n\tconst coreEditorSelect = select( 'core/editor' );\n\tif ( coreEditorSelect ) {\n\t\tconst currentPostId = coreEditorSelect.getCurrentPostId();\n\t\t// For templates and template parts we use a custom ID format.\n\t\t// Since they aren't real posts, we don't want to use their ID\n\t\t// for server-side rendering. Since they use a string based ID,\n\t\t// we can assume real post IDs are numbers.\n\t\tif ( currentPostId && typeof currentPostId === 'number' ) {\n\t\t\treturn {\n\t\t\t\tcurrentPostId,\n\t\t\t};\n\t\t}\n\t}\n\treturn EMPTY_OBJECT;\n} )( ( { urlQueryArgs = EMPTY_OBJECT, currentPostId, ...props } ) => {\n\tconst newUrlQueryArgs = useMemo( () => {\n\t\tif ( ! currentPostId ) {\n\t\t\treturn urlQueryArgs;\n\t\t}\n\t\treturn {\n\t\t\tpost_id: currentPostId,\n\t\t\t...urlQueryArgs,\n\t\t};\n\t}, [ currentPostId, urlQueryArgs ] );\n\n\treturn <ServerSideRender urlQueryArgs={ newUrlQueryArgs } { ...props } />;\n} );\n\nif ( window && window.wp && window.wp.components ) {\n\twindow.wp.components.ServerSideRender = forwardRef( ( props, ref ) => {\n\t\tdeprecated( 'wp.components.ServerSideRender', {\n\t\t\tsince: '5.3',\n\t\t\talternative: 'wp.serverSideRender',\n\t\t} );\n\t\treturn <ExportedServerSideRender { ...props } ref={ ref } />;\n\t} );\n}\n\nexport default ExportedServerSideRender;\n"]}

package/build-module/server-side-render.js

@@ -16,7 +16,9 @@ import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 import { Placeholder, Spinner } from '@wordpress/components';
 import { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';
-export function rendererPath(block, attributes = null, urlQueryArgs = {}) {
+export function rendererPath(block) {
+  let attributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  let urlQueryArgs = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   return addQueryArgs(`/wp/v2/block-renderer/${block}`, {
     context: 'edit',
     ...(null !== attributes ? {
@@ -26,18 +28,20 @@ export function rendererPath(block, attributes = null, urlQueryArgs = {}) {
   });
 }
 
-function DefaultEmptyResponsePlaceholder({
-  className
-}) {
+function DefaultEmptyResponsePlaceholder(_ref) {
+  let {
+    className
+  } = _ref;
   return createElement(Placeholder, {
     className: className
   }, __('Block rendered as empty.'));
 }
 
-function DefaultErrorResponsePlaceholder({
-  response,
-  className
-}) {
+function DefaultErrorResponsePlaceholder(_ref2) {
+  let {
+    response,
+    className
+  } = _ref2;
   const errorMessage = sprintf( // translators: %s: error message describing the problem
   __('Error loading block: %s'), response.errorMsg);
   return createElement(Placeholder, {
@@ -45,12 +49,28 @@ function DefaultErrorResponsePlaceholder({
   }, errorMessage);
 }
 
-function DefaultLoadingResponsePlaceholder({
-  className
-}) {
-  return createElement(Placeholder, {
-    className: className
-  }, createElement(Spinner, null));
+function DefaultLoadingResponsePlaceholder(_ref3) {
+  let {
+    children,
+    showLoader
+  } = _ref3;
+  return createElement("div", {
+    style: {
+      position: 'relative'
+    }
+  }, showLoader && createElement("div", {
+    style: {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      marginTop: '-9px',
+      marginLeft: '-9px'
+    }
+  }, createElement(Spinner, null)), createElement("div", {
+    style: {
+      opacity: showLoader ? '0.3' : 1
+    }
+  }, children));
 }
 
 export default function ServerSideRender(props) {
@@ -65,18 +85,18 @@ export default function ServerSideRender(props) {
     LoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder
   } = props;
   const isMountedRef = useRef(true);
+  const [showLoader, setShowLoader] = useState(false);
   const fetchRequestRef = useRef();
   const [response, setResponse] = useState(null);
   const prevProps = usePrevious(props);
+  const [isLoading, setIsLoading] = useState(false);
 
   function fetchData() {
     if (!isMountedRef.current) {
       return;
     }
 
-    if (null !== response) {
-      setResponse(null);
-    }
+    setIsLoading(true);
 
     const sanitizedAttributes = attributes && __experimentalSanitizeBlockAttributes(block, attributes); // If httpMethod is 'POST', send the attributes in the request body instead of the URL.
     // This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.
@@ -105,6 +125,10 @@ export default function ServerSideRender(props) {
           errorMsg: error.message
         });
       }
+    }).finally(() => {
+      if (isMountedRef.current && fetchRequest === fetchRequestRef.current) {
+        setIsLoading(false);
+      }
     });
     return fetchRequest;
   }
@@ -124,17 +148,44 @@ export default function ServerSideRender(props) {
       debouncedFetchData();
     }
   });
+  /**
+   * Effect to handle showing the loading placeholder.
+   * Show it only if there is no previous response or
+   * the request takes more than one second.
+   */
 
-  if (response === '') {
+  useEffect(() => {
+    if (!isLoading) {
+      return;
+    }
+
+    const timeout = setTimeout(() => {
+      setShowLoader(true);
+    }, 1000);
+    return () => clearTimeout(timeout);
+  }, [isLoading]);
+  const hasResponse = !!response;
+  const hasEmptyResponse = response === '';
+  const hasError = response === null || response === void 0 ? void 0 : response.error;
+
+  if (hasEmptyResponse || !hasResponse) {
     return createElement(EmptyResponsePlaceholder, props);
-  } else if (!response) {
-    return createElement(LoadingResponsePlaceholder, props);
-  } else if (response.error) {
+  }
+
+  if (hasError) {
     return createElement(ErrorResponsePlaceholder, _extends({
       response: response
     }, props));
   }
 
+  if (isLoading) {
+    return createElement(LoadingResponsePlaceholder, _extends({}, props, {
+      showLoader: showLoader
+    }), hasResponse && createElement(RawHTML, {
+      className: className
+    }, response));
+  }
+
   return createElement(RawHTML, {
     className: className
   }, response);

package/build-module/server-side-render.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/server-side-render/src/server-side-render.js"],"names":["isEqual","useDebounce","usePrevious","RawHTML","useEffect","useRef","useState","__","sprintf","apiFetch","addQueryArgs","Placeholder","Spinner","__experimentalSanitizeBlockAttributes","rendererPath","block","attributes","urlQueryArgs","context","DefaultEmptyResponsePlaceholder","className","DefaultErrorResponsePlaceholder","response","errorMessage","errorMsg","DefaultLoadingResponsePlaceholder","ServerSideRender","props","httpMethod","EmptyResponsePlaceholder","ErrorResponsePlaceholder","LoadingResponsePlaceholder","isMountedRef","fetchRequestRef","setResponse","prevProps","fetchData","current","sanitizedAttributes","isPostRequest","urlAttributes","path","data","fetchRequest","method","then","fetchResponse","rendered","catch","error","message","debouncedFetchData","undefined"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useDebounce, usePrevious } from '@wordpress/compose';\nimport { RawHTML, useEffect, useRef, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport apiFetch from '@wordpress/api-fetch';\nimport { addQueryArgs } from '@wordpress/url';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';\n\nexport function rendererPath( block, attributes = null, urlQueryArgs = {} ) {\n\treturn addQueryArgs( `/wp/v2/block-renderer/${ block }`, {\n\t\tcontext: 'edit',\n\t\t...( null !== attributes ? { attributes } : {} ),\n\t\t...urlQueryArgs,\n\t} );\n}\n\nfunction DefaultEmptyResponsePlaceholder( { className } ) {\n\treturn (\n\t\t<Placeholder className={ className }>\n\t\t\t{ __( 'Block rendered as empty.' ) }\n\t\t</Placeholder>\n\t);\n}\n\nfunction DefaultErrorResponsePlaceholder( { response, className } ) {\n\tconst errorMessage = sprintf(\n\t\t// translators: %s: error message describing the problem\n\t\t__( 'Error loading block: %s' ),\n\t\tresponse.errorMsg\n\t);\n\treturn <Placeholder className={ className }>{ errorMessage }</Placeholder>;\n}\n\nfunction DefaultLoadingResponsePlaceholder( { className } ) {\n\treturn (\n\t\t<Placeholder className={ className }>\n\t\t\t<Spinner />\n\t\t</Placeholder>\n\t);\n}\n\nexport default function ServerSideRender( props ) {\n\tconst {\n\t\tattributes,\n\t\tblock,\n\t\tclassName,\n\t\thttpMethod = 'GET',\n\t\turlQueryArgs,\n\t\tEmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,\n\t\tErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,\n\t\tLoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,\n\t} = props;\n\n\tconst isMountedRef = useRef( true );\n\tconst fetchRequestRef = useRef();\n\tconst [ response, setResponse ] = useState( null );\n\tconst prevProps = usePrevious( props );\n\n\tfunction fetchData() {\n\t\tif ( ! isMountedRef.current ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( null !== response ) {\n\t\t\tsetResponse( null );\n\t\t}\n\n\t\tconst sanitizedAttributes =\n\t\t\tattributes &&\n\t\t\t__experimentalSanitizeBlockAttributes( block, attributes );\n\n\t\t// If httpMethod is 'POST', send the attributes in the request body instead of the URL.\n\t\t// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.\n\t\tconst isPostRequest = 'POST' === httpMethod;\n\t\tconst urlAttributes = isPostRequest\n\t\t\t? null\n\t\t\t: sanitizedAttributes ?? null;\n\t\tconst path = rendererPath( block, urlAttributes, urlQueryArgs );\n\t\tconst data = isPostRequest\n\t\t\t? { attributes: sanitizedAttributes ?? null }\n\t\t\t: null;\n\n\t\t// Store the latest fetch request so that when we process it, we can\n\t\t// check if it is the current request, to avoid race conditions on slow networks.\n\t\tconst fetchRequest = ( fetchRequestRef.current = apiFetch( {\n\t\t\tpath,\n\t\t\tdata,\n\t\t\tmethod: isPostRequest ? 'POST' : 'GET',\n\t\t} )\n\t\t\t.then( ( fetchResponse ) => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current &&\n\t\t\t\t\tfetchResponse\n\t\t\t\t) {\n\t\t\t\t\tsetResponse( fetchResponse.rendered );\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.catch( ( error ) => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current\n\t\t\t\t) {\n\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\terror: true,\n\t\t\t\t\t\terrorMsg: error.message,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t} ) );\n\n\t\treturn fetchRequest;\n\t}\n\n\tconst debouncedFetchData = useDebounce( fetchData, 500 );\n\n\t// When the component unmounts, set isMountedRef to false. This will\n\t// let the async fetch callbacks know when to stop.\n\tuseEffect(\n\t\t() => () => {\n\t\t\tisMountedRef.current = false;\n\t\t},\n\t\t[]\n\t);\n\n\tuseEffect( () => {\n\t\t// Don't debounce the first fetch. This ensures that the first render\n\t\t// shows data as soon as possible\n\t\tif ( prevProps === undefined ) {\n\t\t\tfetchData();\n\t\t} else if ( ! isEqual( prevProps, props ) ) {\n\t\t\tdebouncedFetchData();\n\t\t}\n\t} );\n\n\tif ( response === '' ) {\n\t\treturn <EmptyResponsePlaceholder { ...props } />;\n\t} else if ( ! response ) {\n\t\treturn <LoadingResponsePlaceholder { ...props } />;\n\t} else if ( response.error ) {\n\t\treturn <ErrorResponsePlaceholder response={ response } { ...props } />;\n\t}\n\n\treturn <RawHTML className={ className }>{ response }</RawHTML>;\n}\n"]}
+{"version":3,"sources":["@wordpress/server-side-render/src/server-side-render.js"],"names":["isEqual","useDebounce","usePrevious","RawHTML","useEffect","useRef","useState","__","sprintf","apiFetch","addQueryArgs","Placeholder","Spinner","__experimentalSanitizeBlockAttributes","rendererPath","block","attributes","urlQueryArgs","context","DefaultEmptyResponsePlaceholder","className","DefaultErrorResponsePlaceholder","response","errorMessage","errorMsg","DefaultLoadingResponsePlaceholder","children","showLoader","position","top","left","marginTop","marginLeft","opacity","ServerSideRender","props","httpMethod","EmptyResponsePlaceholder","ErrorResponsePlaceholder","LoadingResponsePlaceholder","isMountedRef","setShowLoader","fetchRequestRef","setResponse","prevProps","isLoading","setIsLoading","fetchData","current","sanitizedAttributes","isPostRequest","urlAttributes","path","data","fetchRequest","method","then","fetchResponse","rendered","catch","error","message","finally","debouncedFetchData","undefined","timeout","setTimeout","clearTimeout","hasResponse","hasEmptyResponse","hasError"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useDebounce, usePrevious } from '@wordpress/compose';\nimport { RawHTML, useEffect, useRef, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport apiFetch from '@wordpress/api-fetch';\nimport { addQueryArgs } from '@wordpress/url';\nimport { Placeholder, Spinner } from '@wordpress/components';\nimport { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks';\n\nexport function rendererPath( block, attributes = null, urlQueryArgs = {} ) {\n\treturn addQueryArgs( `/wp/v2/block-renderer/${ block }`, {\n\t\tcontext: 'edit',\n\t\t...( null !== attributes ? { attributes } : {} ),\n\t\t...urlQueryArgs,\n\t} );\n}\n\nfunction DefaultEmptyResponsePlaceholder( { className } ) {\n\treturn (\n\t\t<Placeholder className={ className }>\n\t\t\t{ __( 'Block rendered as empty.' ) }\n\t\t</Placeholder>\n\t);\n}\n\nfunction DefaultErrorResponsePlaceholder( { response, className } ) {\n\tconst errorMessage = sprintf(\n\t\t// translators: %s: error message describing the problem\n\t\t__( 'Error loading block: %s' ),\n\t\tresponse.errorMsg\n\t);\n\treturn <Placeholder className={ className }>{ errorMessage }</Placeholder>;\n}\n\nfunction DefaultLoadingResponsePlaceholder( { children, showLoader } ) {\n\treturn (\n\t\t<div style={ { position: 'relative' } }>\n\t\t\t{ showLoader && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: '50%',\n\t\t\t\t\t\tleft: '50%',\n\t\t\t\t\t\tmarginTop: '-9px',\n\t\t\t\t\t\tmarginLeft: '-9px',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<Spinner />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div style={ { opacity: showLoader ? '0.3' : 1 } }>\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default function ServerSideRender( props ) {\n\tconst {\n\t\tattributes,\n\t\tblock,\n\t\tclassName,\n\t\thttpMethod = 'GET',\n\t\turlQueryArgs,\n\t\tEmptyResponsePlaceholder = DefaultEmptyResponsePlaceholder,\n\t\tErrorResponsePlaceholder = DefaultErrorResponsePlaceholder,\n\t\tLoadingResponsePlaceholder = DefaultLoadingResponsePlaceholder,\n\t} = props;\n\n\tconst isMountedRef = useRef( true );\n\tconst [ showLoader, setShowLoader ] = useState( false );\n\tconst fetchRequestRef = useRef();\n\tconst [ response, setResponse ] = useState( null );\n\tconst prevProps = usePrevious( props );\n\tconst [ isLoading, setIsLoading ] = useState( false );\n\n\tfunction fetchData() {\n\t\tif ( ! isMountedRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetIsLoading( true );\n\n\t\tconst sanitizedAttributes =\n\t\t\tattributes &&\n\t\t\t__experimentalSanitizeBlockAttributes( block, attributes );\n\n\t\t// If httpMethod is 'POST', send the attributes in the request body instead of the URL.\n\t\t// This allows sending a larger attributes object than in a GET request, where the attributes are in the URL.\n\t\tconst isPostRequest = 'POST' === httpMethod;\n\t\tconst urlAttributes = isPostRequest\n\t\t\t? null\n\t\t\t: sanitizedAttributes ?? null;\n\t\tconst path = rendererPath( block, urlAttributes, urlQueryArgs );\n\t\tconst data = isPostRequest\n\t\t\t? { attributes: sanitizedAttributes ?? null }\n\t\t\t: null;\n\n\t\t// Store the latest fetch request so that when we process it, we can\n\t\t// check if it is the current request, to avoid race conditions on slow networks.\n\t\tconst fetchRequest = ( fetchRequestRef.current = apiFetch( {\n\t\t\tpath,\n\t\t\tdata,\n\t\t\tmethod: isPostRequest ? 'POST' : 'GET',\n\t\t} )\n\t\t\t.then( ( fetchResponse ) => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current &&\n\t\t\t\t\tfetchResponse\n\t\t\t\t) {\n\t\t\t\t\tsetResponse( fetchResponse.rendered );\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.catch( ( error ) => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current\n\t\t\t\t) {\n\t\t\t\t\tsetResponse( {\n\t\t\t\t\t\terror: true,\n\t\t\t\t\t\terrorMsg: error.message,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t} )\n\t\t\t.finally( () => {\n\t\t\t\tif (\n\t\t\t\t\tisMountedRef.current &&\n\t\t\t\t\tfetchRequest === fetchRequestRef.current\n\t\t\t\t) {\n\t\t\t\t\tsetIsLoading( false );\n\t\t\t\t}\n\t\t\t} ) );\n\n\t\treturn fetchRequest;\n\t}\n\n\tconst debouncedFetchData = useDebounce( fetchData, 500 );\n\n\t// When the component unmounts, set isMountedRef to false. This will\n\t// let the async fetch callbacks know when to stop.\n\tuseEffect(\n\t\t() => () => {\n\t\t\tisMountedRef.current = false;\n\t\t},\n\t\t[]\n\t);\n\n\tuseEffect( () => {\n\t\t// Don't debounce the first fetch. This ensures that the first render\n\t\t// shows data as soon as possible\n\t\tif ( prevProps === undefined ) {\n\t\t\tfetchData();\n\t\t} else if ( ! isEqual( prevProps, props ) ) {\n\t\t\tdebouncedFetchData();\n\t\t}\n\t} );\n\n\t/**\n\t * Effect to handle showing the loading placeholder.\n\t * Show it only if there is no previous response or\n\t * the request takes more than one second.\n\t */\n\tuseEffect( () => {\n\t\tif ( ! isLoading ) {\n\t\t\treturn;\n\t\t}\n\t\tconst timeout = setTimeout( () => {\n\t\t\tsetShowLoader( true );\n\t\t}, 1000 );\n\t\treturn () => clearTimeout( timeout );\n\t}, [ isLoading ] );\n\n\tconst hasResponse = !! response;\n\tconst hasEmptyResponse = response === '';\n\tconst hasError = response?.error;\n\n\tif ( hasEmptyResponse || ! hasResponse ) {\n\t\treturn <EmptyResponsePlaceholder { ...props } />;\n\t}\n\n\tif ( hasError ) {\n\t\treturn <ErrorResponsePlaceholder response={ response } { ...props } />;\n\t}\n\n\tif ( isLoading ) {\n\t\treturn (\n\t\t\t<LoadingResponsePlaceholder { ...props } showLoader={ showLoader }>\n\t\t\t\t{ hasResponse && (\n\t\t\t\t\t<RawHTML className={ className }>{ response }</RawHTML>\n\t\t\t\t) }\n\t\t\t</LoadingResponsePlaceholder>\n\t\t);\n\t}\n\n\treturn <RawHTML className={ className }>{ response }</RawHTML>;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/server-side-render",
-	"version": "3.0.2",
+	"version": "3.0.6",
 	"description": "The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,20 +26,20 @@
 	"module": "build-module/index.js",
 	"react-native": "src/index",
 	"dependencies": {
-		"@babel/runtime": "^7.13.10",
-		"@wordpress/api-fetch": "^5.2.2",
-		"@wordpress/blocks": "^11.1.0",
-		"@wordpress/components": "^17.0.0",
-		"@wordpress/compose": "^5.0.2",
-		"@wordpress/data": "^6.1.0",
-		"@wordpress/deprecated": "^3.2.1",
-		"@wordpress/element": "^4.0.1",
-		"@wordpress/i18n": "^4.2.2",
-		"@wordpress/url": "^3.2.2",
+		"@babel/runtime": "^7.16.0",
+		"@wordpress/api-fetch": "^5.2.6",
+		"@wordpress/blocks": "^11.1.4",
+		"@wordpress/components": "^19.0.2",
+		"@wordpress/compose": "^5.0.6",
+		"@wordpress/data": "^6.1.4",
+		"@wordpress/deprecated": "^3.2.3",
+		"@wordpress/element": "^4.0.4",
+		"@wordpress/i18n": "^4.2.4",
+		"@wordpress/url": "^3.3.1",
 		"lodash": "^4.17.21"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "98c42a7187f788fe3e023f04df7f5dcbdae4e4e7"
+	"gitHead": "9a1dd3474d937468e4cf9caf9886ad61ef0a8f50"
 }

package/src/server-side-render.js

@@ -39,11 +39,26 @@ function DefaultErrorResponsePlaceholder( { response, className } ) {
 	return <Placeholder className={ className }>{ errorMessage }</Placeholder>;
 }
 
-function DefaultLoadingResponsePlaceholder( { className } ) {
+function DefaultLoadingResponsePlaceholder( { children, showLoader } ) {
 	return (
-		<Placeholder className={ className }>
-			<Spinner />
-		</Placeholder>
+		<div style={ { position: 'relative' } }>
+			{ showLoader && (
+				<div
+					style={ {
+						position: 'absolute',
+						top: '50%',
+						left: '50%',
+						marginTop: '-9px',
+						marginLeft: '-9px',
+					} }
+				>
+					<Spinner />
+				</div>
+			) }
+			<div style={ { opacity: showLoader ? '0.3' : 1 } }>
+				{ children }
+			</div>
+		</div>
 	);
 }
 
@@ -60,17 +75,18 @@ export default function ServerSideRender( props ) {
 	} = props;
 
 	const isMountedRef = useRef( true );
+	const [ showLoader, setShowLoader ] = useState( false );
 	const fetchRequestRef = useRef();
 	const [ response, setResponse ] = useState( null );
 	const prevProps = usePrevious( props );
+	const [ isLoading, setIsLoading ] = useState( false );
 
 	function fetchData() {
 		if ( ! isMountedRef.current ) {
 			return;
 		}
-		if ( null !== response ) {
-			setResponse( null );
-		}
+
+		setIsLoading( true );
 
 		const sanitizedAttributes =
 			attributes &&
@@ -113,6 +129,14 @@ export default function ServerSideRender( props ) {
 						errorMsg: error.message,
 					} );
 				}
+			} )
+			.finally( () => {
+				if (
+					isMountedRef.current &&
+					fetchRequest === fetchRequestRef.current
+				) {
+					setIsLoading( false );
+				}
 			} ) );
 
 		return fetchRequest;
@@ -139,13 +163,42 @@ export default function ServerSideRender( props ) {
 		}
 	} );
 
-	if ( response === '' ) {
+	/**
+	 * Effect to handle showing the loading placeholder.
+	 * Show it only if there is no previous response or
+	 * the request takes more than one second.
+	 */
+	useEffect( () => {
+		if ( ! isLoading ) {
+			return;
+		}
+		const timeout = setTimeout( () => {
+			setShowLoader( true );
+		}, 1000 );
+		return () => clearTimeout( timeout );
+	}, [ isLoading ] );
+
+	const hasResponse = !! response;
+	const hasEmptyResponse = response === '';
+	const hasError = response?.error;
+
+	if ( hasEmptyResponse || ! hasResponse ) {
 		return <EmptyResponsePlaceholder { ...props } />;
-	} else if ( ! response ) {
-		return <LoadingResponsePlaceholder { ...props } />;
-	} else if ( response.error ) {
+	}
+
+	if ( hasError ) {
 		return <ErrorResponsePlaceholder response={ response } { ...props } />;
 	}
 
+	if ( isLoading ) {
+		return (
+			<LoadingResponsePlaceholder { ...props } showLoader={ showLoader }>
+				{ hasResponse && (
+					<RawHTML className={ className }>{ response }</RawHTML>
+				) }
+			</LoadingResponsePlaceholder>
+		);
+	}
+
 	return <RawHTML className={ className }>{ response }</RawHTML>;
 }