diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx index 0b4cc8cb3b..5c7a553364 100644 --- a/src/components/views/messages/MImageBody.tsx +++ b/src/components/views/messages/MImageBody.tsx @@ -61,6 +61,7 @@ export default class MImageBody extends React.Component { private unmounted = true; private image = createRef(); + private placeholder = createRef(); private timeout?: number; private sizeWatcher?: string; @@ -453,7 +454,11 @@ export default class MImageBody extends React.Component { "mx_MImageBody_placeholder--blurhash": this.props.mxEvent.getContent().info?.[BLURHASH_FIELD], }); - placeholder =
{this.getPlaceholder(maxWidth, maxHeight)}
; + placeholder = ( +
+ {this.getPlaceholder(maxWidth, maxHeight)} +
+ ); } let showPlaceholder = Boolean(placeholder); @@ -499,8 +504,19 @@ export default class MImageBody extends React.Component { if (!this.props.forExport) { placeholder = ( - - {showPlaceholder ? placeholder : <> /* Transition always expects a child */} + + { + showPlaceholder ? ( + placeholder + ) : ( +
+ ) /* Transition always expects a child */ + } ); diff --git a/src/components/views/rooms/RoomBreadcrumbs.tsx b/src/components/views/rooms/RoomBreadcrumbs.tsx index 19405e96b0..5de4687cb9 100644 --- a/src/components/views/rooms/RoomBreadcrumbs.tsx +++ b/src/components/views/rooms/RoomBreadcrumbs.tsx @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only Please see LICENSE files in the repository root for full details. */ -import React from "react"; +import React, { createRef } from "react"; import { Room } from "matrix-js-sdk/src/matrix"; import { CSSTransition } from "react-transition-group"; @@ -61,6 +61,7 @@ const RoomBreadcrumbTile: React.FC<{ room: Room; onClick: (ev: ButtonEvent) => v export default class RoomBreadcrumbs extends React.PureComponent { private isMounted = true; + private toolbar = createRef(); public constructor(props: IProps) { super(props); @@ -113,8 +114,18 @@ export default class RoomBreadcrumbs extends React.PureComponent if (tiles.length > 0) { // NOTE: The CSSTransition timeout MUST match the timeout in our CSS! return ( - - + + {tiles.slice(this.state.skipFirst ? 1 : 0)}