duration- not being respected

[tomelliot]

I'm just getting started with headlessUI and it seems like a great addition to the toolbelt. Apologies if my ask is answered elsewhere, I've looked at the docs and searched here but haven't got any leads.

I'm seeing inconsistent behaviour in development that I can't explain. I'm building a NextJS13 project. I am using the below component to inform the user of how an async request is going.

I'm seeing the duration-2000 not being respected often - it will work sometimes, but then when the page hot reloads the duration seems to revert to a shorter default time and then never goes back to the 2000ms I'm expecting.

I've tried the page in Brave and Firefox but it's the same.

Is there something I'm missing about how to set the duration, or how to configure headlessUI?

Thanks,
Tom

const StatusIcon = ({ status }: { status: EDbRequestState }) => {
  switch (status) {
    case EDbRequestState.None:
      return <div className={clsx("h-8 w-8")} />;
    case EDbRequestState.Waiting:
      return (
        <ArrowPathIcon
          className={clsx("h-8 w-8 text-slate-500 animate-spin")}
          aria-hidden="true"
        />
      );
    case EDbRequestState.Success:
      return (
        <Transition
          appear={true}
          show={status == EDbRequestState.Success}
          enter="transition-opacity ease-in-out duration-2000"
          enterFrom="opacity-100"
          enterTo="opacity-0"
        >
          <CheckCircleIcon
            className={clsx("flex items-center h-8 w-8 text-green-400")}
            aria-hidden="true"
          />
        </Transition>
      );

    case EDbRequestState.Failure:
      return (
        <ExclamationTriangleIcon
          className={clsx("h-8 w-8 text-red-400")}
          aria-hidden="true"
          title="Failed to save, please try again"
        />
      );
  }
};

[tomelliot]

On further investigation: It seems like it works up to a maximum of 1000ms. Is that correct?