fix: Gravatar over-fetching (#18865)

frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.scss

@@ -13,7 +13,8 @@
 }
 
 .ProfilePicture {
-    display: flex;
+    position: relative;
+    display: inline-flex;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
@@ -87,6 +88,7 @@
 }
 
 .ProfileBubbles__more {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;

frontend/src/lib/lemon-ui/ProfilePicture/ProfilePicture.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx'
 import { useValues } from 'kea'
 import { inStorybookTestRunner } from 'lib/utils'
 import md5 from 'md5'
-import { useEffect, useState } from 'react'
+import { useMemo, useState } from 'react'
 import { userLogic } from 'scenes/userLogic'
 
 import { IconRobot } from '../icons'
@@ -32,55 +32,51 @@ export function ProfilePicture({
     type = 'person',
 }: ProfilePictureProps): JSX.Element {
     const { user } = useValues(userLogic)
-    const [gravatarUrl, setGravatarUrl] = useState<string | null>(null)
-    const pictureClass = clsx('ProfilePicture', size, className)
-
-    let pictureComponent: JSX.Element
+    const [gravatarLoaded, setGravatarLoaded] = useState<boolean | undefined>()
 
     const combinedNameAndEmail = name && email ? `${name} <${email}>` : name || email
 
-    useEffect(() => {
+    const gravatarUrl = useMemo(() => {
         if (inStorybookTestRunner()) {
             return // There are no guarantees on how long it takes to fetch a Gravatar, so we skip this in snapshots
         }
         // Check if Gravatar exists
         const emailOrNameWithEmail = email || (name?.includes('@') ? name : undefined)
         if (emailOrNameWithEmail) {
             const emailHash = md5(emailOrNameWithEmail.trim().toLowerCase())
-            const tentativeUrl = `https://www.gravatar.com/avatar/${emailHash}?s=96&d=404`
-            // The image will be cached, so it's best to do GET request check before trying to render it
-            void fetch(tentativeUrl).then((response) => {
-                if (response.status === 200) {
-                    setGravatarUrl(tentativeUrl)
-                }
-            })
+            return `https://www.gravatar.com/avatar/${emailHash}?s=96&d=404`
         }
     }, [email])
 
-    if (gravatarUrl) {
-        pictureComponent = (
-            <img
-                className={pictureClass}
-                src={gravatarUrl}
-                title={title || `This is the Gravatar for ${combinedNameAndEmail}`}
-                alt=""
-            />
-        )
-    } else {
-        pictureComponent =
-            type === 'bot' ? (
-                <IconRobot className={clsx(pictureClass, 'p-0.5')} />
-            ) : (
-                <span className={pictureClass}>
-                    <Lettermark
-                        name={combinedNameAndEmail}
-                        index={index}
-                        rounded
-                        color={type === 'system' ? LettermarkColor.Gray : undefined}
-                    />
-                </span>
-            )
-    }
+    const pictureComponent = (
+        <span className={clsx('ProfilePicture', size, className)}>
+            {gravatarLoaded !== true && (
+                <>
+                    {type === 'bot' ? (
+                        <IconRobot className={'p-0.5'} />
+                    ) : (
+                        <Lettermark
+                            name={combinedNameAndEmail}
+                            index={index}
+                            rounded
+                            color={type === 'system' ? LettermarkColor.Gray : undefined}
+                        />
+                    )}
+                </>
+            )}
+            {gravatarUrl && gravatarLoaded !== false ? (
+                <img
+                    className={'absolute top-0 left-0 w-full h-full rounded-full'}
+                    src={gravatarUrl}
+                    title={title || `This is the Gravatar for ${combinedNameAndEmail}`}
+                    alt=""
+                    onError={() => setGravatarLoaded(false)}
+                    onLoad={() => setGravatarLoaded(true)}
+                />
+            ) : null}
+        </span>
+    )
+
     return !showName ? (
         pictureComponent
     ) : (