a better timer

src/lib/RepoStats.svelte

···
     let totalRecords = $state(0);
     let startTime = $state<number | null>(null);
     let endTime = $state<number | null>(null);
-    let elapsedTime = $derived.by(() => {
+    let elapsedTime = $state('');
+
+    let interval = $state<number | null>(null);
+
+    const calculateElapsedTime = () => {
         if (!startTime) return '0.00';
         const end = endTime ?? Date.now();
-        return ((end - startTime) / 1000).toFixed(2);
-    });
+        elapsedTime =  ((end - startTime) / 1000).toFixed(2);
+    };
+
+    const startTimer = () => {
+        interval = setInterval(() => {
+            calculateElapsedTime();
+        }, 250);
+    };
 
     const getRepoStats = async () => {
-        const endPoint = `${pdsUrl}/xrpc/com.atproto.sync.getRepo?did=${did}`;
+        const rpc = new Client({ handler: simpleFetchHandler({ service: pdsUrl }) });
 
         startTime = Date.now();
         endTime = null;
+        startTimer();
         try {
-            const response = await fetch(endPoint);
-            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+            const result = await rpc.get('com.atproto.sync.getRepo', {
+                params: { did: did },
+                as: 'stream',
+            });
 
-            const car = fromStream(response.body);
+            if (!result.ok ){
+                throw new Error(`HTTP error! status: ${result.status}`);
+            }
+
+            let stream = result.data;
+
+
+            const car = fromStream(stream);
 
           try {
             for await (const entry of car) {
···
               totalRecords++;
             }
           }finally{
+              if (interval){
+                  clearInterval(interval);
+                  interval = null;
+                  calculateElapsedTime();
+              }
             await car.dispose();
           }
 
···
         </ol>
     {/if}
 </div>
+
+<style>
+    div::after {
+        font: 800 40px system-ui;
+        content: counter(count);
+        animation: counter 5s linear infinite alternate;
+        counter-reset: count 0;
+    }
+
+    @keyframes counter {
+        0% {
+            counter-increment: count 0;
+        }
+        10% {
+            counter-increment: count 1;
+        }
+        20% {
+            counter-increment: count 2;
+        }
+        30% {
+            counter-increment: count 3;
+        }
+        40% {
+            counter-increment: count 4;
+        }
+        50% {
+            counter-increment: count 5;
+        }
+        60% {
+            counter-increment: count 6;
+        }
+        70% {
+            counter-increment: count 7;
+        }
+        80% {
+            counter-increment: count 8;
+        }
+        90% {
+            counter-increment: count 9;
+        }
+        100% {
+            counter-increment: count 10;
+        }
+    }
+
+</style>