Merge pull request #5 from gmickel:improve-loading-screen

feat: Update Quiz component to use lazy loading and add LoadingScreen component

src/App.tsx

@@ -1,8 +1,13 @@
-import Quiz from '@/components/Quiz';
+import React, { Suspense } from 'react';
+import LoadingScreen from '@/components/LoadingScreen';
+
+const Quiz = React.lazy(() => import('@/components/Quiz'));
 
 function App() {
   return (
-    <Quiz />
+    <Suspense fallback={<LoadingScreen message="Initializing CodeQuest..." />}>
+      <Quiz />
+    </Suspense>
   );
 }
 

src/components/LoadingScreen.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Loader2 } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { config } from '@/config';
+
+interface LoadingScreenProps {
+  message: string;
+}
+
+const LoadingScreen: React.FC<LoadingScreenProps> = ({ message }) => {
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-100">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle className="text-2xl font-bold text-center">{config.title}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col items-center space-y-4">
+            <Loader2 className="h-8 w-8 animate-spin text-primary" />
+            <p className="text-center text-muted-foreground">{message}</p>
+            <Progress value={66} className="w-full" />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default LoadingScreen;

src/components/Quiz/index.tsx

@@ -1,10 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { AlertCircle, Brain, Github, Shield, Terminal, Volume2, VolumeX, Zap } from 'lucide-react';
-import GameOver from './GameOver.tsx';
-import Completion from './Completion.tsx';
-import Context from './Context.tsx';
-import Answers from './Answers.tsx';
-import Result from './Result.tsx';
+import GameOver from '@/components/Quiz/GameOver';
+import Completion from '@/components/Quiz/Completion';
+import Context from '@/components/Quiz/Context';
+import Answers from '@/components/Quiz/Answers';
+import Result from '@/components/Quiz/Result';
+import LoadingScreen from '@/components/LoadingScreen';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import {
@@ -207,7 +208,7 @@ const Quiz: React.FC = () => {
   };
 
   if (isLoading) {
-    return <div>Loading questions...</div>;
+    return <LoadingScreen message="Loading questions..." />;
   }
 
   if (gameState.playerHealth <= 0) {

src/config.ts

@@ -1,5 +1,5 @@
 export const config = {
-  title: 'Code Quest',
+  title: 'CodeQuest',
   description: 'How far can you go?',
   url: 'https://gmickel.github.io/codequest',
   twitter: '@gmickel',