add suspense around EventItem

src/app/student/events/_components/EventItem.tsx

@@ -15,7 +15,6 @@ export function EventItem({ event }: { event: Event }) {
 	const router = useRouter()
 	const searchParams = useSearchParams()
 	const [modalOpen, setModalOpen] = useState(false)
-	console.log("rendering", id, modalOpen, searchParams.get("id"))
 
 	useEffect(() => {
 		const queryId = searchParams.get("id")

src/app/student/events/_components/EventsTimeLine.tsx

@@ -1,16 +1,16 @@
 import { EventItem } from "@/app/student/events/_components/EventItem"
 import { Event } from "@/components/shared/hooks/api/useEvents"
+import { Suspense } from "react"
 
 export function EventsTimeline({ events }: { events: Event[] }) {
-	const renderEvent = events.map(event => (
-		<EventItem
-			key={event.id}
-			event={event}></EventItem>
-	))
-
 	return (
 		<div className="relative mt-10 border-s border-melon-700">
-			{renderEvent}
+			{events.map(event => (
+				// EventItem uses useSearchParams, so needs to have a Suspense boundary
+				<Suspense key={event.id}>
+					<EventItem event={event}></EventItem>
+				</Suspense>
+			))}
 		</div>
 	)
 }