F/numberflow

package.json

@@ -27,6 +27,7 @@
     "@mdx-js/react": "^3.1.0",
     "@next/bundle-analyzer": "^14.2.15",
     "@next/mdx": "^15.0.3",
+    "@number-flow/react": "^0.4.2",
     "@react-email/components": "^0.0.28",
     "@react-email/render": "^1.0.3",
     "@t3-oss/env-core": "^0.11.1",

src/components/Analytics/Fathom.tsx

@@ -43,7 +43,7 @@ export const TrackPageView = ({ siteId }: { siteId: string }) => {
     Fathom.load(siteId, {
       auto: false,
     });
-  }, []);
+  });
 
   // Record a pageview when route changes
   useEffect(() => {

src/components/NewsletterSignup/NewsletterBannerDetailed.tsx

@@ -1,16 +1,15 @@
 import React, { useEffect, useState } from 'react';
-import useNewsletterStats from '@hooks/useNewsletterStats';
 import { Code, CornerRightDown, Rocket, Zap } from 'lucide-react';
 import { usePostHog } from 'posthog-js/react';
 
 import { Avatar } from '@components/Avatar';
 import { Badge } from '@components/Badge';
 import { Headshot } from '@components/Headshot';
 import { SubscriptionForm } from '@components/SubscriptionForm';
+import SubscriberCount from './SubscriberCount';
 
 const NewsletterBannerDetailed = () => {
   const posthog = usePostHog();
-  const { subscriberCount } = useNewsletterStats();
   const [titleIndex, setTitleIndex] = useState(0);
 
   // calculate the number of days until the next Tuesday
@@ -89,7 +88,7 @@ const NewsletterBannerDetailed = () => {
             <p className="mb-2 text-gray-500">
               Join{' '}
               <span className="font-bold text-pink-600">
-                {subscriberCount ?? 'thousands of'}
+                <SubscriberCount />
               </span>{' '}
               developers, founders, and product builders getting smarter every
               week.

src/components/NewsletterSignup/NewsletterBannerFancy.tsx

@@ -1,13 +1,11 @@
-import useNewsletterStats from '@hooks/useNewsletterStats';
-
 import config from '../../config';
 import { Heading } from '../Heading';
 import { Headshot } from '../Headshot';
 import SponsorCTA from '../SponsorCTA/SponsorCTA';
 import { SubscriptionForm } from '../SubscriptionForm';
+import SubscriberCount from './SubscriberCount';
 
 const NewsletterSignup: React.FC = () => {
-  const { subscriberCount } = useNewsletterStats();
   return (
     <div className="mb-4 flex flex-row text-justify">
       <div className="mx-auto my-0 flex max-w-[800px] flex-col justify-center border border-solid border-gray-200 bg-white px-8 py-4">
@@ -21,7 +19,7 @@ const NewsletterSignup: React.FC = () => {
           <p className="font-futura font-bold uppercase">
             Subscribe and join{' '}
             <span className="text-pink-600">
-              {subscriberCount ? `🔥 ${subscriberCount}` : ''}
+              🔥 <SubscriberCount />{' '}
             </span>{' '}
             other builders
           </p>

src/components/NewsletterSignup/NewsletterBannerSimple.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import useNewsletterStats from '@hooks/useNewsletterStats';
 
 import config from '../../config';
 import { SubscriptionForm } from '../SubscriptionForm';
+import SubscriberCount from './SubscriberCount';
 
 const SimpleNewsletterBanner: React.FC = () => {
-  const { subscriberCount } = useNewsletterStats();
   return (
     <div className="mx-auto max-w-screen-xl py-8">
       <div className="items-center justify-between gap-16 rounded-lg bg-gray-700 p-8 text-white lg:flex lg:gap-24">
@@ -17,7 +16,7 @@ const SimpleNewsletterBanner: React.FC = () => {
             <p>
               Join{' '}
               <span className="text-xl font-extrabold text-pink-600">
-                {subscriberCount ?? ''}
+                <SubscriberCount />
               </span>{' '}
               other product builders, indie hackers, and startup founders.
             </p>

src/components/NewsletterSignup/NewsletterHero.tsx

@@ -1,12 +1,9 @@
-import useNewsletterStats from '@hooks/useNewsletterStats';
-
 import { Heading } from '@components/Heading';
 import { Image } from '@components/Image';
 import { SubscriptionForm } from '@components/SubscriptionForm';
+import SubscriberCount from './SubscriberCount';
 
 const NewsletterHero = () => {
-  const { subscriberCount } = useNewsletterStats();
-
   return (
     <section
       className="-ml-4 w-screen bg-gray-950 py-0"
@@ -51,8 +48,7 @@ const NewsletterHero = () => {
                   <p className="max-w-[600px] text-lg">
                     Join{' '}
                     <span className="text-pink-400">
-                      {subscriberCount ? <span>{subscriberCount}</span> : 'the'}{' '}
-                      other product builders
+                      <SubscriberCount /> other product builders
                     </span>
                     {', '}
                     and start shipping today!

src/components/NewsletterSignup/SubscriberCount.tsx

@@ -0,0 +1,23 @@
+import useNewsletterStats from '@hooks/useNewsletterStats';
+import NumberFlow from '@number-flow/react';
+
+type SubscriberCountProps = {
+  label?: string;
+};
+
+const SubscriberCount: React.FC<SubscriberCountProps> = ({ label }) => {
+  const { subscriberCount } = useNewsletterStats();
+  return (
+    <NumberFlow
+      value={subscriberCount}
+      suffix={label}
+      format={{
+        notation: 'standard', // set to 'compact' for "1.1K" style
+        useGrouping: false, // don't display commas
+      }}
+      className="tabular-nums"
+    />
+  );
+};
+
+export default SubscriberCount;

src/components/SiteAnnouncement/SiteAnnouncement.tsx

@@ -1,14 +1,12 @@
 import Link from 'next/link';
-import useNewsletterStats from '@hooks/useNewsletterStats';
 
+import SubscriberCount from '@components/NewsletterSignup/SubscriberCount';
 import clsxm from '@utils/clsxm';
 
 type SiteAnnouncementProps = {
   className?: string;
 };
 const SiteAnnouncement: React.FC<SiteAnnouncementProps> = ({ className }) => {
-  const { subscriberCount } = useNewsletterStats();
-
   return (
     <div
       className={clsxm(
@@ -32,7 +30,7 @@ const SiteAnnouncement: React.FC<SiteAnnouncementProps> = ({ className }) => {
           Join
           <span className="font-bold text-pink-600">
             {' '}
-            {subscriberCount ?? 'other'} builders{' '}
+            <SubscriberCount /> other builders{' '}
           </span>
           &mdash; Get tips from a YC startup founder & ex-Googler. Subscribe to
           💌 Tiny Improvements

src/hooks/useNewsletterStats.ts

@@ -7,12 +7,24 @@ const useNewsletterStats = () => {
 
   const { data: subscriberCount } = subscriberCountQuery;
 
+  const randomMax = 987;
+  const randomMin = 931;
+  const COUNT_TO_SHOW_WHILE_LOADING = getRandomNumberBetween(
+    randomMin,
+    randomMax
+  );
+
   return {
-    subscriberCount: subscriberCount?.subscribers,
+    subscriberCount:
+      subscriberCount?.subscribers ?? COUNT_TO_SHOW_WHILE_LOADING,
     refreshStats: () => {
       void subscriberCountQuery.refetch();
     },
   };
 };
 
+const getRandomNumberBetween = (min: number, max: number) => {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+
 export default useNewsletterStats;

src/pages/newsletter/index.tsx

@@ -1,13 +1,13 @@
 import type { GetStaticProps } from 'next';
-import useNewsletterStats from '@hooks/useNewsletterStats';
 
 import { Heading } from '@components/Heading';
-import NewsletterItem from '../../components/NewsletterFeed/NewsletterItem';
-import NewsletterSignup from '../../components/NewsletterSignup';
-import SEO from '../../components/seo';
-import SponsorCTA from '../../components/SponsorCTA/SponsorCTA';
-import { SubscriptionForm } from '../../components/SubscriptionForm';
-import { Subtitle } from '../../components/Subtitle';
+import NewsletterItem from '@components/NewsletterFeed/NewsletterItem';
+import NewsletterSignup from '@components/NewsletterSignup';
+import SubscriberCount from '@components/NewsletterSignup/SubscriberCount';
+import SEO from '@components/seo';
+import SponsorCTA from '@components/SponsorCTA/SponsorCTA';
+import { SubscriptionForm } from '@components/SubscriptionForm';
+import { Subtitle } from '@components/Subtitle';
 import config from '../../config';
 import type { Newsletter } from '../../data/content-types';
 import { getAllNewsletters } from '../../lib/newsletters';
@@ -27,8 +27,6 @@ type NewsletterPageProps = {
 };
 
 const NewsletterPage: React.FC<NewsletterPageProps> = ({ newsletters }) => {
-  const { subscriberCount } = useNewsletterStats();
-
   const [latestNewsletter, ...pastNewsletters] = newsletters;
 
   return (
@@ -54,7 +52,7 @@ const NewsletterPage: React.FC<NewsletterPageProps> = ({ newsletters }) => {
         <p className="text-xl">
           Join{' '}
           <span style={{ fontWeight: 'bold' }}>
-            {subscriberCount ?? 'the'} other product builders
+            <SubscriberCount /> other product builders
           </span>{' '}
           and get it delivered straight to your inbox by filling out this happy
           lil&apos; form: