Fix: Images no longer reserve their space in the timeline correctly (#10571)

* test case

* fix + lint

* refix strictNullChecks issue

* add comment about max image size

* tweak

* use safer magic number

test/components/views/messages/__snapshots__/MImageBody-test.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<MImageBody/> should show a thumbnail while image is being downloaded 1`] = `
+<div>
+  <div
+    class="mx_MImageBody"
+  >
+    <div
+      class="mx_MImageBody_thumbnail_container"
+      style="max-height: 50px; max-width: 40px;"
+    >
+      <div
+        class="mx_MImageBody_placeholder"
+      >
+        <div
+          class="mx_Spinner"
+        >
+          <div
+            aria-label="Loading…"
+            class="mx_Spinner_icon"
+            data-testid="spinner"
+            role="progressbar"
+            style="width: 32px; height: 32px;"
+          />
+        </div>
+      </div>
+      <div
+        style="max-height: 50px; max-width: 40px;"
+      />
+      <div
+        style="height: 50px; width: 40px;"
+      />
+    </div>
+  </div>
+</div>
+`;