message: fix(avatar): add loading prop for avatar
diff: @@ -44,6 +44,10 @@ interface AvatarOptions {
  * List of sources to use for different screen resolutions
  */
  srcSet?: string
  + /**
  + * Defines loading strategy
  + */
  + loading?: "eager" | "lazy"
  /**
  * The border color of the avatar
  */
  @@ -180,6 +184,7 @@ export const Avatar = forwardRef<AvatarProps, "span">(function Avatar(
  onError,
  getInitials = initials,
  icon = <DefaultIcon />,
  + loading,
  children,
  borderColor,
  ...rest
  @@ -206,6 +211,7 @@ export const Avatar = forwardRef<AvatarProps, "span">(function Avatar(
  <StylesProvider value={styles}>
  <AvatarImage
  src={src}
  + loading={loading}
  onError={onError}
  getInitials={getInitials}
  name={name}
  @@ -225,7 +231,13 @@ if (__DEV__) {
  interface AvatarImageProps
  extends Pick<
  AvatarProps,
  - "src" | "onError" | "name" | "getInitials" | "borderRadius" | "icon"
  + | "src"
  + | "onError"
  + | "name"
  + | "getInitials"
  + | "borderRadius"
  + | "icon"
  + | "loading"
  > {}
  const AvatarImage: React.FC<AvatarImageProps> = ({
  @@ -234,6 +246,7 @@ const AvatarImage: React.FC<AvatarImageProps> = ({
  getInitials,
  name,
  borderRadius,
  + loading,
  icon = <DefaultIcon />,
  }) => {
  /**
  @@ -272,6 +285,7 @@ const AvatarImage: React.FC<AvatarImageProps> = ({
  src={src}
  alt={name}
  className="chakra-avatar__img"
  + loading={loading}
  __css={{
  width: "100%",
  height: "100%",
  