Am I using Avatar wrong?

[samuelgozi]

Hi, I love the idea behind the project, so I started using it on a new project.
The first component I am trying to use is avatar (I wanted to start with something small), and I am having troubles making it work.

It seems like the props are not updating.
The state of data-part="image" remain hidden, and Im 100% sure the image is reachable, and the event onLoadingStatusChange is fired correctly.

Below is my code. Am I doing something incorrectly?

import { createUniqueId } from 'solid-js';
import * as avatar from '@zag-js/avatar';
import { useMachine, normalizeProps } from '@zag-js/solid';
import styles from './Avatar.module.css';

interface AvatarProps {
  src?: string;
  name: string;
}

export function Avatar(props: AvatarProps) {
  const [state, send] = useMachine(avatar.machine({ id: createUniqueId() }));
  const api = avatar.connect(state, send, normalizeProps);

  function initials() {
    return (
      props.name
        ?.split(' ')
        .map((word) => word[0])
        .join('') ?? ''
    );
  }

  return (
    <div class={styles.Avatar} {...api.rootProps}>
      <span {...api.fallbackProps}>{initials()}</span>
      <img alt={props.name} src={props.src} {...api.imageProps} />
    </div>
  );
}

[samuelgozi]

I see the problem now.
The documentation doesn't use solid's derivedSignal or useMemo, so the api value doesn't trigger a rerender in solidjs.
So the solution is to replace:

const api = avatar.connect(state, send, normalizeProps)

with

const api = createMemo(() => avatar.connect(state, send, normalizeProps));

[cschroeter]

@samuelgozi

If you're interested in a more ready-to-use solution checkout https://ark-ui.com/docs/components/avatar