Improve page load speed for <project>/connect tab by skipping a redirect

Author: MananTank

apps/dashboard/src/@/components/ui/tabs.tsx

@@ -199,6 +199,7 @@ export function TabPathLinks(props: {
     path: string;
     exactMatch?: boolean;
     isDisabled?: boolean;
+    isActive?: (pathname: string) => boolean;
   }[];
   className?: string;
   tabContainerClassName?: string;
@@ -212,9 +213,11 @@ export function TabPathLinks(props: {
       links={links.map((l) => ({
         name: l.name,
         href: l.path,
-        isActive: l.exactMatch
-          ? pathname === l.path
-          : pathname.startsWith(l.path),
+        isActive: l.isActive
+          ? l.isActive(pathname)
+          : l.exactMatch
+            ? pathname === l.path
+            : pathname.startsWith(l.path),
         isDisabled: l.isDisabled,
       }))}
     />

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/page.tsx

@@ -1,5 +1,4 @@
-import { getProject } from "@/api/projects";
-import { notFound, redirect } from "next/navigation";
+import { redirect } from "next/navigation";
 
 export default async function Page(props: {
   params: Promise<{
@@ -8,11 +7,6 @@ export default async function Page(props: {
   }>;
 }) {
   const params = await props.params;
-  const project = await getProject(params.team_slug, params.project_slug);
-
-  if (!project) {
-    notFound();
-  }
 
   redirect(
     `/team/${params.team_slug}/${params.project_slug}/connect/in-app-wallets`,

apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx

@@ -1,9 +1,9 @@
 import { getProjects } from "@/api/projects";
 import { getTeamNebulaWaitList, getTeams } from "@/api/team";
-import { TabPathLinks } from "@/components/ui/tabs";
 import { notFound, redirect } from "next/navigation";
 import { getValidAccount } from "../../../account/settings/getAccount";
 import { TeamHeaderLoggedIn } from "../../components/TeamHeader/team-header-logged-in.client";
+import { ProjectTabs } from "./tabs";
 
 export default async function TeamLayout(props: {
   children: React.ReactNode;
@@ -55,39 +55,9 @@ export default async function TeamLayout(props: {
           teamsAndProjects={teamsAndProjects}
           account={account}
         />
-        <TabPathLinks
-          tabContainerClassName="px-4 lg:px-6"
-          links={[
-            {
-              path: `/team/${params.team_slug}/${params.project_slug}`,
-              exactMatch: true,
-              name: "Overview",
-            },
-            {
-              path: `/team/${params.team_slug}/${params.project_slug}/connect`,
-              name: "Connect",
-            },
-            {
-              path: `/team/${params.team_slug}/${params.project_slug}/contracts`,
-              name: "Contracts",
-            },
-            ...(isOnNebulaWaitList
-              ? [
-                  {
-                    path: `/team/${params.team_slug}/${params.project_slug}/nebula`,
-                    name: "Nebula",
-                  },
-                ]
-              : []),
-            {
-              path: `/team/${params.team_slug}/${params.project_slug}/insight`,
-              name: "Insight",
-            },
-            {
-              path: `/team/${params.team_slug}/${params.project_slug}/settings`,
-              name: "Settings",
-            },
-          ]}
+        <ProjectTabs
+          layoutPath={`/team/${params.team_slug}/${params.project_slug}`}
+          isOnNebulaWaitList={!!isOnNebulaWaitList}
         />
       </div>
       <div className="flex grow flex-col">{props.children}</div>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/tabs.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { TabPathLinks } from "@/components/ui/tabs";
+
+export function ProjectTabs(props: {
+  layoutPath: string;
+  isOnNebulaWaitList: boolean;
+}) {
+  const { layoutPath, isOnNebulaWaitList } = props;
+
+  return (
+    <TabPathLinks
+      tabContainerClassName="px-4 lg:px-6"
+      links={[
+        {
+          path: layoutPath,
+          exactMatch: true,
+          name: "Overview",
+        },
+        {
+          // directly link to /in-app-wallets to skip 1 redirect and use `isActive` for checking if the tab is active or not
+          path: `${layoutPath}/connect/in-app-wallets`,
+          name: "Connect",
+          isActive: (path) => path.startsWith(`${layoutPath}/connect`),
+        },
+        {
+          path: `${layoutPath}/contracts`,
+          name: "Contracts",
+        },
+        ...(isOnNebulaWaitList
+          ? [
+              {
+                path: `${layoutPath}/nebula`,
+                name: "Nebula",
+              },
+            ]
+          : []),
+        {
+          path: `${layoutPath}/insight`,
+          name: "Insight",
+        },
+        {
+          path: `${layoutPath}/settings`,
+          name: "Settings",
+        },
+      ]}
+    />
+  );
+}