render empty home timetable shell

Author: ff1451

src/components/IndexComponents/IndexTimetable/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import Link from 'next/link';
+import { isValidTimetableFrameId } from 'api/timetable/queries';
 import ErrorBoundary from 'components/boundary/ErrorBoundary';
 import Timetable from 'components/TimetablePage/components/Timetable';
 import useSemesterOptionList from 'components/TimetablePage/hooks/useSemesterOptionList';
@@ -19,34 +20,34 @@ export default function IndexTimeTable() {
   const token = useTokenState();
   const { data: timetableFrameList } = useTimetableFrameList(token, semester);
 
-  const currentFrameId = timetableFrameList?.find((frame) => frame.is_main)?.id ?? 0;
+  const currentFrameId = timetableFrameList?.find((frame) => frame.is_main)?.id;
+  const hasValidCurrentFrameId = isValidTimetableFrameId(currentFrameId);
   const isClient = useMount();
 
   useEffect(() => {
     if (semesterOptionList.length > 0) updateSemester(semesterOptionList[0].value);
   }, [semesterOptionList, updateSemester]);
 
-  const renderTimetable = (
+  const renderPlaceholder = (
     <Timetable
-      timetableFrameId={currentFrameId}
+      timetableFrameId={0}
       columnWidth={44}
       firstColumnWidth={29}
       rowHeight={17.3}
       totalHeight={369}
     />
   );
 
-  const renderPlaceholder = (
-    <div
-      aria-hidden
-      style={{
-        height: 369,
-        width: '100%',
-        borderRadius: 12,
-        backgroundColor: '#f7f8fa',
-        border: '1px solid #e4e8ee',
-      }}
+  const renderTimetable = hasValidCurrentFrameId ? (
+    <Timetable
+      timetableFrameId={currentFrameId}
+      columnWidth={44}
+      firstColumnWidth={29}
+      rowHeight={17.3}
+      totalHeight={369}
     />
+  ) : (
+    renderPlaceholder
   );
 
   return (