render spinner instead of 1px dot

resources/css/bem-index.less

···
 @import "bem/beatmapset-beatmap-picker";
 @import "bem/beatmapset-cover";
 @import "bem/beatmapset-cover-admin";
+@import "bem/beatmapset-discussion-image-link";
 @import "bem/beatmapset-discussion-message";
 @import "bem/beatmapset-discussions-chart";
 @import "bem/beatmapset-event";

resources/css/bem/beatmapset-discussion-image-link.less

···
+// Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.beatmapset-discussion-image-link {
+  position: relative;
+  display: inline-flex;
+  min-width: 1em;
+  min-height: 1em;
+
+  &__spinner {
+    .full-size();
+    .center-content();
+  }
+}

resources/js/beatmap-discussions/image-link.tsx

···
 // Copyright (c) ppy Pty Ltd <[e-mail]>. Licensed under the GNU Affero General Public License v3.0.
 // See the LICENCE file in the repository root for full licence text.
 
-import { action } from 'mobx';
+import { Spinner } from 'components/spinner';
+import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import React from 'react';
 import { ReactMarkdownProps } from 'react-markdown/lib/complex-types';
 import DiscussionsStateContext from './discussions-state-context';
 
 type Props = ReactMarkdownProps & React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
-
-const placeholder = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
 
 @observer
 export default class ImageLink extends React.Component<Props> {
   static contextType = DiscussionsStateContext;
   declare context: React.ContextType<typeof DiscussionsStateContext>;
+  @observable private loaded = false;
+
+  constructor(props: Props) {
+    super(props);
+
+    makeObservable(this);
+  }
 
   @action
   componentDidMount(): void {
···
 
   render() {
     const url = this.props.src != null ? this.context.mediaUrls.get(this.props.src) : null;
-    // render node mutation when url changes to trigger Layzr
+
     if (url == null) {
       return (
-        <img {...this.props.node.properties} src={placeholder} />
+        <span className='beatmapset-discussion-image-link'>
+          {this.renderSpinner()}
+        </span>
       );
     }
 
+    // TODO: render something else on fail?
     return (
-      <a href={url} rel='nofollow noreferrer' target='_blank'>
-        <img {...this.props.node.properties} data-normal={url} src={placeholder} />
+      <a className='beatmapset-discussion-image-link' href={url} rel='nofollow noreferrer' target='_blank'>
+        {!this.loaded && this.renderSpinner()}
+        <img {...this.props.node.properties} onLoad={this.handleOnLoad} src={url} />
       </a>
     );
+  }
+
+  @action
+  private handleOnLoad = () => {
+    this.loaded = true;
+  };
+
+  private renderSpinner() {
+    return <span className='beatmapset-discussion-image-link__spinner'><Spinner /></span>;
   }
 }