Unused Lazy Loading Import Not Implemented Properly

[Harsh-vardhan09]

Severity: MEDIUM
Component: Frontend - Athlead-client/src/App.jsx

Description

Events component is lazy loaded but EventCardSkeleton is imported directly (not lazy), which defeats the purpose of code splitting.

Current Code (Lines 950-951)

const LazyEvents = React.lazy(() => import("./pages/Events"));
import EventCardSkeleton from "./Components/EventCardSkelton";  // Not lazy - imported directly

Impact

• EventCardSkeleton still included in main bundle
• Code splitting benefits are reduced
• App bundle size not optimized
• Inconsistent lazy loading strategy

Solution

const LazyEvents = React.lazy(() => import("./pages/Events"));
const LazyEventCardSkeleton = React.lazy(() => import("./Components/EventCardSkelton"));
 
// Use in fallback
<React.Suspense
  fallback={
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 my-8 w-full lg:px-20">
      {Array.from({ length: 6 }).map((_, i) => (
        <LazyEventCardSkeleton key={i} />
      ))}
    </div>
  }
>
  <LazyEvents />
</React.Suspense>

Tasks

• Analyze which components should be lazy loaded
• Implement lazy loading for heavy components
• Check bundle size before/after with npm run build
• Test Suspense fallback UI
• Monitor bundle size in CI/CD