form 1 topics added

components/ui/client-only.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useSyncExternalStore, type ReactNode } from "react";
+
+const emptySubscribe = () => () => {};
+
+/**
+ * Renders its children only after hydration on the client. Use this to wrap UI
+ * whose initial render is non-deterministic (e.g. seeded with Math.random()),
+ * which would otherwise cause a server/client hydration mismatch. The
+ * `fallback` is shown during SSR and the first (hydrating) client render.
+ *
+ * Uses useSyncExternalStore rather than a mount effect so there is no
+ * setState-in-effect and the server/client snapshots stay explicit.
+ */
+export function ClientOnly({
+  children,
+  fallback = null,
+}: {
+  children: ReactNode;
+  fallback?: ReactNode;
+}) {
+  const isServer = useSyncExternalStore(
+    emptySubscribe,
+    () => false,
+    () => true,
+  );
+  return <>{isServer ? fallback : children}</>;
+}