feat: implement request accepted client view with contact information display and interaction components

src/app/request-accepted/request-accepted-client.tsx

@@ -23,6 +23,7 @@ import PageHeader from "@/components/Componentes/page-header";
 import SubscriptionRequiredSheet from "@/components/Componentes/subscription-required-sheet";
 import SwipeButton from "@/components/Componentes/swipe-button";
 import { LoadingBorderSpinner } from "@/components/ui/loading-border-spinner";
+import { LoadingSkeleton } from "@/components/Componentes/loading-skeleton";
 import type {
   MarriageField,
   MarriagePhoneFieldValue,
@@ -223,6 +224,18 @@ function getContactInfoPhoneItems(
     .filter((item): item is ContactInfoPhoneItem => item !== null);
 }
 
+function ContactInfoSkeleton() {
+  return (
+    <div className="flex items-center justify-between rounded-[20px] bg-[#FFF5F6] border border-[#FFE4E8] px-5 py-4 shadow-sm">
+      <div className="text-start min-w-0 flex-1 pe-3 space-y-2.5">
+        <LoadingSkeleton className="h-5 w-44 rounded-md" />
+        <LoadingSkeleton className="h-3.5 w-56 rounded-md" />
+      </div>
+      <LoadingSkeleton className="size-[44px] rounded-[14px] shrink-0" />
+    </div>
+  );
+}
+
 function ContactInfoPhoneCard({
   item,
   copyText,
@@ -614,11 +627,8 @@ export default function RequestAcceptedClient() {
           }
           buttons={
             (contactInfoQuery.isLoading || isFetchingContact) && !contactInfoPhoneItems.length ? (
-              <div className="flex flex-col items-center justify-center py-6 gap-2">
-                <LoadingBorderSpinner size="md" variant="primary" />
-                <span className="text-xs text-[#64748B] font-medium">
-                  {t["Loading..."]}
-                </span>
+              <div className="space-y-4">
+                <ContactInfoSkeleton />
               </div>
             ) : contactInfoPhoneItems.length ? (
               <div className="space-y-4">