chore: Minor enhancements

Author: tjtanjin

src/components/Home/FeaturesAtGlanceSection.tsx

@@ -212,6 +212,7 @@ const FeaturesAtGlanceSection = (): JSX.Element => {
           >
             <Box
               component="img"
+              loading="lazy"
               src={placeholderGifs[selectedFeature]}
               alt={`Preview ${selectedFeature + 1}`}
               sx={{

src/components/Home/ProjectCard.tsx

@@ -41,7 +41,7 @@ const ProjectCard: React.FC<RepositoryInfo & { previewImg: string }> = React.mem
         <Card sx={cardStyles}>
           {/* Repository preview image */}
           <Box sx={imageWrapperStyles}>
-            <CardMedia sx={imageStyles} image={previewImg} />
+            <CardMedia sx={imageStyles} image={previewImg} component="img" loading="lazy" />
           </Box>
 
           <CardContent sx={cardContentStyles}>

src/pages/Home.tsx

@@ -1,15 +1,16 @@
-import { Box, Container } from '@mui/material';
-
-import CallToActionSection from '@/components/Home/CallToActionSection';
-import CommunitySection from '@/components/Home/CommunitySection';
-import FeaturesAtGlanceSection from '@/components/Home/FeaturesAtGlanceSection';
-import Footer from '@/components/Home/Footer';
+import { Box, Container, Skeleton } from '@mui/material';
+import React, { lazy, Suspense } from 'react';
 
 // import SponsorsSection from '@/components/Home/SponsorsSection';
 // import TestimonialSection from '@/components/Home/TestimonialSection';
-import FeaturesAndBenefitsSection from '../components/Home/FeaturesAndBenefitsSection';
 import HeroSection from '../components/Home/HeroSection';
-import ProjectSection from '../components/Home/ProjectSection';
+
+const CallToActionSection = lazy(() => import('@/components/Home/CallToActionSection'));
+const CommunitySection = lazy(() => import('@/components/Home/CommunitySection'));
+const FeaturesAtGlanceSection = lazy(() => import('@/components/Home/FeaturesAtGlanceSection'));
+const FeaturesAndBenefitsSection = lazy(() => import('../components/Home/FeaturesAndBenefitsSection'));
+const ProjectSection = lazy(() => import('../components/Home/ProjectSection'));
+const Footer = lazy(() => import('@/components/Home/Footer'));
 
 /**
  * Landing page that users first see upon visiting the website.
@@ -24,39 +25,42 @@ const Home: React.FC = () => {
           px: { sm: '10%', xs: 0 },
         }}
       >
-        <Container
-          maxWidth={false}
-          disableGutters
-          sx={{
-            px: { sm: 6, xs: 2 },
-          }}
-        >
+        <Container maxWidth={false} disableGutters sx={{ px: { sm: 6, xs: 2 } }}>
           <HeroSection />
+
+          {/* spacer */}
           <Box sx={{ height: { sm: '240px', xs: '64px' } }} />
-          <FeaturesAtGlanceSection />
-          <Box sx={{ height: { sm: '240px', xs: '64px' } }} />
-          <FeaturesAndBenefitsSection />
-          <Box sx={{ height: { sm: '240px', xs: '64px' } }} />
-          <ProjectSection />
-          <Box sx={{ height: { sm: '240px', xs: '64px' } }} />
-          <CommunitySection />
-          <Box sx={{ height: { sm: '240px', xs: '64px' } }} />
-          {/* <TestimonialSection />
-        <Box sx={{ height: { sm: '240px', xs: '64px' } }} />
-        <SponsorsSection />
-        <Box sx={{ height: { sm: '240px', xs: '64px' } }} /> */}
-          <CallToActionSection />
-          <Box sx={{ height: { sm: '240px', xs: '64px' } }} />
+
+          {/* single Suspense for all lazy sections */}
+          <Suspense fallback={<Skeleton variant="rectangular" height={240} animation="wave" sx={{ mb: 4 }} />}>
+            <FeaturesAtGlanceSection />
+            <Box sx={{ height: { sm: '240px', xs: '64px' } }} />
+
+            <FeaturesAndBenefitsSection />
+            <Box sx={{ height: { sm: '240px', xs: '64px' } }} />
+
+            <ProjectSection />
+            <Box sx={{ height: { sm: '240px', xs: '64px' } }} />
+
+            <CommunitySection />
+            <Box sx={{ height: { sm: '240px', xs: '64px' } }} />
+
+            <CallToActionSection />
+            <Box sx={{ height: { sm: '240px', xs: '64px' } }} />
+          </Suspense>
         </Container>
       </Box>
+
       <Box
         sx={{
           backgroundColor: 'background.paper',
           color: 'text.primary',
           px: { sm: '48px', xs: 0 },
         }}
       >
-        <Footer />
+        <Suspense fallback={<Skeleton variant="rectangular" height={200} />}>
+          <Footer />
+        </Suspense>
       </Box>
     </>
   );