@atlaskit/editor-synced-block-renderer 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-synced-block-renderer
 
+## 3.3.0
+
+### Minor Changes
+
+- [`721d3790d48fe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/721d3790d48fe) -
+  EDITOR-2533 implement error-ui with retry
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.2.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -45,6 +45,9 @@
 		{
 			"path": "../../renderer/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/spinner/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/tokens/afm-cc/tsconfig.json"
 		},

package/dist/cjs/ui/SyncedBlockErrorComponent.js

@@ -1,42 +1,51 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyncedBlockErrorComponent = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
+var _SyncedBlockGenericError = require("./SyncedBlockGenericError");
+var _SyncedBlockLoadError = require("./SyncedBlockLoadError");
 var _SyncedBlockPermissionDenied = require("./SyncedBlockPermissionDenied");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var SyncedBlockErrorComponent = exports.SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref) {
   var error = _ref.error,
+    isLoading = _ref.isLoading,
+    onRetry = _ref.onRetry,
     resourceId = _ref.resourceId;
-  var getErrorContent = function getErrorContent() {
+  var getErrorContent = (0, _react.useMemo)(function () {
     switch (error) {
       case _editorSyncedBlockProvider.SyncBlockError.Forbidden:
-        if (resourceId) {
-          var _getPageIdAndTypeFrom = (0, _editorSyncedBlockProvider.getPageIdAndTypeFromAri)(resourceId),
-            contentId = _getPageIdAndTypeFrom.id;
-          if (contentId) {
-            return /*#__PURE__*/_react.default.createElement(_SyncedBlockPermissionDenied.SyncedBlockPermissionDenied, {
-              contentId: contentId
-            });
-          }
+        if (!resourceId) {
+          return /*#__PURE__*/_react.default.createElement(_SyncedBlockGenericError.SyncedBlockGenericError, null);
         }
-        return /*#__PURE__*/_react.default.createElement("div", null, "Something went wrong");
+        var _getPageIdAndTypeFrom = (0, _editorSyncedBlockProvider.getPageIdAndTypeFromAri)(resourceId),
+          contentId = _getPageIdAndTypeFrom.id;
+        if (contentId) {
+          return /*#__PURE__*/_react.default.createElement(_SyncedBlockPermissionDenied.SyncedBlockPermissionDenied, {
+            contentId: contentId
+          });
+        }
+        return /*#__PURE__*/_react.default.createElement(_SyncedBlockGenericError.SyncedBlockGenericError, null);
       case _editorSyncedBlockProvider.SyncBlockError.NotFound:
-        return /*#__PURE__*/_react.default.createElement("div", null, "Sync Block Not Found");
       case _editorSyncedBlockProvider.SyncBlockError.Errored:
+        return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadError.SyncedBlockLoadError, {
+          onRetry: onRetry,
+          isLoading: isLoading
+        });
       default:
-        return /*#__PURE__*/_react.default.createElement("div", null, "Something went wrong");
+        return /*#__PURE__*/_react.default.createElement(_SyncedBlockGenericError.SyncedBlockGenericError, null);
     }
-  };
+  }, [error, isLoading, onRetry, resourceId]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     _react.default.createElement("div", {
       className: _syncBlock.SyncBlockSharedCssClassName.error
-    }, getErrorContent())
+    }, getErrorContent)
   );
 };

package/dist/cjs/ui/SyncedBlockErrorStateCard.js

@@ -0,0 +1,41 @@
+/* SyncedBlockErrorStateCard.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyncedBlockErrorStateCard = void 0;
+require("./SyncedBlockErrorStateCard.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _image = _interopRequireDefault(require("@atlaskit/image"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhkby5v _1e0c1txw _1bahv2br _4cvr1h6o",
+  textWrapper: "_18u0u2gc"
+};
+var SyncedBlockErrorStateCard = exports.SyncedBlockErrorStateCard = function SyncedBlockErrorStateCard(_ref) {
+  var children = _ref.children,
+    imageAltText = _ref.imageAltText,
+    imageSrc = _ref.imageSrc,
+    primaryMessage = _ref.primaryMessage,
+    secondaryMessage = _ref.secondaryMessage;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/_react.default.createElement(_image.default, {
+    src: imageSrc,
+    alt: imageAltText,
+    width: "48",
+    height: "48"
+  }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+    space: "space.100",
+    alignInline: "start",
+    xcss: styles.textWrapper
+  }, primaryMessage && /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "xsmall"
+  }, primaryMessage), secondaryMessage && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    color: "color.text.subtle"
+  }, secondaryMessage), children));
+};

package/dist/cjs/ui/SyncedBlockGenericError.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyncedBlockGenericError = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _ExclamationWarning = _interopRequireDefault(require("./assets/ExclamationWarning.svg"));
+var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
+var SyncedBlockGenericError = exports.SyncedBlockGenericError = function SyncedBlockGenericError() {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
+    imageSrc: _ExclamationWarning.default,
+    secondaryMessage: formatMessage(_messages.syncBlockMessages.generalErrorDescription)
+  });
+};

package/dist/cjs/ui/SyncedBlockLoadError.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyncedBlockLoadError = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _ExclamationWarning = _interopRequireDefault(require("./assets/ExclamationWarning.svg"));
+var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
+var SyncedBlockLoadError = exports.SyncedBlockLoadError = function SyncedBlockLoadError(_ref) {
+  var onRetry = _ref.onRetry,
+    isLoading = _ref.isLoading;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
+    imageSrc: _ExclamationWarning.default,
+    imageAltText: formatMessage(_messages.syncBlockMessages.notFoundAltText),
+    secondaryMessage: formatMessage(_messages.syncBlockMessages.notFoundDescription)
+  }, onRetry && /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "default",
+    spacing: "compact",
+    onClick: function onClick(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      onRetry();
+    },
+    isLoading: isLoading,
+    testId: "sync-block-retry-btn"
+  }, formatMessage(_messages.syncBlockMessages.retryButton)));
+};

package/dist/cjs/ui/SyncedBlockLoadingState.compiled.css

@@ -0,0 +1,6 @@
+._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1tkevbgk{min-height:4pc}
+._4cvr1h6o{align-items:center}

package/dist/cjs/ui/SyncedBlockLoadingState.js

@@ -1,3 +1,4 @@
+/* SyncedBlockLoadingState.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,7 +6,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyncedBlockLoadingState = void 0;
+require("./SyncedBlockLoadingState.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var styles = {
+  wrapper: "_19itia51 _2rko12b0 _1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
+};
 var SyncedBlockLoadingState = exports.SyncedBlockLoadingState = function SyncedBlockLoadingState() {
-  return /*#__PURE__*/_react.default.createElement("div", null, "Loading...");
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    size: "small",
+    label: "Loading synced content"
+  }));
 };

package/dist/cjs/ui/SyncedBlockNodeComponentRenderer.js

@@ -19,6 +19,7 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
   var _useFetchSyncBlockDat = (0, _editorSyncedBlockProvider.useFetchSyncBlockData)(syncBlockStoreManager, resourceId, localId),
     syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
     isLoading = _useFetchSyncBlockDat.isLoading,
+    reloadData = _useFetchSyncBlockDat.reloadData,
     providerFactory = _useFetchSyncBlockDat.providerFactory;
   if (isLoading && !syncBlockInstance) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
@@ -27,7 +28,9 @@ var SyncedBlockNodeComponentRenderer = exports.SyncedBlockNodeComponentRenderer
     var _syncBlockInstance$er;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
       error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : _editorSyncedBlockProvider.SyncBlockError.Errored,
-      resourceId: resourceId
+      resourceId: resourceId,
+      onRetry: reloadData,
+      isLoading: isLoading
     });
   }
   var syncBlockDoc = {

package/dist/cjs/ui/SyncedBlockPermissionDenied.js

@@ -1,4 +1,3 @@
-/* SyncedBlockPermissionDenied.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -7,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyncedBlockPermissionDenied = void 0;
-require("./SyncedBlockPermissionDenied.compiled.css");
-var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _SyncedBlockPermissionDeniedRequestAccessMutation2 = _interopRequireDefault(require("./__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql"));
 var _react = _interopRequireWildcard(require("react"));
@@ -16,16 +13,11 @@ var _reactIntlNext = require("react-intl-next");
 var _reactRelay = require("react-relay");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _messages = require("@atlaskit/editor-common/messages");
-var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
-var _image = _interopRequireDefault(require("@atlaskit/image"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _PermissionDenied = _interopRequireDefault(require("./assets/PermissionDenied.svg"));
+var _SyncedBlockErrorStateCard = require("./SyncedBlockErrorStateCard");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var styles = {
-  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhkby5v _1e0c1txw _1bahv2br _4cvr1h6o",
-  textWrapper: "_18u0u2gc"
-};
 var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
   RequestAccessState["default"] = "default";
   RequestAccessState["errored"] = "errored";
@@ -65,22 +57,12 @@ var SyncedBlockPermissionDenied = exports.SyncedBlockPermissionDenied = function
       onError: handleRequestError
     });
   };
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.wrapper
-  }, /*#__PURE__*/_react.default.createElement(_image.default, {
-    src: _PermissionDenied.default,
-    alt: formatMessage(_messages.syncBlockMessages.permissionDeniedAltText),
-    width: "48",
-    height: "48"
-  }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
-    space: "space.100",
-    alignInline: "start",
-    xcss: styles.textWrapper
-  }, /*#__PURE__*/_react.default.createElement(_heading.default, {
-    size: "xsmall"
-  }, formatMessage(_messages.syncBlockMessages.permissionDeniedHeading)), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
-    color: "color.text.subtle"
-  }, formatMessage(_messages.syncBlockMessages.permissionDeniedDescription)), requestAccessState === RequestAccessState.pending ? /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+  return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorStateCard.SyncedBlockErrorStateCard, {
+    imageSrc: _PermissionDenied.default,
+    imageAltText: formatMessage(_messages.syncBlockMessages.permissionDeniedAltText),
+    primaryMessage: formatMessage(_messages.syncBlockMessages.permissionDeniedHeading),
+    secondaryMessage: formatMessage(_messages.syncBlockMessages.permissionDeniedDescription)
+  }, requestAccessState === RequestAccessState.pending ? /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
     columnGap: "space.050",
     alignItems: "center"
   }, /*#__PURE__*/_react.default.createElement(_statusSuccess.default, {
@@ -103,5 +85,5 @@ var SyncedBlockPermissionDenied = exports.SyncedBlockPermissionDenied = function
   }, formatMessage(_messages.syncBlockMessages.requestAccessButton)), requestAccessState === RequestAccessState.errored && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
     color: "color.text.warning",
     testId: "sync-block-access-error-msg"
-  }, formatMessage(_messages.syncBlockMessages.requestAccessError)))));
+  }, formatMessage(_messages.syncBlockMessages.requestAccessError))));
 };

package/dist/cjs/ui/SyncedBlockRenderer.js

@@ -16,7 +16,9 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
     syncBlockRendererOptions = _ref.syncBlockRendererOptions;
   var _useFetchSyncBlockDat = useFetchSyncBlockData(),
     syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
-    providerFactory = _useFetchSyncBlockDat.providerFactory;
+    providerFactory = _useFetchSyncBlockDat.providerFactory,
+    isLoading = _useFetchSyncBlockDat.isLoading,
+    reloadData = _useFetchSyncBlockDat.reloadData;
   if (!syncBlockInstance) {
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockLoadingState.SyncedBlockLoadingState, null);
   }
@@ -24,7 +26,9 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
     var _syncBlockInstance$er;
     return /*#__PURE__*/_react.default.createElement(_SyncedBlockErrorComponent.SyncedBlockErrorComponent, {
       error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : _editorSyncedBlockProvider.SyncBlockError.Errored,
-      resourceId: syncBlockInstance.resourceId
+      resourceId: syncBlockInstance.resourceId,
+      onRetry: reloadData,
+      isLoading: isLoading
     });
   }
   var syncBlockDoc = {

package/dist/es2019/ui/SyncedBlockErrorComponent.js

@@ -1,37 +1,45 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { getPageIdAndTypeFromAri, SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import { SyncedBlockGenericError } from './SyncedBlockGenericError';
+import { SyncedBlockLoadError } from './SyncedBlockLoadError';
 import { SyncedBlockPermissionDenied } from './SyncedBlockPermissionDenied';
 export const SyncedBlockErrorComponent = ({
   error,
+  isLoading,
+  onRetry,
   resourceId
 }) => {
-  const getErrorContent = () => {
+  const getErrorContent = useMemo(() => {
     switch (error) {
       case SyncBlockError.Forbidden:
-        if (resourceId) {
-          const {
-            id: contentId
-          } = getPageIdAndTypeFromAri(resourceId);
-          if (contentId) {
-            return /*#__PURE__*/React.createElement(SyncedBlockPermissionDenied, {
-              contentId: contentId
-            });
-          }
+        if (!resourceId) {
+          return /*#__PURE__*/React.createElement(SyncedBlockGenericError, null);
         }
-        return /*#__PURE__*/React.createElement("div", null, "Something went wrong");
+        const {
+          id: contentId
+        } = getPageIdAndTypeFromAri(resourceId);
+        if (contentId) {
+          return /*#__PURE__*/React.createElement(SyncedBlockPermissionDenied, {
+            contentId: contentId
+          });
+        }
+        return /*#__PURE__*/React.createElement(SyncedBlockGenericError, null);
       case SyncBlockError.NotFound:
-        return /*#__PURE__*/React.createElement("div", null, "Sync Block Not Found");
       case SyncBlockError.Errored:
+        return /*#__PURE__*/React.createElement(SyncedBlockLoadError, {
+          onRetry: onRetry,
+          isLoading: isLoading
+        });
       default:
-        return /*#__PURE__*/React.createElement("div", null, "Something went wrong");
+        return /*#__PURE__*/React.createElement(SyncedBlockGenericError, null);
     }
-  };
+  }, [error, isLoading, onRetry, resourceId]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     React.createElement("div", {
       className: SyncBlockSharedCssClassName.error
-    }, getErrorContent())
+    }, getErrorContent)
   );
 };

package/dist/es2019/ui/SyncedBlockErrorStateCard.js

@@ -0,0 +1,35 @@
+/* SyncedBlockErrorStateCard.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./SyncedBlockErrorStateCard.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import Heading from '@atlaskit/heading';
+import Image from '@atlaskit/image';
+import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
+const styles = {
+  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhkby5v _1e0c1txw _1bahv2br _4cvr1h6o",
+  textWrapper: "_18u0u2gc"
+};
+export const SyncedBlockErrorStateCard = ({
+  children,
+  imageAltText,
+  imageSrc,
+  primaryMessage,
+  secondaryMessage
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: imageSrc,
+    alt: imageAltText,
+    width: "48",
+    height: "48"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.100",
+    alignInline: "start",
+    xcss: styles.textWrapper
+  }, primaryMessage && /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall"
+  }, primaryMessage), secondaryMessage && /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtle"
+  }, secondaryMessage), children));
+};

package/dist/es2019/ui/SyncedBlockGenericError.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import ExclamationWarning from './assets/ExclamationWarning.svg';
+import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
+export const SyncedBlockGenericError = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    imageSrc: ExclamationWarning,
+    secondaryMessage: formatMessage(messages.generalErrorDescription)
+  });
+};

package/dist/es2019/ui/SyncedBlockLoadError.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/new';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import ExclamationWarning from './assets/ExclamationWarning.svg';
+import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
+export const SyncedBlockLoadError = ({
+  onRetry,
+  isLoading
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    imageSrc: ExclamationWarning,
+    imageAltText: formatMessage(messages.notFoundAltText),
+    secondaryMessage: formatMessage(messages.notFoundDescription)
+  }, onRetry && /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    spacing: "compact",
+    onClick: event => {
+      event.preventDefault();
+      event.stopPropagation();
+      onRetry();
+    },
+    isLoading: isLoading,
+    testId: "sync-block-retry-btn"
+  }, formatMessage(messages.retryButton)));
+};

package/dist/es2019/ui/SyncedBlockLoadingState.compiled.css

@@ -0,0 +1,6 @@
+._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1tkevbgk{min-height:4pc}
+._4cvr1h6o{align-items:center}

package/dist/es2019/ui/SyncedBlockLoadingState.js

@@ -1,4 +1,17 @@
+/* SyncedBlockLoadingState.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./SyncedBlockLoadingState.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+import Spinner from '@atlaskit/spinner';
+const styles = {
+  wrapper: "_19itia51 _2rko12b0 _1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
+};
 export const SyncedBlockLoadingState = () => {
-  return /*#__PURE__*/React.createElement("div", null, "Loading...");
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "small",
+    label: "Loading synced content"
+  }));
 };

package/dist/es2019/ui/SyncedBlockNodeComponentRenderer.js

@@ -15,6 +15,7 @@ export const SyncedBlockNodeComponentRenderer = ({
   const {
     syncBlockInstance,
     isLoading,
+    reloadData,
     providerFactory
   } = useFetchSyncBlockData(syncBlockStoreManager, resourceId, localId);
   if (isLoading && !syncBlockInstance) {
@@ -24,7 +25,9 @@ export const SyncedBlockNodeComponentRenderer = ({
     var _syncBlockInstance$er;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
       error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : SyncBlockError.Errored,
-      resourceId: resourceId
+      resourceId: resourceId,
+      onRetry: reloadData,
+      isLoading: isLoading
     });
   }
   const syncBlockDoc = {

package/dist/es2019/ui/SyncedBlockPermissionDenied.js

@@ -1,21 +1,13 @@
-/* SyncedBlockPermissionDenied.tsx generated by @compiled/babel-plugin v0.38.1 */
-import "./SyncedBlockPermissionDenied.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
 import _SyncedBlockPermissionDeniedRequestAccessMutation from "./__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql";
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useMutation, graphql } from 'react-relay';
 import Button from '@atlaskit/button/new';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import Heading from '@atlaskit/heading';
 import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
-import Image from '@atlaskit/image';
-import { Box, Text, Stack, Flex } from '@atlaskit/primitives/compiled';
+import { Text, Flex } from '@atlaskit/primitives/compiled';
 import PermissionDenied from './assets/PermissionDenied.svg';
-const styles = {
-  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhkby5v _1e0c1txw _1bahv2br _4cvr1h6o",
-  textWrapper: "_18u0u2gc"
-};
+import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
 var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
   RequestAccessState["default"] = "default";
   RequestAccessState["errored"] = "errored";
@@ -52,22 +44,12 @@ export const SyncedBlockPermissionDenied = ({
       onError: handleRequestError
     });
   };
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.wrapper
-  }, /*#__PURE__*/React.createElement(Image, {
-    src: PermissionDenied,
-    alt: formatMessage(messages.permissionDeniedAltText),
-    width: "48",
-    height: "48"
-  }), /*#__PURE__*/React.createElement(Stack, {
-    space: "space.100",
-    alignInline: "start",
-    xcss: styles.textWrapper
-  }, /*#__PURE__*/React.createElement(Heading, {
-    size: "xsmall"
-  }, formatMessage(messages.permissionDeniedHeading)), /*#__PURE__*/React.createElement(Text, {
-    color: "color.text.subtle"
-  }, formatMessage(messages.permissionDeniedDescription)), requestAccessState === RequestAccessState.pending ? /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    imageSrc: PermissionDenied,
+    imageAltText: formatMessage(messages.permissionDeniedAltText),
+    primaryMessage: formatMessage(messages.permissionDeniedHeading),
+    secondaryMessage: formatMessage(messages.permissionDeniedDescription)
+  }, requestAccessState === RequestAccessState.pending ? /*#__PURE__*/React.createElement(Flex, {
     columnGap: "space.050",
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(StatusSuccessIcon, {
@@ -90,5 +72,5 @@ export const SyncedBlockPermissionDenied = ({
   }, formatMessage(messages.requestAccessButton)), requestAccessState === RequestAccessState.errored && /*#__PURE__*/React.createElement(Text, {
     color: "color.text.warning",
     testId: "sync-block-access-error-msg"
-  }, formatMessage(messages.requestAccessError)))));
+  }, formatMessage(messages.requestAccessError))));
 };

package/dist/es2019/ui/SyncedBlockRenderer.js

@@ -9,7 +9,9 @@ const SyncedBlockRendererComponent = ({
 }) => {
   const {
     syncBlockInstance,
-    providerFactory
+    providerFactory,
+    isLoading,
+    reloadData
   } = useFetchSyncBlockData();
   if (!syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
@@ -18,7 +20,9 @@ const SyncedBlockRendererComponent = ({
     var _syncBlockInstance$er;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
       error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : SyncBlockError.Errored,
-      resourceId: syncBlockInstance.resourceId
+      resourceId: syncBlockInstance.resourceId,
+      onRetry: reloadData,
+      isLoading: isLoading
     });
   }
   const syncBlockDoc = {

package/dist/esm/ui/SyncedBlockErrorComponent.js

@@ -1,35 +1,43 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { getPageIdAndTypeFromAri, SyncBlockError } from '@atlaskit/editor-synced-block-provider';
+import { SyncedBlockGenericError } from './SyncedBlockGenericError';
+import { SyncedBlockLoadError } from './SyncedBlockLoadError';
 import { SyncedBlockPermissionDenied } from './SyncedBlockPermissionDenied';
 export var SyncedBlockErrorComponent = function SyncedBlockErrorComponent(_ref) {
   var error = _ref.error,
+    isLoading = _ref.isLoading,
+    onRetry = _ref.onRetry,
     resourceId = _ref.resourceId;
-  var getErrorContent = function getErrorContent() {
+  var getErrorContent = useMemo(function () {
     switch (error) {
       case SyncBlockError.Forbidden:
-        if (resourceId) {
-          var _getPageIdAndTypeFrom = getPageIdAndTypeFromAri(resourceId),
-            contentId = _getPageIdAndTypeFrom.id;
-          if (contentId) {
-            return /*#__PURE__*/React.createElement(SyncedBlockPermissionDenied, {
-              contentId: contentId
-            });
-          }
+        if (!resourceId) {
+          return /*#__PURE__*/React.createElement(SyncedBlockGenericError, null);
         }
-        return /*#__PURE__*/React.createElement("div", null, "Something went wrong");
+        var _getPageIdAndTypeFrom = getPageIdAndTypeFromAri(resourceId),
+          contentId = _getPageIdAndTypeFrom.id;
+        if (contentId) {
+          return /*#__PURE__*/React.createElement(SyncedBlockPermissionDenied, {
+            contentId: contentId
+          });
+        }
+        return /*#__PURE__*/React.createElement(SyncedBlockGenericError, null);
       case SyncBlockError.NotFound:
-        return /*#__PURE__*/React.createElement("div", null, "Sync Block Not Found");
       case SyncBlockError.Errored:
+        return /*#__PURE__*/React.createElement(SyncedBlockLoadError, {
+          onRetry: onRetry,
+          isLoading: isLoading
+        });
       default:
-        return /*#__PURE__*/React.createElement("div", null, "Something went wrong");
+        return /*#__PURE__*/React.createElement(SyncedBlockGenericError, null);
     }
-  };
+  }, [error, isLoading, onRetry, resourceId]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     React.createElement("div", {
       className: SyncBlockSharedCssClassName.error
-    }, getErrorContent())
+    }, getErrorContent)
   );
 };

package/dist/esm/ui/SyncedBlockErrorStateCard.js

@@ -0,0 +1,34 @@
+/* SyncedBlockErrorStateCard.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./SyncedBlockErrorStateCard.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import Heading from '@atlaskit/heading';
+import Image from '@atlaskit/image';
+import { Box, Stack, Text } from '@atlaskit/primitives/compiled';
+var styles = {
+  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhkby5v _1e0c1txw _1bahv2br _4cvr1h6o",
+  textWrapper: "_18u0u2gc"
+};
+export var SyncedBlockErrorStateCard = function SyncedBlockErrorStateCard(_ref) {
+  var children = _ref.children,
+    imageAltText = _ref.imageAltText,
+    imageSrc = _ref.imageSrc,
+    primaryMessage = _ref.primaryMessage,
+    secondaryMessage = _ref.secondaryMessage;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: imageSrc,
+    alt: imageAltText,
+    width: "48",
+    height: "48"
+  }), /*#__PURE__*/React.createElement(Stack, {
+    space: "space.100",
+    alignInline: "start",
+    xcss: styles.textWrapper
+  }, primaryMessage && /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall"
+  }, primaryMessage), secondaryMessage && /*#__PURE__*/React.createElement(Text, {
+    color: "color.text.subtle"
+  }, secondaryMessage), children));
+};

package/dist/esm/ui/SyncedBlockGenericError.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import ExclamationWarning from './assets/ExclamationWarning.svg';
+import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
+export var SyncedBlockGenericError = function SyncedBlockGenericError() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    imageSrc: ExclamationWarning,
+    secondaryMessage: formatMessage(messages.generalErrorDescription)
+  });
+};

package/dist/esm/ui/SyncedBlockLoadError.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/new';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import ExclamationWarning from './assets/ExclamationWarning.svg';
+import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
+export var SyncedBlockLoadError = function SyncedBlockLoadError(_ref) {
+  var onRetry = _ref.onRetry,
+    isLoading = _ref.isLoading;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    imageSrc: ExclamationWarning,
+    imageAltText: formatMessage(messages.notFoundAltText),
+    secondaryMessage: formatMessage(messages.notFoundDescription)
+  }, onRetry && /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    spacing: "compact",
+    onClick: function onClick(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      onRetry();
+    },
+    isLoading: isLoading,
+    testId: "sync-block-retry-btn"
+  }, formatMessage(messages.retryButton)));
+};

package/dist/esm/ui/SyncedBlockLoadingState.compiled.css

@@ -0,0 +1,6 @@
+._19itia51{border:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1tkevbgk{min-height:4pc}
+._4cvr1h6o{align-items:center}

package/dist/esm/ui/SyncedBlockLoadingState.js

@@ -1,4 +1,17 @@
+/* SyncedBlockLoadingState.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./SyncedBlockLoadingState.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+import Spinner from '@atlaskit/spinner';
+var styles = {
+  wrapper: "_19itia51 _2rko12b0 _1tkevbgk _1e0c1txw _1bah1h6o _4cvr1h6o"
+};
 export var SyncedBlockLoadingState = function SyncedBlockLoadingState() {
-  return /*#__PURE__*/React.createElement("div", null, "Loading...");
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.wrapper
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "small",
+    label: "Loading synced content"
+  }));
 };

package/dist/esm/ui/SyncedBlockNodeComponentRenderer.js

@@ -12,6 +12,7 @@ export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentR
   var _useFetchSyncBlockDat = useFetchSyncBlockData(syncBlockStoreManager, resourceId, localId),
     syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
     isLoading = _useFetchSyncBlockDat.isLoading,
+    reloadData = _useFetchSyncBlockDat.reloadData,
     providerFactory = _useFetchSyncBlockDat.providerFactory;
   if (isLoading && !syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
@@ -20,7 +21,9 @@ export var SyncedBlockNodeComponentRenderer = function SyncedBlockNodeComponentR
     var _syncBlockInstance$er;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
       error: (_syncBlockInstance$er = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : SyncBlockError.Errored,
-      resourceId: resourceId
+      resourceId: resourceId,
+      onRetry: reloadData,
+      isLoading: isLoading
     });
   }
   var syncBlockDoc = {

package/dist/esm/ui/SyncedBlockPermissionDenied.js

@@ -1,22 +1,14 @@
-/* SyncedBlockPermissionDenied.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import "./SyncedBlockPermissionDenied.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
 import _SyncedBlockPermissionDeniedRequestAccessMutation from "./__generated__/SyncedBlockPermissionDeniedRequestAccessMutation.graphql";
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import { useMutation, graphql } from 'react-relay';
 import Button from '@atlaskit/button/new';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
-import Heading from '@atlaskit/heading';
 import StatusSuccessIcon from '@atlaskit/icon/core/status-success';
-import Image from '@atlaskit/image';
-import { Box, Text, Stack, Flex } from '@atlaskit/primitives/compiled';
+import { Text, Flex } from '@atlaskit/primitives/compiled';
 import PermissionDenied from './assets/PermissionDenied.svg';
-var styles = {
-  wrapper: "_2rko12b0 _zulpu2gc _ca0qv47k _n3tdv47k _19bvxy5q _u5f3v47k _bfhkby5v _1e0c1txw _1bahv2br _4cvr1h6o",
-  textWrapper: "_18u0u2gc"
-};
+import { SyncedBlockErrorStateCard } from './SyncedBlockErrorStateCard';
 var RequestAccessState = /*#__PURE__*/function (RequestAccessState) {
   RequestAccessState["default"] = "default";
   RequestAccessState["errored"] = "errored";
@@ -56,22 +48,12 @@ export var SyncedBlockPermissionDenied = function SyncedBlockPermissionDenied(_r
       onError: handleRequestError
     });
   };
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles.wrapper
-  }, /*#__PURE__*/React.createElement(Image, {
-    src: PermissionDenied,
-    alt: formatMessage(messages.permissionDeniedAltText),
-    width: "48",
-    height: "48"
-  }), /*#__PURE__*/React.createElement(Stack, {
-    space: "space.100",
-    alignInline: "start",
-    xcss: styles.textWrapper
-  }, /*#__PURE__*/React.createElement(Heading, {
-    size: "xsmall"
-  }, formatMessage(messages.permissionDeniedHeading)), /*#__PURE__*/React.createElement(Text, {
-    color: "color.text.subtle"
-  }, formatMessage(messages.permissionDeniedDescription)), requestAccessState === RequestAccessState.pending ? /*#__PURE__*/React.createElement(Flex, {
+  return /*#__PURE__*/React.createElement(SyncedBlockErrorStateCard, {
+    imageSrc: PermissionDenied,
+    imageAltText: formatMessage(messages.permissionDeniedAltText),
+    primaryMessage: formatMessage(messages.permissionDeniedHeading),
+    secondaryMessage: formatMessage(messages.permissionDeniedDescription)
+  }, requestAccessState === RequestAccessState.pending ? /*#__PURE__*/React.createElement(Flex, {
     columnGap: "space.050",
     alignItems: "center"
   }, /*#__PURE__*/React.createElement(StatusSuccessIcon, {
@@ -94,5 +76,5 @@ export var SyncedBlockPermissionDenied = function SyncedBlockPermissionDenied(_r
   }, formatMessage(messages.requestAccessButton)), requestAccessState === RequestAccessState.errored && /*#__PURE__*/React.createElement(Text, {
     color: "color.text.warning",
     testId: "sync-block-access-error-msg"
-  }, formatMessage(messages.requestAccessError)))));
+  }, formatMessage(messages.requestAccessError))));
 };

package/dist/esm/ui/SyncedBlockRenderer.js

@@ -8,7 +8,9 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
     syncBlockRendererOptions = _ref.syncBlockRendererOptions;
   var _useFetchSyncBlockDat = useFetchSyncBlockData(),
     syncBlockInstance = _useFetchSyncBlockDat.syncBlockInstance,
-    providerFactory = _useFetchSyncBlockDat.providerFactory;
+    providerFactory = _useFetchSyncBlockDat.providerFactory,
+    isLoading = _useFetchSyncBlockDat.isLoading,
+    reloadData = _useFetchSyncBlockDat.reloadData;
   if (!syncBlockInstance) {
     return /*#__PURE__*/React.createElement(SyncedBlockLoadingState, null);
   }
@@ -16,7 +18,9 @@ var SyncedBlockRendererComponent = function SyncedBlockRendererComponent(_ref) {
     var _syncBlockInstance$er;
     return /*#__PURE__*/React.createElement(SyncedBlockErrorComponent, {
       error: (_syncBlockInstance$er = syncBlockInstance.error) !== null && _syncBlockInstance$er !== void 0 ? _syncBlockInstance$er : SyncBlockError.Errored,
-      resourceId: syncBlockInstance.resourceId
+      resourceId: syncBlockInstance.resourceId,
+      onRetry: reloadData,
+      isLoading: isLoading
     });
   }
   var syncBlockDoc = {

package/dist/types/ui/SyncedBlockErrorComponent.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
-export declare const SyncedBlockErrorComponent: ({ error, resourceId, }: {
+export declare const SyncedBlockErrorComponent: ({ error, isLoading, onRetry, resourceId, }: {
     error: SyncBlockError;
+    isLoading?: boolean;
+    onRetry?: () => void;
     resourceId?: string;
 }) => React.JSX.Element;

package/dist/types/ui/SyncedBlockErrorStateCard.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface SyncedBlockErrorStateCardProps {
+    children?: React.ReactNode;
+    imageAltText?: string;
+    imageSrc: string;
+    primaryMessage?: string;
+    secondaryMessage?: string;
+}
+export declare const SyncedBlockErrorStateCard: ({ children, imageAltText, imageSrc, primaryMessage, secondaryMessage, }: SyncedBlockErrorStateCardProps) => React.JSX.Element;
+export {};

package/dist/types/ui/SyncedBlockGenericError.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SyncedBlockGenericError: () => React.JSX.Element;

package/dist/types/ui/SyncedBlockLoadError.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SyncedBlockNotFoundProps {
+    contentId?: string;
+    isLoading?: boolean;
+    onRetry?: () => void;
+}
+export declare const SyncedBlockLoadError: ({ onRetry, isLoading }: SyncedBlockNotFoundProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/SyncedBlockErrorComponent.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
-export declare const SyncedBlockErrorComponent: ({ error, resourceId, }: {
+export declare const SyncedBlockErrorComponent: ({ error, isLoading, onRetry, resourceId, }: {
     error: SyncBlockError;
+    isLoading?: boolean;
+    onRetry?: () => void;
     resourceId?: string;
 }) => React.JSX.Element;

package/dist/types-ts4.5/ui/SyncedBlockErrorStateCard.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface SyncedBlockErrorStateCardProps {
+    children?: React.ReactNode;
+    imageAltText?: string;
+    imageSrc: string;
+    primaryMessage?: string;
+    secondaryMessage?: string;
+}
+export declare const SyncedBlockErrorStateCard: ({ children, imageAltText, imageSrc, primaryMessage, secondaryMessage, }: SyncedBlockErrorStateCardProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/SyncedBlockGenericError.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SyncedBlockGenericError: () => React.JSX.Element;

package/dist/types-ts4.5/ui/SyncedBlockLoadError.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SyncedBlockNotFoundProps {
+    contentId?: string;
+    isLoading?: boolean;
+    onRetry?: () => void;
+}
+export declare const SyncedBlockLoadError: ({ onRetry, isLoading }: SyncedBlockNotFoundProps) => React.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-synced-block-renderer",
-	"version": "3.2.0",
+	"version": "3.3.0",
 	"description": "SyncedBlockRenderer for @atlaskit/editor-plugin-synced-block",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,14 +37,15 @@
 		"@atlaskit/icon": "^29.0.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/primitives": "^16.1.0",
-		"@atlaskit/renderer": "^124.13.0",
+		"@atlaskit/renderer": "^124.14.0",
+		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tokens": "^8.0.0",
 		"@babel/runtime": "^7.0.0",
 		"react-relay": "npm:atl-react-relay@0.0.0-main-6ff96079",
 		"relay-runtime": "npm:atl-relay-compiler@0.0.0-main-6ff96079"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.30.0",
+		"@atlaskit/editor-common": "^110.31.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},