feat: Migrate to Vite build tool and lazy load components

This commit updates the project to use Vite as the build tool, replacing the previous configuration. It also implements lazy loading for the HostView, PlayerView, and SpectatorView components to improve initial load performance.

The spectator view's fastest buzzer calculation has been refactored for clarity and type safety.

Dependencies have been updated to include Vite and its React plugin. The import maps in index.html have also been adjusted to reflect the new build tool.
This commit is contained in:
Philip
2026-01-28 18:44:20 -08:00
parent 77cc74a7c3
commit 1939574e0f
5 changed files with 44 additions and 40 deletions
+15 -6
View File
@@ -1,9 +1,11 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, Suspense } from 'react';
import { GameProvider } from './context/GameContext';
import { HostView } from './components/HostView';
import { PlayerView } from './components/PlayerView';
import { SpectatorView } from './components/SpectatorView';
import { Monitor, Smartphone, LayoutDashboard } from 'lucide-react';
import { Monitor, Smartphone, LayoutDashboard, Loader2 } from 'lucide-react';
// Lazy load components to reduce initial bundle size
const HostView = React.lazy(() => import('./components/HostView').then(module => ({ default: module.HostView })));
const PlayerView = React.lazy(() => import('./components/PlayerView').then(module => ({ default: module.PlayerView })));
const SpectatorView = React.lazy(() => import('./components/SpectatorView').then(module => ({ default: module.SpectatorView })));
const App: React.FC = () => {
const [view, setView] = useState<'HOST' | 'PLAYER' | 'SPECTATOR'>('SPECTATOR');
@@ -70,7 +72,14 @@ const App: React.FC = () => {
{/* Main Content Area */}
<div className="flex-1 relative w-full h-full overflow-hidden">
{renderView()}
<Suspense fallback={
<div className="h-full w-full flex flex-col items-center justify-center text-slate-500 gap-4">
<Loader2 className="animate-spin w-12 h-12 text-indigo-500" />
<p>Loading Quiz Module...</p>
</div>
}>
{renderView()}
</Suspense>
</div>
</div>
</GameProvider>