Revert "Feature/quiz progress"

app/classrooms/[id]/page.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { Loader2 } from 'lucide-react'
 import { useAuth } from '@/contexts/AuthContext'
 import { SessionManagement } from '@/components/session-views/session-management'
 
@@ -14,7 +14,13 @@ const ClassroomLessonPage: React.FC<PageProps> = ({ params }) => {
 
   const classroomId = params.id
 
-   if (loading) return <LoadingSpinner />
+   if (loading) {
+     return (
+       <div className='flex items-center justify-center min-h-screen'>
+         <Loader2 className='h-8 w-8 animate-spin' />
+       </div>
+     )
+   }
 
    if (!user) {
      return (

app/classrooms/[id]/session/[sid]/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 // import { useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { Loader2 } from 'lucide-react'
 import { useAuth } from '@/contexts/AuthContext'
 import { StudentSessionView } from '@/components/session-views/student-session-view'
 import { TeacherSessionView } from '@/components/session-views/teacher-session-view'
@@ -21,7 +21,14 @@ const SessionPage: React.FC<PageProps> = ({ params }) => {
   const classroomId = params.id
   const sessionId = params.sid
 
-  if (loading) return <LoadingSpinner />
+  // Show loading state while fetching data
+  if (loading) {
+    return (
+      <div className='flex items-center justify-center min-h-screen'>
+        <Loader2 className='h-8 w-8 animate-spin' />
+      </div>
+    )
+  }
 
   if (!user) {
     return (

app/classrooms/page.tsx

@@ -2,15 +2,21 @@
 import { useAuth } from '@/contexts/AuthContext'
 import { TeacherClassroomsView } from '@/components/classrooms/TeacherClassroomsView'
 import { StudentClassroomsView } from '@/components/classrooms/StudentClassroomsView'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { Loader2 } from 'lucide-react'
 
 const ClassroomPage = () => {
   const { user, loading } = useAuth()
 
   // to do: go home
   // const router = useRouter()
 
-  if (loading) return <LoadingSpinner />
+  if (loading) {
+    return (
+      <div className='flex items-center justify-center min-h-screen'>
+        <Loader2 className='h-8 w-8 animate-spin' />
+      </div>
+    )
+  }
 
   return (
     <>

app/dashboard/page.tsx

@@ -2,13 +2,22 @@
 import { TeacherDashboard } from '@/components//dashboard/TeacherDashboard'
 import { StudentDashboard } from '@/components/dashboard/StudentDashboard'
 import { useAuth } from '@/contexts/AuthContext'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { Loader2 } from 'lucide-react'
 import ProtectedRoute from '@/components/ProtectedRoute'
 
 export default function DashboardPage() {
   const { user, loading, signOut } = useAuth()
 
-  if (loading) return <LoadingSpinner />
+  if (loading) {
+    return (
+      <div className='min-h-screen flex items-center justify-center'>
+        <div className='text-center space-y-4'>
+          <Loader2 className='h-8 w-8 animate-spin mx-auto text-primary' />
+          <p className='text-lg text-muted-foreground'>Loading...</p>
+        </div>
+      </div>
+    )
+  }
 
   return (
     <ProtectedRoute>

app/page.tsx

@@ -13,6 +13,7 @@ import {
 import { useRouter } from 'next/navigation'
 import { useAuth } from '@/contexts/AuthContext'
 import {
+  Loader2,
   PlayCircle,
   BookOpen,
   Users2,
@@ -37,8 +38,6 @@ import { FeatureItem } from '@/components/feature-item'
 import { HighlightedText } from '@/components/ui/highlighted-text'
 import { StatsCard } from '@/components/stats-card'
 import { Section } from '@/components/ui/section'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
-
 
 
 export default function HomePage() {
@@ -49,7 +48,13 @@ export default function HomePage() {
   const theme = useTheme()
   const shadowColor = theme.resolvedTheme === 'dark' ? 'white' : 'black'
 
-  if (loading) return <LoadingSpinner />
+  if (loading) {
+    return (
+      <div className='min-h-screen flex items-center justify-center'>
+        <Loader2 className='h-8 w-8 animate-spin' />
+      </div>
+    )
+  }
 
   return (
     <div className='xl:px-24 lg:px-16 md:px-8 sm:px-8 px-8'>

app/quizzes/[id]/page.tsx

@@ -4,7 +4,7 @@ import { useQuiz } from '@/hooks/quiz/useQuizzes'
 import QuizComponent from '@/components/quiz/quiz-component'
 import { notFound } from 'next/navigation'
 import { useEffect } from 'react'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { Loader2 } from 'lucide-react'
 
 export default function QuizPage({ params }: { params: { id: string } }) {
   const { quiz, isLoading, error } = useQuiz(params.id)
@@ -16,7 +16,14 @@ export default function QuizPage({ params }: { params: { id: string } }) {
   }, [error])
 
   if (isLoading) {
-    return <LoadingSpinner />
+    return (
+      <main className='container mx-auto py-8 px-4'>
+        <div className='max-w-4xl mx-auto text-center py-12'>
+          <Loader2 className='h-8 w-8 animate-spin' />
+          <p className='mt-4'>Loading quiz...</p>
+        </div>
+      </main>
+    )
   }
 
   if (!quiz) {

app/quizzes/page.tsx

@@ -1,13 +1,21 @@
 'use client'
 import QuizCard from '@/components/quiz/quiz-card'
 import { useQuizzes } from '@/hooks/quiz/useQuizzes'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
-
+import { Loader2 } from 'lucide-react'
 
 export default function QuizzesPage() {
   const { quizzes, isLoading, error } = useQuizzes()
 
-  if (isLoading) return <LoadingSpinner />
+  if (isLoading) {
+    return (
+      <main className='container py-8 px-4'>
+        <div className='max-w-5xl mx-auto text-center py-12'>
+          <Loader2 className='h-8 w-8 animate-spin' />
+          <p className='mt-4'>Loading quizzes...</p>
+        </div>
+      </main>
+    )
+  }
 
   if (error) {
     return (

components/LoadingSpinner.tsx

@@ -4,7 +4,6 @@ export function LoadingSpinner() {
   return (
     <div className='flex items-center justify-center min-h-screen'>
       <Loader2 className='h-8 w-8 animate-spin' />
-      <p className='mt-4'>Loading...</p>
     </div>
   )
 }