smooth scrolling with fade

src/blog/components/Latest.tsx

@@ -8,6 +8,7 @@ import { styled } from '@mui/material/styles';
 import NavigateNextRoundedIcon from '@mui/icons-material/NavigateNextRounded';
 import CircularProgress from '@mui/material/CircularProgress';
 import type { Article } from '../providers/Article'; // ✅ import type for correctness
+import Fade from '@mui/material/Fade'; // ✅ for smooth appearance
 
 
 const StyledTypography = styled(Typography)({
@@ -98,12 +99,11 @@ interface LatestProps {
 export default function Latest({ articles, onSelectArticle, onLoadMore }: LatestProps) {
   const [visibleCount, setVisibleCount] = React.useState(2);
   const [loadingMore, setLoadingMore] = React.useState(false);
+  const [animating, setAnimating] = React.useState(false);
+  const loaderRef = React.useRef<HTMLDivElement | null>(null);
 
   const displayedArticles = articles.slice(0, visibleCount);
 
-  // Intersection Observer ref
-  const loaderRef = React.useRef<HTMLDivElement | null>(null);
-
   React.useEffect(() => {
     if (!loaderRef.current) return;
 
@@ -114,17 +114,22 @@ export default function Latest({ articles, onSelectArticle, onLoadMore }: Latest
           console.log('🟡 Intersection triggered — loading more blogs...');
           setLoadingMore(true);
 
+          // simulate API load delay
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+
           if (onLoadMore) {
             console.log(`📡 Calling onLoadMore(offset=${visibleCount}, limit=2)`);
             await onLoadMore(visibleCount, 2);
           }
 
+          setAnimating(true);
           setVisibleCount((prev) => {
             const newCount = prev + 2;
             console.log(`✅ Increasing visibleCount from ${prev} → ${newCount}`);
             return newCount;
           });
 
+          setTimeout(() => setAnimating(false), 600);
           setLoadingMore(false);
         }
       },
@@ -150,6 +155,7 @@ export default function Latest({ articles, onSelectArticle, onLoadMore }: Latest
       <Grid container spacing={8} columns={12} sx={{ my: 4 }}>
         {displayedArticles.map((article, index) => (
           <Grid key={index} size={{ xs: 12, sm: 6 }}>
+            <Fade in timeout={animating ? 700 : 0}>
               <Box
                 sx={{
                   display: 'flex',
@@ -157,6 +163,8 @@ export default function Latest({ articles, onSelectArticle, onLoadMore }: Latest
                   justifyContent: 'space-between',
                   gap: 1,
                   height: '100%',
+                  transition: 'transform 0.3s ease',
+                  '&:hover': { transform: 'translateY(-3px)' },
                 }}
               >
                 <Typography gutterBottom variant="caption" component="div">
@@ -179,13 +187,26 @@ export default function Latest({ articles, onSelectArticle, onLoadMore }: Latest
 
                 <Author authors={article.authors} />
               </Box>
+            </Fade>
           </Grid>
         ))}
       </Grid>
 
-      {/* Infinite scroll loader */}
+      <Box
-      <Box ref={loaderRef} sx={{ display: 'flex', justifyContent: 'center', py: 3 }}>
+        ref={loaderRef}
-        {loadingMore && <CircularProgress size={28} />}
+        sx={{
+          display: 'flex',
+          justifyContent: 'center',
+          py: 3,
+          opacity: loadingMore ? 1 : 0.6,
+          transition: 'opacity 0.4s ease',
+        }}
+      >
+        {loadingMore ? (
+          <CircularProgress size={32} thickness={5} />
+        ) : (
+          <Typography variant="caption">Scroll to load more...</Typography>
+        )}
       </Box>
     </Box>
   );