feat: improve UI feedback for checked-in builders counter by showing loading spinner instead of 0

Author: big14way

packages/nextjs/app/page.tsx

@@ -6,7 +6,7 @@ import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
 
 const Home: NextPage = () => {
-  const { data: checkedInCount } = useScaffoldReadContract({
+  const { data: checkedInCount, isLoading } = useScaffoldReadContract({
     contractName: "BatchRegistry",
     functionName: "checkedInCounter",
   });
@@ -22,7 +22,11 @@ const Home: NextPage = () => {
           <p className="text-center text-lg">Get started by taking a look at your batch GitHub repository.</p>
           <p className="text-lg flex gap-2 justify-center">
             <span className="font-bold">Checked in builders count:</span>
-            <span>{checkedInCount?.toString() || "0"}</span>
+            {isLoading ? (
+              <span className="loading loading-spinner loading-sm"></span>
+            ) : (
+              <span>{checkedInCount?.toString()}</span>
+            )}
           </p>
         </div>