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",