[Avatar] Adding support for Framework image

[Udhayarajan]

Description

Hi Team,

I'm proposing a new suggestion to address issue #2230 on top of existing PR #2999

I've implemented this solution by removing the prefetch image which helps to determine the image loading error.

Since Primitive.img already handles OnLoad and OnError events, it makes sense to leverage these callbacks for handling image load failures in a single fetch.

Changes Introduced

• On the first render, Primitive.img is displayed, and its OnLoad and OnError callbacks are subscribed through an intermediate handler:
  • Loading: The image’s style.display is set to none.
  • Success: The display property is updated to the user-specified value.
  • Failure: The component re-renders, returning null to display the fallback.
• Removed the useImageLoadingStatus custom hook, simplifying the image loading process:

  primitives/packages/react/avatar/src/Avatar.tsx

  Line 119 in 6469d41

  function useImageLoadingStatus(src?: string, referrerPolicy?: React.HTMLAttributeReferrerPolicy) {

NOTE: I don't find any other use-case of useImageLoadingStatus hook, other than tracking image loading status

What This Solves

• Enables better integration with framework-specific optimizations (e.g., Next.js’s Image component).

Visual Comparison

Before:

before.mp4

After:

after.mp4

EDIT:
Upon toggling Disable Cache off It makes only one request

[chaance]

Planning to handle this a little differently #3943