fixing yarn build

app/gallery/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useSession } from 'next-auth/react';
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, Suspense } from 'react';
 import Header from '@/components/common/Header';
 import ImageWithFallback from '@/components/common/ImageWithFallback';
 import Icon from '@hackclub/icons';
@@ -61,7 +61,7 @@ const isValidImageUrl = (url: string): boolean => {
   return imageExtensions.some(ext => lowerUrl.includes(ext));
 };
 
-export default function Gallery() {
+function GalleryInner() {
   const { data: session, status } = useSession();
   const { isIslandMode, isLoading: isExperienceModeLoading } = useExperienceMode();
   const [projects, setProjects] = useState<Project[]>([]);
@@ -649,4 +649,12 @@ export default function Gallery() {
       </main>
     </div>
   );
-} 
+}
+
+export default function Gallery() {
+  return (
+    <Suspense fallback={<div className="min-h-screen bg-gray-50 flex items-center justify-center"><p className="text-gray-600">Loading...</p></div>}>
+      <GalleryInner />
+    </Suspense>
+  );
+}

app/map/layout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ReactNode } from 'react';
+import { ReactNode, Suspense } from 'react';
 import { SessionProvider } from 'next-auth/react';
 import Header from "@/components/common/Header";
 import { useSession } from "next-auth/react";
@@ -35,10 +35,12 @@ function SessionWrapper({ children }: { children: ReactNode }) {
 
   return (
     <div className="min-h-screen flex flex-col">
-      <Header
-        session={session}
-        status={status}
-      />
+      <Suspense fallback={<div />}> 
+        <Header
+          session={session}
+          status={status}
+        />
+      </Suspense>
       <main className="flex-grow container mx-auto p-6">
         <div className="min-h-screen flex items-center justify-center">
           <div className="text-center max-w-md p-8 bg-white rounded-lg shadow-md">

app/map/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {useEffect, useState} from 'react';
+import {useEffect, useState, Suspense} from 'react';
 import {useSession} from 'next-auth/react';
 import {useRouter} from 'next/navigation';
 import Icon from '@hackclub/icons';
@@ -30,7 +30,7 @@ async function fetchFlights() {
   return res.json();
 }
 
-export default function MapPage() {
+function MapInner() {
   const {data: session, status} = useSession();
   const [flights, setFlights] = useState<FlightData[]>([]);
   const [error, setError] = useState<string | null>(null);
@@ -122,4 +122,12 @@ export default function MapPage() {
       </div>
     </div>
   );
+}
+
+export default function MapPage() {
+  return (
+    <Suspense fallback={<div className="min-h-screen bg-gray-50 flex items-center justify-center"><p className="text-gray-600">Loading...</p></div>}>
+      <MapInner />
+    </Suspense>
+  );
 }