chceck api working

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) => (
-          <DownloadCard
-            key={index}
-            title={guide.name}
-            fileType={guide.file_ype}
-            fileSize={guide.file_size}
-            fileUrl={guide.file}
-          />
-        ))}
+        {isLoading ? (
+          <DownloadCardSkeleton />
+        ) : (
+          guidedata.map((guide: any, index: number) => (
+            <DownloadCard
+              key={index}
+              title={guide.name}
+              fileType={guide.file_type}
+              fileSize={guide.file_size}
+              fileUrl={guide.file}
+            />
+          ))
+        )}
       </div>
       {data?.total_pages > 1 && (
         <PaginationLite