Enhance Pagination component with loading state and improved button handling

Author: TheCoderAdi

src/Pagination.jsx

@@ -1,29 +1,62 @@
-import React from 'react'
-import { useGlobalContext } from './Context'
+import React, { useState, useCallback } from 'react';
+import { useGlobalContext } from './Context';
 
 const Pagination = () => {
-    const {page,nbPages,getPrevPage,getNextPage,setShowPopularNews,showPopularNews}=useGlobalContext();
+  const { page, nbPages, getPrevPage, getNextPage, setShowPopularNews, showPopularNews } = useGlobalContext();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handlePrev = useCallback(() => {
+    if (!isLoading) {
+      setIsLoading(true);
+      getPrevPage();
+      setTimeout(() => setIsLoading(false), 300);
+    }
+  }, [getPrevPage, isLoading]);
+
+  const handleNext = useCallback(() => {
+    if (!isLoading) {
+      setIsLoading(true);
+      getNextPage();
+      setTimeout(() => setIsLoading(false), 300);
+    }
+  }, [getNextPage, isLoading]);
+
   return (
     <>
-    {
-      !showPopularNews &&
-      <div className='pagination-btn'>
-          <button onClick={()=>getPrevPage()}>Prev</button>
-          <p>{page+1} of {nbPages}</p>
-          <button onClick={()=>getNextPage()}>Next</button>
-      </div>
-    }
-    <div className='popular-btn'>
-      <button onClick={()=>setShowPopularNews(!showPopularNews)} style={{ margin : '2rem'}}>
       {
-        !showPopularNews
-          ? 'Trending Tech News'
-          : 'Back to Home'
+        !showPopularNews && (
+          <div className="pagination-btn">
+            <button 
+              onClick={handlePrev} 
+              disabled={page <= 0 || isLoading} 
+              className={isLoading ? 'loading' : ''}
+            >
+              Prev
+            </button>
+            
+            <p>{page + 1} of {nbPages}</p>
+            
+            <button 
+              onClick={handleNext} 
+              disabled={page >= nbPages - 1 || isLoading} 
+              className={isLoading ? 'loading' : ''}
+            >
+              Next
+            </button>
+          </div>
+        )
       }
-      </button>
-    </div>
+      
+      <div className="popular-btn">
+        <button 
+          onClick={() => setShowPopularNews(!showPopularNews)} 
+          style={{ margin: '2rem' }}
+        >
+          { !showPopularNews ? '🔥 Trending Tech News' : '🏠 Back to Home' }
+        </button>
+      </div>
     </>
-  )
-}
+  );
+};
 
-export default Pagination
+export default Pagination;