Lazy load VenueTimetableDynamic component in venue page (#337)

src/app/[lang]/(mods-pages)/(venues)/venues/@content/[locationId]/VenueTimetable.tsx

@@ -0,0 +1,21 @@
+'use client';
+import Timetable from '@/components/Timetable/Timetable';
+import { renderTimetableSlot } from '@/helpers/timetable_course';
+import { colorMapFromCourses, createTimetableFromCourses } from '@/helpers/timetable';
+import { MinimalCourse } from '@/types/courses';
+import { timetableColors } from '@/const/timetableColors';
+import useUserTimetable from '@/hooks/contexts/useUserTimetable';
+
+type VenueTimetableProps = {
+    courses: MinimalCourse[]
+}
+const VenueTimetable = ({ courses }: VenueTimetableProps) => {
+    const { timetableTheme } = useUserTimetable();
+    console.log(timetableTheme)
+    const colorMap = colorMapFromCourses(courses.map(i => i.raw_id), timetableColors[timetableTheme]);
+    const timetable = createTimetableFromCourses(courses as MinimalCourse[], colorMap);
+
+    return <Timetable timetableData={timetable} renderTimetableSlot={renderTimetableSlot} />
+}
+
+export default VenueTimetable;

src/app/[lang]/(mods-pages)/(venues)/venues/@content/[locationId]/page.tsx

@@ -1,13 +1,13 @@
 import supabase from '@/config/supabase'
-import {createTimetableFromCourses} from '@/helpers/timetable';
-import Timetable from '@/components/Timetable/Timetable';
 import {MinimalCourse} from '@/types/courses';
 import {ResolvingMetadata} from 'next';
 import { lastSemester } from '@/const/semester';
 import Link from 'next/link';
 import { ArrowLeft } from 'lucide-react';
-import { renderTimetableSlot } from '@/helpers/timetable_course';
 import { Button } from '@/components/ui/button';
+import dynamic from 'next/dynamic';
+
+const VenueTimetableDynamic = dynamic(() => import('@/app/[lang]/(mods-pages)/(venues)/venues/@content/[locationId]/VenueTimetable'), { ssr: false });
 
 type Props = {
     params: {
@@ -36,7 +36,6 @@ const MapPage = async ({
 }: Props) => {
     const venueId = decodeURI(params.locationId)
     const courses = await getCoursesWithVenue(venueId);
-    const timetable = createTimetableFromCourses(courses as MinimalCourse[]);
 
     return (
         <div className='flex flex-col w-full h-full'>
@@ -47,7 +46,7 @@ const MapPage = async ({
             </div>
             <div className='py-4 flex flex-col items-center space-y-2 px-2 md:px-6'>
                 <h2 className='font-semibold text-xl'>{venueId}</h2>
-                <Timetable timetableData={timetable} renderTimetableSlot={renderTimetableSlot}/>
+                <VenueTimetableDynamic courses={courses as MinimalCourse[]}/>
                 {/* <Suspense fallback={<h1>Map failed to load</h1>}>
                     <NTHUMap marker={[24.791513, 120.994123]}/>
                 </Suspense> */}