Profile: hide alt text if the image is not loaded

src/profiles/Profile.css

@@ -8,6 +8,21 @@
     gap: 16px;
   }
 
+  .banner {
+    width: 100%;
+    margin-top: calc(-1 * (var(--scaffold-topbar-height) + var(--safe-area-inset-top)));
+
+    >img {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;
+
+      &::before {
+        visibility: hidden;
+      }
+    }
+  }
+
   .description {
     & a {
       color: inherit;
@@ -23,11 +38,11 @@
     gap: 16px;
     align-items: center;
 
-    & > :nth-child(2) {
+    &> :nth-child(2) {
       flex-grow: 1;
     }
 
-    & > :last-child {
+    &> :last-child {
       flex-grow: 1;
       text-align: right;
     }
@@ -51,14 +66,14 @@
   table.acct-fields {
     word-break: break-all;
 
-    & td > a {
+    & td>a {
       display: inline-flex;
       align-items: center;
       color: inherit;
       min-height: 44px;
     }
 
-    & a > .invisible {
+    & a>.invisible {
       display: none;
     }
 
@@ -89,4 +104,4 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
+}

src/profiles/Profile.tsx

@@ -336,21 +336,14 @@ const Profile: Component = () => {
       </Menu>
       <div
         style={{
-          width: "100%",
           height: `${268 * (Math.min(560, windowSize.width) / 560)}px`,
-          "margin-top":
-            "calc(-1 * (var(--scaffold-topbar-height) + var(--safe-area-inset-top)))",
         }}
+        class="banner"
         role="presentation"
       >
         <img
           ref={(e) => obx.observe(e)}
           src={bannerImg()}
-          style={{
-            "object-fit": "cover",
-            width: "100%",
-            height: "100%",
-          }}
           crossOrigin="anonymous"
           alt={`Banner image for ${profile()?.displayName || "the user"}`}
           onLoad={(event) => {