Hi, i have a big pet project. I'm created an mtg card recognizer client and categorizing app. I. like to migrate the project into the nextjs but i'm hitting walls constantly with this app router. Most of the part of the app is on client so the rsc in not necessary but sometimes is felt so natural with solid start. But with next i'm basically struggle to create a reload after a mutation.

My start ocr button is like this:

const UploadedImage = async ({ image }: { image: ImageType }) => {
  const lines = await trpc.getImageLines({ id: image.id });

  return (
    <div className="card card-compact bg-neutral m-4 relative">
      ...
      <div className="card-body">
        <div className="flex flex-row justify-center gap-2">
          <OcrSubmitBtn imageId={image.id} />
        </div>
        <RecLines imageId={image.id} lines={lines} />
      </div>
    </div>
  );
};

The server action looks like this:

"use server";

import { trpc } from "@/trcp/trpcServer";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";

export default async function ocr(id: number) {
  await trpc.requestImageOcr({ id });
  revalidatePath("/digitalize");
  redirect("/digitalize");
}

And the caller:

"use client";

import { useTransition } from "react";
import startOcr from "../_actions/startOcr";

export default function OcrSubmitBtn({ imageId }: { imageId: number }) {
  const [pending, startTransition] = useTransition();

  const handleOcr = () => {
    startTransition(async () => {
      await startOcr(imageId);
    });
  };

  return (
    <button disabled={pending} onClick={handleOcr} className="btn btn-outline">
      ...
    </button>
  );
}

I'm using startTransition becuase even the documentation said i can use useFormState but i got a big error form webpack. How can i reload my component after finished the ocr process?