diff --git a/apps/dashboard/src/components/layouts/dashboard-layout.tsx b/apps/dashboard/src/components/layouts/dashboard-layout.tsx index 06f1456..ff5be16 100644 --- a/apps/dashboard/src/components/layouts/dashboard-layout.tsx +++ b/apps/dashboard/src/components/layouts/dashboard-layout.tsx @@ -1,6 +1,5 @@ import { useQuery } from "@tanstack/react-query"; import { getRouteApi, Outlet } from "@tanstack/react-router"; -import { useEffect, useState } from "react"; import { githubMyIssuesQueryOptions, githubMyPullsQueryOptions, @@ -14,17 +13,6 @@ export function DashboardLayout() { const { user } = routeApi.useRouteContext(); const scope = { userId: user.id }; const hasMounted = useHasMounted(); - const [isContentVisible, setIsContentVisible] = useState(false); - - useEffect(() => { - const frameId = window.requestAnimationFrame(() => { - setIsContentVisible(true); - }); - - return () => { - window.cancelAnimationFrame(frameId); - }; - }, []); const pullsQuery = useQuery({ ...githubMyPullsQueryOptions(scope), @@ -61,11 +49,7 @@ export function DashboardLayout() { />
-
+
diff --git a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx index 22f47f4..6da67d4 100644 --- a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx +++ b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx @@ -25,6 +25,7 @@ import { Link, useRouter } from "@tanstack/react-router"; import { useTheme } from "next-themes"; import { useCallback, useEffect, useRef, useState } from "react"; import { signOutToLogin } from "#/lib/auth-actions"; +import { preloadRouteOnce } from "#/lib/route-preload"; import { removeTab, type Tab, useTabs } from "#/lib/tab-store"; interface DashboardTopbarProps { @@ -59,6 +60,8 @@ const tabIconMap = { issue: IssuesIcon, } as const; +const primaryNavRoutes = ["/", "/pulls", "/issues", "/reviews"] as const; + export function DashboardTopbar({ user, tabsReady, @@ -124,8 +127,24 @@ export function DashboardTopbar({ }, ]; + useEffect(() => { + if (!tabsReady) return; + + void Promise.allSettled( + primaryNavRoutes.map((to) => router.preloadRoute({ to })), + ); + }, [router, tabsReady]); + + useEffect(() => { + if (!tabsReady || openTabs.length === 0) return; + + void Promise.allSettled( + openTabs.map((tab) => preloadRouteOnce(router, tab.url)), + ); + }, [router, tabsReady, openTabs]); + return ( -
- {openTabs.length > 0 && ( -
-
-
-
-
- {/* biome-ignore lint/a11y/noStaticElementInteractions: scroll container needs onScroll for gradient visibility */} -
- {openTabs.map((tab) => { - const Icon = tabIconMap[tab.type]; - return ( - { - const isActive = - router.state.location.pathname === tab.url; - removeTab(id); - if (isActive) { - void router.navigate({ to: "/" }); - } - }} - /> - ); - })} +
+ {openTabs.length > 0 && ( +
+
+
+
+
+ {/* biome-ignore lint/a11y/noStaticElementInteractions: scroll container needs onScroll for gradient visibility */} +
+ {openTabs.map((tab) => { + const Icon = tabIconMap[tab.type]; + return ( + { + const isActive = + router.state.location.pathname === tab.url; + removeTab(id); + if (isActive) { + void router.navigate({ to: "/" }); + } + }} + /> + ); + })} +
-
- )} + )} +
-
+