Update: Loading Animation and update global css :)

pages/about/index.js

@@ -37,7 +37,7 @@ const aboutData = [
           <FaAws />,
           <FaJenkins />,
           <SiHeroku />,
-          <SiFlux />
+          <SiFlux />,
         ],
       },
       {
@@ -50,7 +50,7 @@ const aboutData = [
           <SiMysql />,
           <FaReact />,
           <SiNextdotjs />,
-          <SiCypress />
+          <SiCypress />,
         ],
       },
       {
@@ -81,11 +81,13 @@ const aboutData = [
     title: "Qualifications",
     info: [
       {
-        title: "Computer Science and Engineering - Symbiosis Institute Of Technology, PNQ, IN",
+        title:
+          "Computer Science and Engineering - Symbiosis Institute Of Technology, PNQ, IN",
         stage: "2024",
       },
       {
-        title: "Cloud Computing Specialization - Symbiosis International University, PNQ, IN ",
+        title:
+          "Cloud Computing Specialization - Symbiosis International University, PNQ, IN ",
         stage: "2024",
       },
     ],
@@ -107,24 +109,28 @@ const About = () => {
   const [index, setIndex] = useState(0);
   const [mergedPullRequests, setMergedPullRequests] = useState(0);
   const [commitsCount, setCommitsCount] = useState(0);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const fetchMergedPullRequests = async () => {
       try {
-        console.log('Fetching merged pull requests...');
-        const response = await axios.get('/api/gitPullRequests');
+        console.log("Fetching merged pull requests...");
+        const response = await axios.get("/api/gitPullRequests");
         setMergedPullRequests(response.data.mergedPullRequestsCount);
       } catch (error) {
-        console.error('Error fetching merged pull requests:', error);
+        console.error("Error fetching merged pull requests:", error);
       }
     };
 
     const fetchCommitsCount = async () => {
       try {
-        const response = await axios.get('/api/gitCommits');
+        setLoading(true);
+        const response = await axios.get("/api/gitCommits");
         setCommitsCount(response.data.totalCommits);
       } catch (error) {
         console.error("Error fetching commits count:", error);
+      } finally {
+        setLoading(false); // Set loading to false after the request is complete
       }
     };
 
@@ -162,7 +168,12 @@ const About = () => {
             animate="show"
             className="max-w-[500px] mx-auto xl:mx-0 mb-6 xl:mb-12 px-2 xl:px-0"
           >
-            I am a freelance developer, currently looking for opportunities to expand my experience. I am open to working remotely with agencies, providing consultation services for startups, and collaborating on the development of digital products for both business and consumer markets. My goal is to bring innovative solutions and a fresh perspective to every project I undertake.
+            I am a freelance developer, currently looking for opportunities to
+            expand my experience. I am open to working remotely with agencies,
+            providing consultation services for startups, and collaborating on
+            the development of digital products for both business and consumer
+            markets. My goal is to bring innovative solutions and a fresh
+            perspective to every project I undertake.
           </motion.p>
           {/* counters */}
           <motion.div
@@ -199,10 +210,19 @@ const About = () => {
                   Total Pull Requests
                 </div>
               </div>
+              {/* commits */}
               <div className="relative flex-1 after:w-[1px] after:h-full after:bg-white/10 after:absolute after:top-0 after:right-0">
-                <div className="text-2xl xl:text-4xl font-extrabold text-accent mb-2">
-                  <CountUp start={0} end={commitsCount} duration={5} /> +
-                </div>
+                {loading ? (
+                  <div className="loading-indicatortext-2xl xl:text-4xl font-extrabold text-accent mb-2 ">
+                    <span className="dot">.</span>
+                    <span className="dot">.</span>
+                    <span className="dot">.</span>
+                  </div>
+                ) : (
+                  <div className="text-2xl xl:text-4xl font-extrabold text-accent mb-2">
+                    <CountUp start={0} end={commitsCount} duration={5} /> +
+                  </div>
+                )}
                 <div className="text-xs uppercase tracking-[1px] leading-[1.4] max-w-[100px]">
                   Total Commits
                 </div>
@@ -244,7 +264,11 @@ const About = () => {
                   <div className="flex gap-x-4">
                     {/* icons */}
                     {item.icons?.map((icon, itemIndex) => {
-                      return <div key={itemIndex} className="text-3xl text-white">{icon}</div>;
+                      return (
+                        <div key={itemIndex} className="text-3xl text-white">
+                          {icon}
+                        </div>
+                      );
                     })}
                   </div>
                 </div>

pages/api/gitCommits.js

@@ -6,13 +6,6 @@ dotenv.config();
 const GITHUB_USERNAME = "Shubham-Patel07"; // Replace with your GitHub username
 const GITHUB_TOKEN = process.env.GITHUB_TOKEN;
 
-// In-memory cache
-let cache = {
-  totalCommits: 0,
-  lastFetch: 0,
-};
-const CACHE_DURATION = 5 * 24 * 60 * 60 * 1000; // Cache duration in milliseconds (e.g., 5 days)
-
 const fetchTotalCommits = async (username, author) => {
   const headers = {
     Authorization: `Bearer ${GITHUB_TOKEN}`,
@@ -71,22 +64,9 @@ export default async function handler(req, res) {
   if (req.method === 'GET') {
     console.log('Received GET request...');
 
-    const now = Date.now();
-    if (cache.lastFetch && (now - cache.lastFetch < CACHE_DURATION)) {
-      console.log('Returning cached result');
-      res.status(200).json({ totalCommits: cache.totalCommits });
-      return;
-    }
-
     const totalCommits = await fetchTotalCommits(GITHUB_USERNAME, GITHUB_USERNAME);
     console.log('Total commits count:', totalCommits);
 
-    // Update cache
-    cache = {
-      totalCommits,
-      lastFetch: Date.now(),
-    };
-
     res.status(200).json({ totalCommits });
   } else {
     res.status(405).json({ message: 'Method not allowed' });

styles/globals.css

@@ -49,3 +49,34 @@
     @apply w-full h-[180px] p-6 capitalize rounded-lg resize-none;
   }
 }
+
+// loading component
+.loading-indicator {
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+}
+
+.dot {
+  animation: bounce 1.5s infinite;
+  display: inline-block;
+  font-size: 24px;
+  margin-left: 3px;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.3s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.6s;
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}