message: refactor: extract AvatarImage
diff: @@ -179,33 +179,59 @@ export const Avatar: React.FC<AvatarProps> = forwardRef((props, ref) => {
  ...rest
  } = omitThemingProps(props)
  - /**
  - * use the image hook to only show the image when it has loaded
  - */
  - const status = useImage({ src, onError })
  -
  - const hasLoaded = status === "loaded"
  + const avatarStyles = {
  + borderRadius,
  + borderWidth: showBorder ? "2px" : undefined,
  + ...baseStyle,
  + ...styles.container,
  + }
  - const getAvatar = () => {
  - /**
  - * If `src` was passed and the image has loaded, we'll show it
  - */
  - if (src && hasLoaded) {
  return (
  - <chakra.img
  + <chakra.span
  + ref={ref}
  + {...rest}
  + className={cx("chakra-avatar", props.className)}
  + __css={avatarStyles}
  + >
  + <StylesProvider value={styles}>
  + <AvatarImage
  src={src}
  - alt={name}
  - className="chakra-avatar__img"
  - __css={{
  - width: "100%",
  - height: "100%",
  - objectFit: "cover",
  - borderRadius,
  - }}
  + onError={onError}
  + getInitials={getInitials}
  + name={name}
  + borderRadius={borderRadius}
  + icon={icon}
  />
  + {children}
  + </StylesProvider>
  + </chakra.span>
  )
  +})
  +
  +if (__DEV__) {
  + Avatar.displayName = "Avatar"
  }
  +type AvatarImageProps = Pick<
  + AvatarProps,
  + "src" | "onError" | "name" | "getInitials" | "borderRadius" | "icon"
  +>
  +
  +const AvatarImage: React.FC<AvatarImageProps> = ({
  + src,
  + onError,
  + getInitials,
  + name,
  + borderRadius,
  + icon = <DefaultIcon />,
  +}) => {
  + /**
  + * use the image hook to only show the image when it has loaded
  + */
  + const status = useImage({ src, onError })
  +
  + const hasLoaded = status === "loaded"
  +
  /**
  * Fallback avatar applies under 2 conditions:
  * - If `src` was passed and the image has not loaded or failed to load
  @@ -226,30 +252,25 @@ export const Avatar: React.FC<AvatarProps> = forwardRef((props, ref) => {
  cloneElement(icon, { role: "img" })
  )
  }
  - }
  -
  - const avatarStyles = {
  - borderRadius,
  - borderWidth: showBorder ? "2px" : undefined,
  - ...baseStyle,
  - ...styles.container,
  - }
  + /**
  + * If `src` was passed and the image has loaded, we'll show it
  + */
  return (
  - <chakra.span
  - ref={ref}
  - {...rest}
  - className={cx("chakra-avatar", props.className)}
  - __css={avatarStyles}
  - >
  - <StylesProvider value={styles}>
  - {getAvatar()}
  - {children}
  - </StylesProvider>
  - </chakra.span>
  + <chakra.img
  + src={src}
  + alt={name}
  + className="chakra-avatar__img"
  + __css={{
  + width: "100%",
  + height: "100%",
  + objectFit: "cover",
  + borderRadius,
  + }}
  + />
  )
  -})
  +}
  if (__DEV__) {
  - Avatar.displayName = "Avatar"
  + AvatarImage.displayName = "AvatarImage"
  }
  