From 5db20d9431d66a75270ba91f09325e31a9930989 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 20 Jul 2021 08:54:32 +0200
Subject: [PATCH] Fix placeholder centering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 res/css/views/messages/_MImageBody.scss      | 15 ++++-----------
 src/components/views/messages/MImageBody.tsx |  4 ++--
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index 878a4154cd..ee813a08e7 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -29,6 +29,10 @@ $timelineImageBorderRadius: 4px;
     top: 0;
     border-radius: $timelineImageBorderRadius;
 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
     > canvas {
         border-radius: $timelineImageBorderRadius;
     }
@@ -43,17 +47,6 @@ $timelineImageBorderRadius: 4px;
     position: relative;
 }
 
-.mx_MImageBody_thumbnail_spinner {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-}
-
-// Inner img should be centered around 0, 0
-.mx_MImageBody_thumbnail_spinner > * {
-    transform: translate(-50%, -50%);
-}
-
 .mx_MImageBody_gifLabel {
     position: absolute;
     display: block;
diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 96c8652aee..7be4373eba 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -440,9 +440,9 @@ export default class MImageBody extends React.Component<IProps, IState> {
     protected getPlaceholder(width: number, height: number): JSX.Element {
         const blurhash = this.props.mxEvent.getContent().info[BLURHASH_FIELD];
         if (blurhash) return <Blurhash hash={blurhash} width={width} height={height} />;
-        return <div className="mx_MImageBody_thumbnail_spinner">
+        return (
             <InlineSpinner w={32} h={32} />
-        </div>;
+        );
     }
 
     // Overidden by MStickerBody