@e-for-eshaan I would like to work on this issue, can you assign it to me.

Hey @KartikChawla09, sure you can take this up.

I'm assigning this to you. In case that changes, let me know and I'll unassign you.

I'm assigning this to you. In case that changes, let me know and I'll unassign you.

Thank you for assigning it to me. Can you have a look at #459 while I work on this ?

Hey @KartikChawla09, #459 was merged. 👏🏽 👏🏽 👏🏽
Feel free to continue on this.

Hey @KartikChawla09, #459 was merged. 👏🏽 👏🏽 👏🏽 Feel free to continue on this.

Yes! I am working on it. Will raise a PR ASAP.

Hey @e-for-eshaan @jayantbh .

The page is getting stuck on this loading animation for more than 5 minutes. It used to work previously but after fetching the latest commit it stopped to work.
I am attaching the logs below.


Is this an issue with my local deployment ?

Hey @KartikChawla09, this shouldn't have happened. Did you check if there is an older commit that seems to not have this issue?

Hey @KartikChawla09, this shouldn't have happened. Did you check if there is an older commit that seems to not have this issue?

The last commit I remember working correctly was this one. But maybe the issue is at my end only. It would really help if someone could confirm that by checking on their local deployment.

Hey @KartikChawla09 , are you still working on this?

Hey @KartikChawla09 , are you still working on this?

Yes! I have implemented the counter as well but I am having some issues with my local deployment due to which I am not able to test the code locally. I will push the code when I am able to fix the issue. I have sent the error on Slack as well.

@KartikChawla09 been a while, how's this coming up, should I assign this to someone else?

There was some issue with my local deployment, as I mentioned I raised as issue on Slack as well but it didn't get fixed so I couldn't test my code.

import { useEffect, useState } from "react";

const easeInOutQuad = (t: number) => {
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
};

const CounterAnimation = ({
targetValue,
duration,
}: {
targetValue: number;
duration: number;
}) => {
const [count, setCount] = useState(0);

useEffect(() => {
const flag = Math.floor(targetValue) === targetValue;
let start = 0;
const iterations = 10;
const time = duration / iterations;
const startTime = performance.now();
const counter = setInterval(() => {
const elapsed = performance.now() - startTime;
const progress = elapsed / duration;
const easedProgress = easeInOutQuad(progress);
start += 1;
flag
? setCount(Math.floor(easedProgress * targetValue))
: setCount(parseFloat((easedProgress * targetValue).toFixed(2)));
if (start >= iterations) {
clearInterval(counter);
setCount(targetValue);
}
}, time);
}, [duration, targetValue]);

return <>{count}</>;
};

export default CounterAnimation;

This code snippet might help the person who takes up this issue!