mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-14 07:20:02 +03:00
Code Issues Projects Releases Packages Wiki Activity

Fix alignment of image blurhashes and interplay with spinners

Browse source
This commit is contained in:
Michael Telatynski 2021-05-21 21:39:38 +01:00
parent 3a2e5389f6
commit 9c599b567d
1 changed files with 6 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/views/messages/MImageBody.js
View file

@ -372,10 +372,7 @@ export default class MImageBody extends React.Component {
let placeholder = null; let placeholder = null;
let gifLabel = null; let gifLabel = null;
// e2e image hasn't been decrypted yet if (!this.state.imgLoaded) {
if (content.file !== undefined && this.state.decryptedUrl === null) {
placeholder = <InlineSpinner w={32} h={32} />;
} else if (!this.state.imgLoaded) {
placeholder = this.getPlaceholder(maxWidth, maxHeight); placeholder = this.getPlaceholder(maxWidth, maxHeight);
} }
@ -414,10 +411,8 @@ export default class MImageBody extends React.Component {
// Constrain width here so that spinner appears central to the loaded thumbnail // Constrain width here so that spinner appears central to the loaded thumbnail
maxWidth: infoWidth + "px", maxWidth: infoWidth + "px",
}}> }}>
<div className="mx_MImageBody_thumbnail_spinner">
{ placeholder } { placeholder }
</div> </div>
</div>
} }
<div style={{display: !showPlaceholder ? undefined : 'none'}}> <div style={{display: !showPlaceholder ? undefined : 'none'}}>
@ -442,8 +437,10 @@ export default class MImageBody extends React.Component {
// Overidden by MStickerBody // Overidden by MStickerBody
getPlaceholder(width, height) { getPlaceholder(width, height) {
const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD]; const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD];
if (!blurhash) return null; if (blurhash) return <BlurhashPlaceholder blurhash={blurhash} width={width} height={height} />;
return <BlurhashPlaceholder blurhash={blurhash} width={width} height={height} />; return <div className="mx_MImageBody_thumbnail_spinner">
<InlineSpinner w={32} h={32} />
</div>;
} }
// Overidden by MStickerBody // Overidden by MStickerBody