Merge pull request #172 from Stanley-Owoh/add-animated-progress-bar-on-pledge-78

Add animated progress bar on pledge 78

Author: ritik4ever

frontend/src/components/CampaignCard.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect, useRef } from "react";
 import { Campaign } from "../types/campaign";
 import { CopyButton } from "./CopyButton";
 import { AddressAvatar } from "./AddressAvatar";
@@ -13,6 +14,16 @@ export function CampaignCard({
   selectedCampaignId,
   onSelect,
 }: CampaignCardProps) {
+  const prevPercentRef = useRef<number | null>(null);
+  const [animate, setAnimate] = useState(false);
+
+  useEffect(() => {
+    if (prevPercentRef.current !== null && prevPercentRef.current !== campaign.progress.percentFunded) {
+      setAnimate(true);
+    }
+    prevPercentRef.current = campaign.progress.percentFunded;
+  }, [campaign.progress.percentFunded]);
+
   const formatTimestamp = (unixSeconds: number) =>
     new Date(unixSeconds * 1000).toLocaleString();
 
@@ -47,6 +58,7 @@ export function CampaignCard({
           </div>
           <div className="progress-bar" aria-hidden>
             <div
+              className={animate ? "progress-bar-fill" : undefined}
               style={{
                 width: `${Math.min(campaign.progress.percentFunded, 100)}%`,
               }}

frontend/src/index.css

@@ -1234,6 +1234,10 @@ tbody tr:hover td {
   background: linear-gradient(90deg, var(--primary), #22c55e);
 }
 
+.progress-bar-fill {
+  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .badge,
 .chip,
 .chip-emphasis {

pr-body.md

@@ -0,0 +1,16 @@
+## Summary
+
+- Smoothly animates the campaign progress bar when funding percentage changes after a pledge
+- Uses 0.4s cubic-bezier transition for responsive feel
+- Animation only triggers on update, not on initial page load
+
+## Changes
+
+- **CampaignCard.tsx**: Added useRef to track previous percent and useState to conditionally apply animation class after initial render
+- **index.css**: Added `.progress-bar-fill` class with CSS transition on width
+
+## Acceptance criteria
+
+- Progress bar animates on funding percentage change
+- Animation duration is short enough to feel responsive  
+- Animation does not trigger on initial page load