I have a form which is triggering a server action on submit, the on submit handler is as follows:

What I've done:

const [submitState, submitAction, isSubmitPending] = useActionState(
  submitEvent,
  null,
);

const onSubmit = () => {
  startTransition(() => {
    submitAction();

    if (submitState?.error) {
      toast("We had trouble submitting your event, please try again.");
    }
  });
};

The server action then submits the form and does a few other server side operations before re-validating the "/event" route and redirecting to it:

export async function submitEvent(): Promise<ActionResponse> {
  const draftResponse = await getFormWizardDraftData();
  if (!draftResponse.success) return { error: draftResponse.error };
  if (!draftResponse.data) return { error: "No draft data found to submit" };

  const submitResponse = await submitNewEventData(draftResponse.data.form_data);
  if (!submitResponse.success) return { error: submitResponse.error };

  await markFormWizardDraftCompleteByDraftId(draftResponse.data.id);

  revalidatePath("/event");
  return redirect("/event");
}

What I'm trying to do:
The "/event" route displays events with RSCs and I'd like for the latest event that was just created to be present when the user is redirected to that page after submitting the event. Initially I used the client side router but found on production builds that the new event would not be present without refreshing, I assume this is because the client side redirect occurs before the server is able to invalidate the cache? Either way, calling redirect in the server action successfully displays the latest event however the browser will maintain it's scroll position and not scroll to the top of the page when navigated.

What I've tried:
- Tried using the client side router, cache was still stale.
- Checked Docs
- Checked Github issues
- Checked other forum posts, found a similar one from 2 years ago that was unanswered.
-Both redirect types