Merge pull request #1262 from mykonos-ibiza/fix-slow-navigation

fix: unnecessary prefetches and unnecessary RSCs

Author: escapade-mckv

frontend/src/app/(dashboard)/layout.tsx

@@ -1,24 +1,11 @@
-import { maintenanceNoticeFlag } from '@/lib/edge-flags';
 import DashboardLayoutContent from '@/components/dashboard/layout-content';
-import { cookies } from 'next/headers';
 
 interface DashboardLayoutProps {
   children: React.ReactNode;
 }
 
-const getMaintenanceNotice = async () => {
-  const maintenanceNotice = await maintenanceNoticeFlag();
-  return maintenanceNotice;
-};
-
-export default async function DashboardLayout({
+export default function DashboardLayout({
   children,
 }: DashboardLayoutProps) {
-  await cookies();
-  const maintenanceNotice = await getMaintenanceNotice();
-  return (
-    <DashboardLayoutContent maintenanceNotice={maintenanceNotice}>
-      {children}
-    </DashboardLayoutContent>
-  );
+  return <DashboardLayoutContent>{children}</DashboardLayoutContent>;
 }

frontend/src/app/api/edge-flags/route.ts

@@ -0,0 +1,7 @@
+import { maintenanceNoticeFlag } from '@/lib/edge-flags';
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  const maintenanceNotice = await maintenanceNoticeFlag();
+  return NextResponse.json(maintenanceNotice);
+}

frontend/src/components/dashboard/layout-content.tsx

@@ -13,26 +13,29 @@ import { useApiHealth } from '@/hooks/react-query';
 import { MaintenancePage } from '@/components/maintenance/maintenance-page';
 import { DeleteOperationProvider } from '@/contexts/DeleteOperationContext';
 import { StatusOverlay } from '@/components/ui/status-overlay';
-import type { IMaintenanceNotice } from '@/lib/edge-flags';
 import { MaintenanceNotice } from './maintenance-notice';
 import { MaintenanceBanner } from './maintenance-banner';
+import { useMaintenanceNoticeQuery } from '@/hooks/react-query/edge-flags';
 
 interface DashboardLayoutContentProps {
   children: React.ReactNode;
-  maintenanceNotice: IMaintenanceNotice;
 }
 
 export default function DashboardLayoutContent({
   children,
-  maintenanceNotice,
 }: DashboardLayoutContentProps) {
+  const maintenanceNoticeQuery = useMaintenanceNoticeQuery();
   // const [showPricingAlert, setShowPricingAlert] = useState(false)
   const [showMaintenanceAlert, setShowMaintenanceAlert] = useState(false);
   const { data: accounts } = useAccounts();
   const personalAccount = accounts?.find((account) => account.personal_account);
   const { user, isLoading } = useAuth();
   const router = useRouter();
-  const { data: healthData, isLoading: isCheckingHealth, error: healthError } = useApiHealth();
+  const {
+    data: healthData,
+    isLoading: isCheckingHealth,
+    error: healthError,
+  } = useApiHealth();
 
   useEffect(() => {
     // setShowPricingAlert(false)
@@ -49,10 +52,10 @@ export default function DashboardLayoutContent({
     }
   }, [user, isLoading, router]);
 
-  if (maintenanceNotice.enabled) {
+  if (maintenanceNoticeQuery.data?.enabled) {
     const now = new Date();
-    const startTime = maintenanceNotice.startTime;
-    const endTime = maintenanceNotice.endTime;
+    const startTime = new Date(maintenanceNoticeQuery.data.startTime);
+    const endTime = new Date(maintenanceNoticeQuery.data.endTime);
 
     if (now > startTime) {
       return (
@@ -66,11 +69,11 @@ export default function DashboardLayoutContent({
   }
 
   let mantenanceBanner: React.ReactNode | null = null;
-  if (maintenanceNotice.enabled) {
+  if (maintenanceNoticeQuery.data?.enabled) {
     mantenanceBanner = (
       <MaintenanceBanner
-        startTime={maintenanceNotice.startTime.toISOString()}
-        endTime={maintenanceNotice.endTime.toISOString()}
+        startTime={maintenanceNoticeQuery.data.startTime}
+        endTime={maintenanceNoticeQuery.data.endTime}
       />
     );
   }

frontend/src/components/sidebar/nav-agents.tsx

@@ -428,6 +428,7 @@ export function NavAgents() {
                             onClick={(e) =>
                               handleThreadClick(e, thread.threadId, thread.url)
                             }
+                            prefetch={false}
                             className="flex items-center flex-1 min-w-0"
                           >
                             {isThreadLoading ? (

frontend/src/components/sidebar/search-search.tsx

@@ -236,6 +236,7 @@ export function SidebarSearch() {
                     onClick={(e) =>
                       handleThreadClick(e, thread.threadId, thread.url)
                     }
+                    prefetch={false}
                     className="flex items-center justify-between w-full"
                   >
                     <div className="flex items-center">

frontend/src/hooks/react-query/edge-flags/index.ts

@@ -0,0 +1,24 @@
+'use client';
+
+import { createQueryHook, createQueryKeys } from '@/hooks/use-query';
+import { IMaintenanceNotice } from '@/lib/edge-flags';
+
+const maintenanceNoticeKeysBase = ['maintenance-notice'] as const;
+
+export const maintenanceNoticeKeys = createQueryKeys({
+  all: maintenanceNoticeKeysBase,
+});
+
+export const useMaintenanceNoticeQuery = createQueryHook(
+  maintenanceNoticeKeys.all,
+  async (): Promise<IMaintenanceNotice> => {
+    const response = await fetch('/api/edge-flags');
+    return response.json();
+  },
+  {
+    staleTime: 30 * 1000,
+    refetchInterval: 60 * 1000,
+    refetchOnWindowFocus: true,
+    retry: 3,
+  },
+);

frontend/src/lib/edge-flags.ts

@@ -4,8 +4,8 @@ import { getAll } from '@vercel/edge-config';
 export type IMaintenanceNotice =
   | {
       enabled: true;
-      startTime: Date;
-      endTime: Date;
+      startTime: string; // Date
+      endTime: string; // Date
     }
   | {
       enabled: false;
@@ -18,7 +18,6 @@ export const maintenanceNoticeFlag = flag({
   async decide() {
     try {
       if (!process.env.EDGE_CONFIG) {
-        console.warn('Edge config is not set');
         return { enabled: false } as const;
       }
 
@@ -43,8 +42,8 @@ export const maintenanceNoticeFlag = flag({
 
       return {
         enabled: true,
-        startTime,
-        endTime,
+        startTime: startTime.toISOString(),
+        endTime: endTime.toISOString(),
       } as const;
     } catch (cause) {
       console.error(