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;

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) => {