Add CounterDisplay child component

- Refactor BuildersCheckInCount to render a child server component. This bend the pattern composition rule but works thanks to the fact that all the child component are serializable. (This would be explained more in the PR)
- Add CounterDisplay server component wich is rendered in the server, sent to the client and the rehydrated with the current values when the become available in the client component.

packages/nextjs/app/_components/BuildersCheckInCount.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import React from "react";
-import { displayTxResult } from "../debug/_components/contract";
-import { ArrowPathIcon } from "@heroicons/react/24/outline";
+import { CounterDisplay } from "./CounterDisplay";
 import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
 
 const CONTRACT_NAME = "BatchRegistry";
@@ -19,18 +18,7 @@ function BuildersCheckInCount() {
     functionName: FUNCTION_NAME,
   });
 
-  return (
-    <div className="text-lg flex gap-2 justify-center items-center">
-      <span className="font-bold">Checked in builders count:</span>
-      {isLoading || (!error && !counter) ? (
-        <ArrowPathIcon className="size-5 animate-spin" />
-      ) : error ? (
-        <span className="text-error">Error!</span>
-      ) : (
-        <span>{displayTxResult(counter)}</span>
-      )}
-    </div>
-  );
+  return <CounterDisplay data={counter} isLoading={isLoading} error={error} />;
 }
 
 export default BuildersCheckInCount;

packages/nextjs/app/_components/CounterDisplay.tsx

@@ -0,0 +1,25 @@
+import { displayTxResult } from "../debug/_components/contract";
+import { ArrowPathIcon } from "@heroicons/react/16/solid";
+
+export async function CounterDisplay({
+  data: counter,
+  isLoading,
+  error,
+}: {
+  data?: bigint;
+  isLoading: boolean;
+  error: Error | null;
+}) {
+  return (
+    <div className="text-lg flex gap-2 justify-center items-center">
+      <span className="font-bold">Checked in builders count:</span>
+      {isLoading || (!error && !counter) ? (
+        <ArrowPathIcon className="size-5 animate-spin" />
+      ) : error ? (
+        <span className="text-error">Error!</span>
+      ) : (
+        <span>{displayTxResult(counter)}</span>
+      )}
+    </div>
+  );
+}