[avatar] Fix image status edge cases

Author: atomiks

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

@@ -0,0 +1,72 @@
+import { expectType } from '#test-utils';
+import {
+  Avatar,
+  type AvatarFallbackProps,
+  type AvatarFallbackState,
+  type AvatarImageProps,
+  type AvatarImageState,
+  type AvatarRootProps,
+  type AvatarRootState,
+  type ImageLoadingStatus,
+} from '@base-ui/react/avatar';
+
+const rootProps: Avatar.Root.Props = {};
+expectType<AvatarRootProps, typeof rootProps>(rootProps);
+
+const imageProps: Avatar.Image.Props = {
+  crossOrigin: 'anonymous',
+  referrerPolicy: 'no-referrer',
+  sizes: '48px',
+  srcSet: 'avatar.png 1x, avatar@2x.png 2x',
+};
+expectType<AvatarImageProps, typeof imageProps>(imageProps);
+
+const fallbackProps: Avatar.Fallback.Props = {
+  delay: 100,
+};
+expectType<AvatarFallbackProps, typeof fallbackProps>(fallbackProps);
+
+function expectRootState(state: Avatar.Root.State) {
+  expectType<AvatarRootState, typeof state>(state);
+  expectType<ImageLoadingStatus, typeof state.imageLoadingStatus>(state.imageLoadingStatus);
+}
+
+function expectImageState(state: Avatar.Image.State) {
+  expectType<AvatarImageState, typeof state>(state);
+  expectType<ImageLoadingStatus, typeof state.imageLoadingStatus>(state.imageLoadingStatus);
+}
+
+function expectFallbackState(state: Avatar.Fallback.State) {
+  expectType<AvatarFallbackState, typeof state>(state);
+  expectType<ImageLoadingStatus, typeof state.imageLoadingStatus>(state.imageLoadingStatus);
+}
+
+function expectLoadingStatus(status: ImageLoadingStatus) {
+  expectType<ImageLoadingStatus, typeof status>(status);
+}
+
+<Avatar.Root
+  {...rootProps}
+  render={(props, state) => {
+    expectRootState(state);
+    return <span {...props} />;
+  }}
+>
+  <Avatar.Image
+    {...imageProps}
+    onLoadingStatusChange={(status) => {
+      expectLoadingStatus(status);
+    }}
+    render={(props, state) => {
+      expectImageState(state);
+      return <img alt="" {...props} />;
+    }}
+  />
+  <Avatar.Fallback
+    {...fallbackProps}
+    render={(props, state) => {
+      expectFallbackState(state);
+      return <span {...props} />;
+    }}
+  />
+</Avatar.Root>;

packages/react/src/avatar/fallback/AvatarFallback.test.tsx

@@ -1,7 +1,7 @@
 import { Mock, vi, expect } from 'vitest';
 import * as React from 'react';
 import { Avatar } from '@base-ui/react/avatar';
-import { waitFor, screen } from '@mui/internal-test-utils';
+import { act, waitFor, screen } from '@mui/internal-test-utils';
 import { describeConformance, createRenderer, isJSDOM } from '#test-utils';
 import { useImageLoadingStatus } from '../image/useImageLoadingStatus';
 
@@ -51,6 +51,38 @@ describe('<Avatar.Fallback />', () => {
     });
   });
 
+  it.skipIf(!isJSDOM)('shows the fallback when a loaded image is unmounted', async () => {
+    (useImageLoadingStatus as Mock).mockReturnValue('loaded');
+
+    function Test() {
+      const [showImage, setShowImage] = React.useState(true);
+
+      return (
+        <div>
+          <button onClick={() => setShowImage(false)}>Hide image</button>
+          <Avatar.Root>
+            {showImage && <Avatar.Image data-testid="image" src="avatar.png" />}
+            <Avatar.Fallback data-testid="fallback">AC</Avatar.Fallback>
+          </Avatar.Root>
+        </div>
+      );
+    }
+
+    const { user } = await render(<Test />);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('image')).not.toBe(null);
+      expect(screen.queryByTestId('fallback')).toBe(null);
+    });
+
+    await user.click(screen.getByText('Hide image'));
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('image')).toBe(null);
+      expect(screen.getByTestId('fallback')).not.toBe(null);
+    });
+  });
+
   describe.skipIf(!isJSDOM)('prop: delay', () => {
     const { clock, render: renderFakeTimers } = createRenderer();
 
@@ -70,6 +102,33 @@ describe('<Avatar.Fallback />', () => {
 
       expect(screen.queryByText('AC')).not.toBe(null);
     });
+
+    it('shows the fallback when delay changes to undefined', async () => {
+      (useImageLoadingStatus as Mock).mockReturnValue('error');
+      let setDelay!: React.Dispatch<React.SetStateAction<number | undefined>>;
+
+      function Test() {
+        const [delay, setDelayState] = React.useState<number | undefined>(100);
+        setDelay = setDelayState;
+
+        return (
+          <Avatar.Root>
+            <Avatar.Image />
+            <Avatar.Fallback delay={delay}>AC</Avatar.Fallback>
+          </Avatar.Root>
+        );
+      }
+
+      await renderFakeTimers(<Test />);
+
+      expect(screen.queryByText('AC')).toBe(null);
+
+      act(() => {
+        setDelay(undefined);
+      });
+
+      expect(screen.queryByText('AC')).not.toBe(null);
+    });
   });
 
   it.skipIf(!isJSDOM)(

packages/react/src/avatar/fallback/AvatarFallback.tsx

@@ -20,11 +20,12 @@ export const AvatarFallback = React.forwardRef(function AvatarFallback(
   const { className, render, delay, style, ...elementProps } = componentProps;
 
   const { imageLoadingStatus } = useAvatarRootContext();
-  const [delayPassed, setDelayPassed] = React.useState(delay === undefined);
+  const [delayPassed, setDelayPassed] = React.useState(false);
   const timeout = useTimeout();
 
   React.useEffect(() => {
     if (delay !== undefined) {
+      setDelayPassed(false);
       timeout.start(delay, () => setDelayPassed(true));
     }
     return timeout.clear;
@@ -39,7 +40,7 @@ export const AvatarFallback = React.forwardRef(function AvatarFallback(
     ref: forwardedRef,
     props: elementProps,
     stateAttributesMapping: avatarStateAttributesMapping,
-    enabled: imageLoadingStatus !== 'loaded' && delayPassed,
+    enabled: imageLoadingStatus !== 'loaded' && (delay === undefined || delayPassed),
   });
 
   return element;