packages/components/containers/contacts/ContactImage.tsx

   1 import { useEffect, useState } from 'react';
   2
   3 import { useMailSettings } from '@proton/mail/mailSettings/hooks';
   4 import { getInitials } from '@proton/shared/lib/helpers/string';
   5 import { HIDE_SENDER_IMAGES } from '@proton/shared/lib/mail/mailSettings';
   6 import clsx from '@proton/utils/clsx';
   7
   8 import useSenderImage from './hooks/useSenderImage';
   9
  10 interface Props {
  11     email: string;
  12     name: string;
  13     className?: string;
  14     bimiSelector?: string;
  15     displaySenderImage?: boolean;
  16     variant?: 'default' | 'small';
  17 }
  18
  19 const ContactImage = ({ email, name, className, bimiSelector, displaySenderImage, variant = 'default' }: Props) => {
  20     const [mailSettings] = useMailSettings();
  21     const canLoad = !!displaySenderImage && !!email && mailSettings?.HideSenderImages === HIDE_SENDER_IMAGES.SHOW;
  22     const url = useSenderImage(canLoad ? email : '', bimiSelector);
  23     const [tryToLoad, setTryToLoad] = useState(false);
  24
  25     useEffect(() => {
  26         if (url) {
  27             setTryToLoad(true);
  28         }
  29     }, [url]);
  30
  31     if (tryToLoad) {
  32         return (
  33             <img
  34                 className={clsx(className, 'item-sender-image')}
  35                 alt=""
  36                 width={variant === 'default' ? '32' : '28'}
  37                 src={url}
  38                 onError={() => setTryToLoad(false)}
  39                 loading="lazy" // Lazy load the image only when it's in the viewport
  40                 data-testid="contact-image"
  41                 style={{ inlineSize: variant === 'default' ? '2rem' : '1.75rem' }} // 32px, but following main font size
  42             />
  43         );
  44     }
  45
  46     return <span data-testid="contact-initials">{getInitials(name)}</span>;
  47 };
  48
  49 export default ContactImage;