have hit counter start at zero during suspense, then count up

app/notes/[slug]/counter.tsx

@@ -1,5 +1,6 @@
 import { connection } from "next/server";
 import commaNumber from "comma-number";
+import CountUp from "../../../components/CountUp";
 import redis from "../../../lib/helpers/redis";
 
 const HitCounter = async ({ slug }: { slug: string }) => {
@@ -9,7 +10,11 @@ const HitCounter = async ({ slug }: { slug: string }) => {
     const hits = await redis.incr(slug);
 
     // we have data!
-    return <span title={`${commaNumber(hits)} ${hits === 1 ? "view" : "views"}`}>{commaNumber(hits)}</span>;
+    return (
+      <span title={`${commaNumber(hits)} ${hits === 1 ? "view" : "views"}`}>
+        <CountUp start={0} end={hits} delay={0} duration={2.5} />
+      </span>
+    );
   } catch (error) {
     console.error("[hit counter] fatal error:", error);
 

app/notes/[slug]/page.module.css

@@ -17,10 +17,10 @@
 }
 
 .meta .metaIcon {
-  display: inline;
+  display: inline-block;
   width: 1.2em;
   height: 1.2em;
-  vertical-align: -0.2em;
+  vertical-align: -0.25em;
   margin-right: 0.6em;
 }
 

app/notes/[slug]/page.tsx

@@ -128,7 +128,11 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
               }}
             >
               <EyeIcon size="1.2em" className={styles.metaIcon} />
-              <Suspense fallback={<Loading boxes={3} width={20} />}>
+              <Suspense
+                // when this loads, the component will count up from zero to the actual number of hits, so we can simply
+                // show a zero here as a "loading indicator"
+                fallback={<span>0</span>}
+              >
                 <HitCounter slug={`notes/${frontmatter!.slug}`} />
               </Suspense>
             </div>