diff --git a/packages/story-editor/src/components/canvas/renderResourcePlaceholder.js b/packages/story-editor/src/components/canvas/renderResourcePlaceholder.js
index d9df42e060a1..b4843bd25358 100644
--- a/packages/story-editor/src/components/canvas/renderResourcePlaceholder.js
+++ b/packages/story-editor/src/components/canvas/renderResourcePlaceholder.js
@@ -20,6 +20,11 @@
import styled, { css } from 'styled-components';
import { Blurhash } from 'react-blurhash';
+/**
+ * Internal dependencies
+ */
+import { HideOnError } from '../hideOnError';
+
const placeholderStyles = css`
position: absolute !important;
top: 0;
@@ -40,7 +45,14 @@ const BaseColorContainer = styled.div`
function renderResourcePlaceholder({ blurHash, baseColor }) {
if (blurHash) {
return (
-
+
+
+
);
}
diff --git a/packages/story-editor/src/components/hideOnError.tsx b/packages/story-editor/src/components/hideOnError.tsx
new file mode 100644
index 000000000000..45d2db0778bd
--- /dev/null
+++ b/packages/story-editor/src/components/hideOnError.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import type { PropsWithChildren } from 'react';
+import { Component } from '@googleforcreators/react';
+
+interface HideOnErrorState {
+ error: Error | null;
+}
+
+export class HideOnError extends Component> {
+ state: HideOnErrorState;
+
+ constructor(props: PropsWithChildren) {
+ super(props);
+
+ this.state = {
+ error: null,
+ };
+ }
+
+ static getDerivedStateFromError(error: Error) {
+ return { error };
+ }
+
+ render() {
+ const { error } = this.state;
+ if (!error) {
+ return this.props.children;
+ }
+
+ return null;
+ }
+}
diff --git a/packages/story-editor/src/components/library/panes/media/common/mediaElement.js b/packages/story-editor/src/components/library/panes/media/common/mediaElement.js
index a9a734553c51..d6074da922f2 100644
--- a/packages/story-editor/src/components/library/panes/media/common/mediaElement.js
+++ b/packages/story-editor/src/components/library/panes/media/common/mediaElement.js
@@ -38,6 +38,7 @@ import DropDownMenu from '../local/dropDownMenu';
import { ContentType, useLocalMedia } from '../../../../../app/media';
import Tooltip from '../../../../tooltip';
import { noop } from '../../../../../utils/noop';
+import { HideOnError } from '../../../../hideOnError';
import Attribution from './attribution';
import InnerElement from './innerElement';
import InsertionMenu from './insertionMenu';
@@ -211,12 +212,14 @@ function Element({
/>
{attribution}
{isPlaceholder && blurHash && (
-
+
+
+
)}
{(!src ||
isCurrentResourceProcessing(resourceId) ||
diff --git a/packages/story-editor/tsconfig.json b/packages/story-editor/tsconfig.json
index 8df5fd9d92a1..6a85a582283b 100644
--- a/packages/story-editor/tsconfig.json
+++ b/packages/story-editor/tsconfig.json
@@ -47,6 +47,7 @@
"src/app/pageDataUrls",
"src/app/story",
"src/app/taxonomy",
+ "src/components/hideOnError.tsx",
"src/components/library/panes/text/textPresets.ts",
"src/components/canvas/*.ts",
"src/components/canvas/utils/*.ts",