"use client";
import { useEffect, useState } from "react";
import { Container } from "@/components/common/Container";
import { Card, CardContent } from "@/components/common/Card";
import { cn } from "@/lib/utils";
function Bone({ className }: { className?: string }) {
return (
);
}
const SWAP_INTERVAL_MS = 2200;
// Real page renders one of two very different layouts once status is known
// (upload form for unverified, centered status card for pending/verified).
// The skeleton can't know which ahead of time, so it cross-fades between
// both shapes instead of guessing wrong and causing a layout jump on swap.
function FormShape() {
return (
<>
);
}
function StatusShape() {
return (
);
}
export function AgentKycSkeleton() {
const [showForm, setShowForm] = useState(true);
const [visible, setVisible] = useState(true);
useEffect(() => {
let swapTimeout: ReturnType;
const interval = setInterval(() => {
setVisible(false);
swapTimeout = setTimeout(() => {
setShowForm((v) => !v);
setVisible(true);
}, 200);
}, SWAP_INTERVAL_MS);
return () => {
clearInterval(interval);
clearTimeout(swapTimeout);
};
}, []);
return (
{showForm ? : }
);
}