fix: reload in next render after activating draft mode

components/composed/AccountDropdown/PreviewModeButton.tsx

@@ -1,29 +1,39 @@
 "use client";
 
-import { useTransition } from "react";
+import { useTransition, useEffect, useRef } from "react";
 import { useDropdownContext } from "@/components/atomic/BaseDropdown/BaseDropdown";
 import { useProgress } from "@/lib/vendor/react-transition-progress";
 import { Link } from "@/components/atomic";
 import { enterPreviewMode } from "./actions";
 
 export default function PreviewModeButton({ label }: { label: string }) {
   const dropdown = useDropdownContext();
-
   const startProgress = useProgress();
 
-  const [, startTransition] = useTransition();
+  const [isPending, startTransition] = useTransition();
+  const pendingRef = useRef(false);
 
   const handleClick = () => {
     dropdown?.hide();
 
     startTransition(async () => {
       startProgress();
       await enterPreviewMode();
-      // Hard reload rather than router.refresh() to recover from notFound()
-      window.location.reload();
     });
   };
 
+  useEffect(() => {
+    if (isPending && !pendingRef.current) {
+      pendingRef.current = true;
+      return;
+    }
+    if (!isPending && pendingRef.current) {
+      pendingRef.current = false;
+      window.location.reload();
+      return;
+    }
+  }, [isPending]);
+
   return (
     <Link as="button" type="button" onClick={handleClick}>
       {label}

components/composed/AccountDropdown/actions.ts

@@ -1,7 +1,6 @@
 "use server";
 
 import { draftMode } from "next/headers";
-import { revalidatePath } from "next/cache";
 import joinURL from "url-join";
 import {
   auth,
@@ -21,7 +20,6 @@ export async function signIn() {
 
 export async function enterPreviewMode() {
   (await draftMode()).enable();
-  revalidatePath("/", "layout");
 }
 
 export async function signOut() {