chceck api working

app/[locale]/about/sertificate/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { CertCardSkeleton } from "@/components/pages/about/aboutDetail/loading/loading";
 import { CertCard } from "@/components/pages/about/aboutDetail/sertificateCard";
 import PaginationLite from "@/components/paginationUI";
 import { certs } from "@/lib/demoData";
@@ -23,8 +24,7 @@ export default function SertificatePage() {
     }),
   });
 
-  console.log(data);
+  const generallydata = data?.results || certs;
-  const generallydata = data?.results ?? certs;
 
   return (
     <main className="min-h-screen bg-[#0f0e0d] text-white pb-44 overflow-x-hidden">
@@ -88,9 +88,13 @@ export default function SertificatePage() {
 
       {/* ── Cards ── */}
       <section className="max-w-4xl mx-auto px-6 flex flex-col gap-4">
-        {generallydata.map((c:any, i:number) => (
+        {isLoading ? (
-          <CertCard key={c.id} c={c} i={i} />
+          <CertCardSkeleton />
-        ))}
+        ) : (
+          generallydata.map((c: any, i: number) => (
+            <CertCard key={c.id} c={c} i={i} />
+          ))
+        )}
       </section>
 
       {/*pagination*/}

components/pages/about/aboutDetail/guides.tsx

@@ -6,6 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";
 import PaginationLite from "@/components/paginationUI";
+import { DownloadCardSkeleton } from "./loading/guidLoading";
 
 export function Guides() {
   const t = useTranslations();
@@ -31,7 +32,7 @@ export function Guides() {
     },
   ];
 
-  const { data } = useQuery({
+  const { data, isLoading } = useQuery({
     queryKey: ["guides"],
     queryFn: () => httpClient(endPoints.guides),
     select: (res) => ({
@@ -46,15 +47,19 @@ export function Guides() {
   return (
     <div className="space-y-4">
       <div className="grid lg:grid-cols-3 min-[580px]:grid-cols-2 grid-cols-1  gap-4 max-w-7xl mx-auto py-5">
-        {guidedata.map((guide: any, index: number) => (
+        {isLoading ? (
-          <DownloadCard
+          <DownloadCardSkeleton />
-            key={index}
+        ) : (
-            title={guide.name}
+          guidedata.map((guide: any, index: number) => (
-            fileType={guide.file_ype}
+            <DownloadCard
-            fileSize={guide.file_size}
+              key={index}
-            fileUrl={guide.file}
+              title={guide.name}
-          />
+              fileType={guide.file_type}
-        ))}
+              fileSize={guide.file_size}
+              fileUrl={guide.file}
+            />
+          ))
+        )}
       </div>
       {data?.total_pages > 1 && (
         <PaginationLite

components/pages/about/aboutDetail/loading/guidLoading.tsx

@@ -0,0 +1,24 @@
+export function DownloadCardSkeleton() {
+  return (
+    <div
+      className="min-h-40 h-full relative w-full max-w-md border border-white/10 bg-[#171616b8] rounded-lg p-4 flex flex-col gap-4 items-start justify-between"
+    >
+      {/* Top section */}
+      <div className="flex justify-between items-start w-full gap-4">
+        {/* Title */}
+        <div className="space-y-2 flex-1">
+          <div className="h-4 w-3/4 rounded bg-white/8 animate-pulse" />
+          <div className="h-4 w-1/2 rounded bg-white/8 animate-pulse" />
+        </div>
+        {/* File type badge */}
+        <div className="h-4 w-10 rounded bg-white/8 animate-pulse shrink-0" />
+      </div>
+
+      {/* Bottom section */}
+      <div className="flex w-full justify-between items-center">
+        <div className="h-3 w-16 rounded bg-white/8 animate-pulse" />
+        <div className="w-5 h-5 rounded bg-white/8 animate-pulse" />
+      </div>
+    </div>
+  );
+}

components/pages/about/aboutDetail/normativeCard.tsx

@@ -9,7 +9,7 @@ import { endPoints } from "@/request/links";
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import PaginationLite from "@/components/paginationUI";
-import { CertCardSkeleton } from "./loading";
+import { CertCardSkeleton } from "./loading/loading";
 
 export function NormativeCard() {
   const t = useTranslations();
@@ -25,9 +25,7 @@ export function NormativeCard() {
     }),
   });
 
-  console.log(data);
+  const generallyData = data?.results || normativeData;
-
-  const generallyData = data?.results ?? normativeData;
 
   if (isLoading) return <CertCardSkeleton />;