src/pages/timetable/MyClassesPage.tsx

@@ -3,19 +3,9 @@ import { Link } from 'react-router-dom';
 import { AccessTime, KeyboardArrowRight, MenuBook, People, School } from '@mui/icons-material';
 import useTimetableStore from '../../stores/timetableStore';
 import { useUser } from '../../contexts/UserContext';
-import { useNeoInstitute } from '../../contexts/NeoInstituteContext';
-import { CircularProgress } from '@mui/material';
-import { logger } from '../../debugConfig';
-
-const MyClassesSkeleton = () => (
-  <div className="flex justify-center items-center h-64">
-    <CircularProgress />
-  </div>
-);
 
 const MyClassesPage: React.FC = () => {
   const { profile } = useUser();
-  const { selectedInstituteId } = useNeoInstitute();
   const {
     myClasses,
     classesLoading: myClassesLoading,
@@ -24,16 +14,8 @@ const MyClassesPage: React.FC = () => {
   } = useTimetableStore();
 
   useEffect(() => {
-    fetchMyClasses().catch((error) =>
+    fetchMyClasses();
-      logger.warn('my-classes', 'Fetch my classes failed', {
+  }, [fetchMyClasses]);
-        message: error instanceof Error ? error.message : String(error),
-      })
-    );
-  }, [fetchMyClasses, selectedInstituteId]);
-
-  if (myClassesLoading) {
-    return <MyClassesSkeleton />;
-  }
 
   const getRoleLabel = (role: string) => {
     switch (role) {
@@ -54,6 +36,14 @@ const MyClassesPage: React.FC = () => {
     }
   };
 
+  if (myClassesLoading) {
+    return (
+      <div className="flex justify-center items-center h-64">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+      </div>
+    );
+  }
+
   if (myClassesError) {
     return (
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">