Fix centering issue with sticker placeholder (#8404)

Author: t3chguy

res/css/views/messages/_MStickerBody.scss

@@ -33,3 +33,10 @@ limitations under the License.
     align-items: center;
     justify-content: center;
 }
+
+.mx_MStickerBody_placeholder {
+    // centering
+    position: absolute;
+    left: calc(50% - 40px);
+    top: calc(50% - 40px);
+}

src/components/views/messages/MImageBody.tsx

@@ -138,7 +138,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         }
     };
 
-    private onImageEnter = (e: React.MouseEvent<HTMLImageElement>): void => {
+    protected onImageEnter = (e: React.MouseEvent<HTMLImageElement>): void => {
         this.setState({ hover: true });
 
         if (!this.state.showImage || !this.state.isAnimated || SettingsStore.getValue("autoplayGifs")) {
@@ -148,7 +148,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         imgElement.src = this.state.contentUrl;
     };
 
-    private onImageLeave = (e: React.MouseEvent<HTMLImageElement>): void => {
+    protected onImageLeave = (e: React.MouseEvent<HTMLImageElement>): void => {
         this.setState({ hover: false });
 
         if (!this.state.showImage || !this.state.isAnimated || SettingsStore.getValue("autoplayGifs")) {

src/components/views/messages/MStickerBody.tsx

@@ -39,11 +39,19 @@ export default class MStickerBody extends MImageBody {
         return <div className="mx_MStickerBody_wrapper" onClick={onClick}> { children } </div>;
     }
 
-    // Placeholder to show in place of the sticker image if
-    // img onLoad hasn't fired yet.
+    // Placeholder to show in place of the sticker image if img onLoad hasn't fired yet.
     protected getPlaceholder(width: number, height: number): JSX.Element {
         if (this.props.mxEvent.getContent().info?.[BLURHASH_FIELD]) return super.getPlaceholder(width, height);
-        return <img src={require("../../../../res/img/icons-show-stickers.svg").default} width="75" height="75" />;
+        return (
+            <img
+                className="mx_MStickerBody_placeholder"
+                src={require("../../../../res/img/icons-show-stickers.svg").default}
+                width="80"
+                height="80"
+                onMouseEnter={this.onImageEnter}
+                onMouseLeave={this.onImageLeave}
+            />
+        );
     }
 
     // Tooltip to show on mouse over