I'm intercepting a route and render an image in a Radix Dialog. In this Dialog I have next/previous buttons to navigate to other images. These buttons call router.push with another image's route.

The problem is that when this route is pushed, the page is remounted, and the Dialog animates close & open causing a weird flickering. (See attached video)

Is there anyway I can restructure my approach to avoid this flickering?


My Page:

import { HydrateClient, api } from '~/trpc/server';
import ShowImageDialog from './show-image-dialog';

export default function Page(props: { params: { id: string } }) {
    void api.asset.get.prefetch({ id: props.params.id });
    return (
        <HydrateClient>
            <ShowImageDialog id={props.params.id} />
        </HydrateClient>
    );
}

My dialog component:

export default function ShowImageDialog(props: { id: ID }) {
  const [asset] = api.asset.get.useSuspenseQuery({ id: props.id });

  return (
    <Dialog.Root defaultOpen>
      <Dialog.Content>
        <Image src={`https://${process.env.NEXT_PUBLIC_STORAGE_DOMAIN}/assets/${asset.id}`} />

        <IconButton onClick={handleNavigateBack}>
          <ArrowLeftIcon />
        </IconButton>
        <IconButton onClick={handleNavigateNext}>
          <ArrowRightIcon />
        </IconButton>
      </Dialog.Content>
    </Dialog.Root>
  );
}