landing page performance improvements

frontend/package.json

@@ -35,17 +35,18 @@
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
+    "babel-jest": "^29.7.0",
     "cypress": "^14.3.2",
     "dotenv": "^16.5.0",
-    "babel-jest": "^29.7.0",
     "eslint": "^9.19.0",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.18",
     "globals": "^15.14.0",
-    "start-server-and-test": "^2.0.11",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "start-server-and-test": "^2.0.11",
     "vite": "^6.1.0"
   }
 }

frontend/src/App.jsx

@@ -1,6 +1,7 @@
 // frontend/src/App.jsx
 import { Suspense, lazy } from 'react';
 import { Routes, Route } from 'react-router-dom';
+import { Box, CircularProgress } from '@mui/material'; // Import Box and CircularProgress
 import ProtectedRoute from './components/auth/ProtectedRoute';
 // Lazy load pages
 const LandingPage = lazy(() => import('./pages/LandingPage'));
@@ -12,8 +13,21 @@ const DirectoryPage = lazy(() => import('./pages/DirectoryPage'));
 const UserProfilePage = lazy(() => import('./pages/UserProfilePage'));
 
 const App = () => {
+  const centeredLoader = (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: '100vh', // Take full viewport height
+      }}
+    >
+      <CircularProgress />
+    </Box>
+  );
+
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={centeredLoader}> {/* Use the styled loader */}
       <Routes>
         {/* Public Routes */}
         <Route path="/" element={<LandingPage />} />

frontend/src/pages/LandingPage.jsx

@@ -15,7 +15,7 @@ import PersonAddIcon from '@mui/icons-material/PersonAdd'; // Icon for Signup
 // --- TODO: Replace with a real, high-quality background image URL ---
 // Consider a blurred Purdue campus photo or a professional abstract background
 // You can host it in Firebase Storage or use a direct link.
-import bdImage from '../assets/Mastadon.jpg'; // Placeholder image
+import bdImage from '../assets/Mastadon.webp'; // Placeholder image
 
 const LandingPage = () => {
 
@@ -72,7 +72,7 @@ const LandingPage = () => {
         </Fade>
         <Fade in={true} timeout={1500}>
           <Typography variant="h5" component="p" sx={{ mb: 4, maxWidth: '700px', color: 'rgba(255, 255, 255, 0.9)', fontSize: { xs: '1.1rem', sm: '1.25rem'} }}>
-            Bridging the gap between students and faculty at Purdue. Discover opportunities, connect with professors, and enhance your academic journey.
+            Bridging the gap between students and faculty at Purdue.
           </Typography>
         </Fade>
         {/* --- UPDATED BUTTONS --- */}
@@ -130,15 +130,15 @@ const LandingPage = () => {
             <FeatureCard
               icon={<WorkIcon />}
               title="Find Opportunities"
-              description="Students: Discover TA, research, grader, and other campus positions posted directly by professors. Professors: Easily reach interested and qualified students."
+              description="Discover TA, research, grader, and other campus positions posted directly by professors who in turn can easily reach interested and qualified students."
             />
           </Grid>
           {/* Feature 2 */}
           <Grid item xs={12} sm={6} md={4}>
             <FeatureCard
               icon={<ConnectWithoutContactIcon />}
               title="Connect Directly"
-              description="Streamline communication. Students express interest, and professors manage potential candidates all in one place."
+              description="Streamline communication, allowing students to express their interest and professors to manage potential candidates all in one place."
             />
           </Grid>
           {/* Feature 3 */}

frontend/vite.config.js

@@ -1,7 +1,19 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { visualizer } from 'rollup-plugin-visualizer'; // Import
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  plugins: [
+    react(),
+    visualizer({ // Add the visualizer plugin
+      open: true, // Automatically open report in browser after build
+      filename: 'dist/stats.html', // Output file in dist folder
+      gzipSize: true,
+      brotliSize: true,
+    }),
+  ],
+  build: { // Add or modify build options
+    sourcemap: true, // Generate source maps for production build
+  },
+});