fix: placeholder bg for site image on login (#1760)

src/features/auth/login/login/Login.tsx

@@ -24,16 +24,14 @@ import { getLoginErrorMessage, isLemmyError } from "#/helpers/lemmyErrors";
 import { loginSuccess } from "#/helpers/toastMessages";
 import useAppToast from "#/helpers/useAppToast";
 import { VOYAGER_TERMS } from "#/helpers/voyager";
-import { buildBaseLemmyUrl, getImageSrc } from "#/services/lemmy";
+import { buildBaseLemmyUrl } from "#/services/lemmy";
 import { useAppDispatch, useAppSelector } from "#/store";
 
 import { getInstanceFromHandle } from "../../authSelectors";
 import { addGuestInstance, login } from "../../authSlice";
-import lemmyLogo from "../lemmyLogo.svg";
+import LoginAvatarImg from "./LoginAvatarImg";
 import Totp from "./Totp";
 
-import styles from "./Login.module.css";
-
 interface LoginProps {
   url: string;
   siteIcon: string | undefined;
@@ -164,16 +162,7 @@ export default function Login({ url, siteIcon }: LoginProps) {
           >
             <IonChip outline>
               <IonAvatar>
-                <img
-                  className={styles.siteIconImg}
-                  src={
-                    siteIcon
-                      ? getImageSrc(siteIcon, {
-                          size: 24,
-                        })
-                      : lemmyLogo
-                  }
-                />
+                <LoginAvatarImg src={siteIcon} />
               </IonAvatar>
               <IonLabel>{url}</IonLabel>
             </IonChip>

src/features/auth/login/login/LoginAvatarImg.module.css

@@ -0,0 +1,7 @@
+.img {
+  object-fit: contain;
+}
+
+.loading {
+  background-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.07);
+}

src/features/auth/login/login/LoginAvatarImg.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react";
+
+import { cx } from "#/helpers/css";
+import { getImageSrc } from "#/services/lemmy";
+
+import lemmyLogo from "../lemmyLogo.svg";
+
+import styles from "./LoginAvatarImg.module.css";
+
+interface LoginAvatarImgProps {
+  src: string | undefined;
+}
+
+export default function LoginAvatarImg({ src }: LoginAvatarImgProps) {
+  const [loaded, setLoaded] = useState(false);
+
+  return (
+    <img
+      className={cx(styles.img, !loaded && styles.loading)}
+      src={
+        src
+          ? getImageSrc(src, {
+              size: 24,
+            })
+          : lemmyLogo
+      }
+      onLoad={() => setLoaded(true)}
+    />
+  );
+}