From 9e45d2a2a9de3489e4e129dcbe94e5897a2a3149 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Fri, 18 Jul 2025 16:39:50 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Improve=20page=20tabs=20im?=
 =?UTF-8?q?plementation=20(#1841)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/components/page-tabs.tsx | 27 +++++++++--------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/app/components/page-tabs.tsx b/apps/web/src/app/components/page-tabs.tsx
index 90b42cb90..0b49dbd4d 100644
--- a/apps/web/src/app/components/page-tabs.tsx
+++ b/apps/web/src/app/components/page-tabs.tsx
@@ -1,5 +1,4 @@
 "use client";
-import { cn } from "@rallly/ui";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@rallly/ui/page-tabs";
 import { useRouter, useSearchParams } from "next/navigation";
 import React from "react";
@@ -15,34 +14,22 @@ export function PageTabs({
 }) {
   const searchParams = useSearchParams();
   const router = useRouter();
-  const [isPending, startTransition] = React.useTransition();
   const [tab, setTab] = React.useState(value);
   const handleTabChange = React.useCallback(
     (value: string) => {
       const params = new URLSearchParams(searchParams);
       params.set(name, value);
-
       params.delete("page");
-
       setTab(value);
 
-      startTransition(() => {
-        const newUrl = `?${params.toString()}`;
-        router.replace(newUrl, { scroll: false });
-      });
+      const newUrl = `?${params.toString()}`;
+      router.replace(newUrl, { scroll: false });
     },
     [router, searchParams, name],
   );
 
   return (
-    <Tabs
-      className={cn(
-        "transition-opacity",
-        isPending ? "pointer-events-none opacity-50 delay-200" : "",
-      )}
-      value={tab}
-      onValueChange={handleTabChange}
-    >
+    <Tabs className="group" value={tab} onValueChange={handleTabChange}>
       {children}
     </Tabs>
   );
@@ -58,7 +45,13 @@ export function PageTabsContent({
   children: React.ReactNode;
 }) {
   return (
-    <TabsContent tabIndex={-1} value={value}>
+    <TabsContent
+      tabIndex={-1}
+      forceMount={true}
+      key={value}
+      className="transition-opacity data-[state=inactive]:pointer-events-none data-[state=inactive]:opacity-50 data-[state=inactive]:delay-200"
+      value={value}
+    >
       {children}
     </TabsContent>
   );