fixed some bugs

app/[locale]/cart/page.tsx

@@ -3,7 +3,9 @@ import { useState, useEffect, useMemo } from "react";
 import { Card } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import CartItemCard from "../../../features/cart/components/CartItemCard";
+import CartItemSkeleton from "../../../features/cart/components/CartItemSkeleton";
 import OrderSummary from "../../../features/cart/components/OrderSummary";
+import OrderSummarySkeleton from "../../../features/cart/components/OrderSummarySkeleton";
 import {
   useCart,
   useCreateOrder,
@@ -14,6 +16,7 @@ import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import type { DeliveryType, PaymentType } from "@/lib/types/api";
 import EmptyCart from "@/features/cart/components/EmptyCart";
+import ErrorPage from "@/components/ErrorPage";
 
 export default function CartPage() {
   const [isClient, setIsClient] = useState(false);
@@ -29,12 +32,14 @@ export default function CartPage() {
   const router = useRouter();
   const t = useTranslations();
 
-  const { data: cartResponse, isLoading, isError } = useCart();
+  const { data: cartResponse, isLoading: cartLoading, isError } = useCart();
-  const { data: provinces = [] } = useRegions();
+  const { data: provinces = [], isLoading: provincesLoading } = useRegions();
-  const { data: paymentTypes = [] } = usePaymentTypes();
+  const { data: paymentTypes = [], isLoading: paymentTypesLoading } =
+    usePaymentTypes();
   const { mutate: createOrder, isPending: isCreatingOrder } = useCreateOrder();
 
   const cartItems = cartResponse?.data || [];
+  const isLoading = cartLoading || provincesLoading || paymentTypesLoading;
 
   useEffect(() => {
     setIsClient(true);
@@ -120,12 +125,38 @@ export default function CartPage() {
 
   if (!isClient) return null;
 
-  if (isError || cartItems.length === 0) {
+  if (isLoading) {
+    return (
+      <div className="mx-auto px-2 md:px-4 lg:px-6 mb-18">
+        <h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-4 md:mb-6 pt-3">
+          {t("cart")}
+        </h1>
+
+        <div className="flex flex-col md:flex-row gap-6">
+          <div className="flex-1">
+            <Card className="p-4 md:p-6 rounded-xl">
+              <div className="space-y-4">
+                {Array.from({ length: 3 }).map((_, i) => (
+                  <CartItemSkeleton key={i} />
+                ))}
+              </div>
+            </Card>
+          </div>
+          <OrderSummarySkeleton />
+        </div>
+      </div>
+    );
+  }
+  
+  if (isError ) {
+    return <ErrorPage />;
+  }
+  if (cartItems.length === 0) {
     return <EmptyCart />;
   }
 
   return (
-    <div className=" mx-auto px-2 md:px-4 lg:px-6 mb-18">
+    <div className="mx-auto px-2 md:px-4 lg:px-6 mb-18">
       <h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-4 md:mb-6 pt-3">
         {t("cart")}
       </h1>

app/[locale]/category/[slug]/page.tsx

@@ -1,35 +1,52 @@
-import type { Metadata } from "next"
+import type { Metadata } from "next";
 
 type Props = {
-  params: Promise<{ locale: string; slug: string }>
+  params: Promise<{ locale: string; slug: string }>;
-}
+};
 
-export const revalidate = 600 // ISR: Revalidate every 10 minutes
+export const revalidate = 600; // ISR: Revalidate every 10 minutes
+
+const CATEGORY_META = {
+  tm: {
+    suffix: " | Post shop",
+    description: "Kategoriýa boýunça harytlary gözläň",
+    ogLocale: "tk_TM",
+  },
+  ru: {
+    suffix: " | Post shop",
+    description: "Просмотр товаров в данной категории",
+    ogLocale: "ru_RU",
+  },
+} as const;
 
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { locale, slug } = await params
+  const { locale, slug } = await params;
+
+  const meta =
+    CATEGORY_META[locale as keyof typeof CATEGORY_META] ?? CATEGORY_META.ru;
 
   return {
-    title: `${slug.charAt(0).toUpperCase() + slug.slice(1)} | E-Commerce`,
+    title: `${slug}${meta.suffix}`,
-    description: `Browse ${slug} products in our store`,
+    description: meta.description,
     openGraph: {
-      locale,
+      locale: meta.ogLocale,
-      type: "website",
+      title: `${slug}${meta.suffix}`,
-      title: `${slug.charAt(0).toUpperCase() + slug.slice(1)} | E-Commerce`,
+      description: meta.description,
-      description: `Browse ${slug} products in our store`,
     },
-  }
+  };
 }
 
 export async function generateStaticParams() {
-  const categories = ["electronics", "clothing", "home-garden"]
+  const categories = ["electronics", "clothing", "home-garden"];
-  return categories.map((slug) => ({ slug }))
+  return categories.map((slug) => ({ slug }));
 }
 
 export default async function CategoryPage(props: Props) {
-  const params = await props.params
+  const params = await props.params;
-  const { slug } = params
+  const { slug } = params;
 
-  const CategoryPageClient = (await import("../../../../features/category/components/CategoryPageClient")).default
+  const CategoryPageClient = (
-  return <CategoryPageClient params={params} />
+    await import("../../../../features/category/components/CategoryPageClient")
+  ).default;
+  return <CategoryPageClient params={params} />;
 }

app/[locale]/collections/[slug]/page.tsx

@@ -1,37 +1,64 @@
-import type { Metadata } from "next"
+import type { Metadata } from "next";
 
 type Props = {
-  params: Promise<{ locale: string; slug: string }>
+  params: Promise<{ locale: string; slug: string }>;
+};
+
+export const revalidate = 600; // ISR: 10 minutes
+
+const META = {
+  tm: {
+    titleSuffix: " | Post shop",
+    description: (name: string) => `${name} kolleksiýasyndaky harytlary gözläň`,
+    ogLocale: "tk_TM",
+  },
+  ru: {
+    titleSuffix: " | Post shop",
+    description: (name: string) => `Просмотр товаров из коллекции «${name}»`,
+    ogLocale: "ru_RU",
+  },
+} as const;
+
+function formatSlug(slug: string) {
+  return slug
+    .split("-")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
 }
 
-export const revalidate = 600 // ISR: Revalidate every 10 minutes
-
 export async function generateMetadata({ params }: Props): Promise<Metadata> {
-  const { locale, slug } = await params
+  const { locale, slug } = await params;
+
+  const meta = META[locale as keyof typeof META] ?? META.ru;
+  const collectionName = formatSlug(slug);
+  const title = `${collectionName}${meta.titleSuffix}`;
+  const description = meta.description(collectionName);
 
   return {
-    title: `${slug.charAt(0).toUpperCase() + slug.slice(1)} | E-Commerce`,
+    title,
-    description: `Browse ${slug} collection products in our store`,
+    description,
     openGraph: {
-      locale,
       type: "website",
-      title: `${slug.charAt(0).toUpperCase() + slug.slice(1)} | E-Commerce`,
+      locale: meta.ogLocale,
-      description: `Browse ${slug} collection products in our store`,
+      title,
+      description,
     },
-  }
+  };
 }
 
 export async function generateStaticParams() {
-  const collections = ["new-arrivals", "best-sellers", "featured"]
+  const collections = ["new-arrivals", "best-sellers", "featured"];
-  return collections.map((slug) => ({ slug }))
+  return collections.map((slug) => ({ slug }));
 }
 
 export default async function CollectionPage(props: Props) {
-  const params = await props.params
+  const params = await props.params;
 
   const CollectionPageClient = (
-    await import("../../../../features/collections/components/CollectionPageClient")
+    await import(
-  ).default
+      "../../../../features/collections/components/CollectionPageClient"
+    )
+  ).default;
 
-  return <CollectionPageClient params={params} />
+  return <CollectionPageClient params={params} />;
 }

app/[locale]/favorites/page.tsx

@@ -6,33 +6,46 @@ import { useTranslations } from "next-intl";
 import ProductCard from "@/features/home/components/ProductCard";
 import type { Favorite } from "@/lib/types/api";
 import EmptyFavorites from "@/features/favorites/components/EmptyFavorites";
+import ErrorPage from "@/components/ErrorPage";
 export default function FavoritesPage() {
   const t = useTranslations();
   const { data: favorites, isLoading, isError } = useFavorites();
 
   if (isLoading) {
     return (
-      <div className=" mx-auto px-4 py-8 min-h-screen">
+      <div className="mx-auto px-2 md:px-4 lg:px-6 pb-12 space-y-8 max-w-[1504px]">
-        <h1 className="text-3xl font-bold mb-6">{t("favorite_products")}</h1>
+        <h1 className="bg-white text-3xl p-4 font-bold mb-0 pb-6">
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+          {t("favorite_products")}
+        </h1>
+        <div className="bg-white grid grid-cols-2 sm:grid-cols-3 rounded-b-lg md:grid-cols-4 lg:grid-cols-5 gap-3 p-4">
           {Array.from({ length: 10 }).map((_, i) => (
-            <Skeleton key={i} className="w-full h-64 rounded-lg" />
+            <div key={i} className="space-y-2">
+              <Skeleton className="w-full h-[260px] rounded-xl" />
+              <Skeleton className="h-4 w-3/4 mx-2" />
+              <Skeleton className="h-6 w-1/2 mx-2" />
+            </div>
           ))}
         </div>
       </div>
     );
   }
 
-  if (isError || !favorites || favorites.length === 0) {
+  if (isError) {
-    return (
+    return <ErrorPage />;
-     <EmptyFavorites/>
+  }
-    );
+
+  if (!favorites || favorites.length === 0) {
+    return <EmptyFavorites />;
   }
 
   return (
-    <div className=" mx-auto px-2 md:px-4 lg:px-6  pb-12 space-y-8 max-w-[1504px] 
+    <div
-    ">
+      className=" mx-auto px-2 md:px-4 lg:px-6  pb-12 space-y-8 max-w-[1504px] 
-      <h1 className="bg-white text-3xl p-4 font-bold mb-0 pb-6">{t("favorite_products")}</h1>
+    "
+    >
+      <h1 className="bg-white text-3xl p-4 font-bold mb-0 pb-6">
+        {t("favorite_products")}
+      </h1>
       <div className="bg-white grid grid-cols-2 sm:grid-cols-3 rounded-b-lg md:grid-cols-4 lg:grid-cols-5 gap-3 p-4">
         {favorites.map((favorite: Favorite) => {
           const product = favorite.product;

components/ErrorPage/index.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+
+// Google Fonts'u içe aktarmak için bileşen dışına ekliyoruz
+const fontImport = `
+  @import url('https://fonts.googleapis.com/css?family=Encode+Sans+Semi+Condensed:100,200,300,400');
+  
+  @keyframes clockwise {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  @keyframes anticlockwise {
+    0% { transform: rotate(360deg); }
+    100% { transform: rotate(0deg); }
+  }
+  @keyframes clockwiseError {
+    0% { transform: rotate(0deg); }
+    20% { transform: rotate(30deg); }
+    40% { transform: rotate(25deg); }
+    60% { transform: rotate(30deg); }
+    100% { transform: rotate(0deg); }
+  }
+  @keyframes anticlockwiseError {
+    0% { transform: rotate(0deg); }
+    20% { transform: rotate(-30deg); }
+    40% { transform: rotate(-25deg); }
+    60% { transform: rotate(-30deg); }
+    100% { transform: rotate(0deg); }
+  }
+  @keyframes anticlockwiseErrorStop {
+    0% { transform: rotate(0deg); }
+    20% { transform: rotate(-30deg); }
+    60% { transform: rotate(-30deg); }
+    100% { transform: rotate(0deg); }
+  }
+`;
+
+export default function ErrorPage() {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setIsLoading(false), 1000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-white flex flex-col items-center justify-start  overflow-hidden font-['Encode_Sans_Semi_Condensed',_sans-serif]">
+      {/* CSS Animasyonlarını buraya gömüyoruz */}
+      <style dangerouslySetInnerHTML={{ __html: fontImport }} />
+
+      <h1
+        className={`text-[10rem] leading-[10rem] font-extralight text-black transition-all duration-500 ease-linear
+          ${isLoading ? "mt-0 opacity-0" : "mt-[100px] opacity-100"}`}
+      >
+        500
+      </h1>
+
+      <h2
+        className={`text-[1.5rem] font-extralight text-black mt-5 mb-[30px] transition-all duration-500 ease-linear
+          ${isLoading ? "mt-0 opacity-0" : "opacity-100"}`}
+      >
+        Unexpected Error <b className="font-bold">:(</b>
+      </h2>
+
+      <div className="relative w-auto h-0">
+        {/* Gear One */}
+        <div
+          className="relative w-[120px] h-[120px] rounded-full bg-black mx-auto -left-[130px]
+          before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-full before:z-20
+          after:content-[''] after:absolute after:inset-[25px] after:border-[5px] after:border-black after:rounded-full after:z-30 after:bg-[#eaeaea]"
+          style={{
+            animation: isLoading
+              ? "clockwise 3s linear infinite"
+              : "anticlockwiseErrorStop 2s linear infinite",
+          }}
+        >
+          <GearBars />
+        </div>
+
+        {/* Gear Two */}
+        <div
+          className="relative w-[120px] h-[120px] rounded-full bg-black mx-auto -top-[75px]
+          before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-full before:z-20
+          after:content-[''] after:absolute after:inset-[25px] after:border-[5px] after:border-black after:rounded-full after:z-30 after:bg-[#eaeaea]"
+          style={{
+            animation: isLoading
+              ? "anticlockwise 3s linear infinite"
+              : "anticlockwiseError 2s linear infinite",
+          }}
+        >
+          <GearBars />
+        </div>
+
+        {/* Gear Three */}
+        <div
+          className="relative w-[120px] h-[120px] rounded-full bg-black mx-auto -top-[235px] left-[130px]
+          before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-full before:z-20
+          after:content-[''] after:absolute after:inset-[25px] after:border-[5px] after:border-black after:rounded-full after:z-30 after:bg-[#eaeaea]"
+          style={{
+            animation: isLoading
+              ? "clockwise 3s linear infinite"
+              : "clockwiseError 2s linear infinite",
+          }}
+        >
+          <GearBars />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Dişli çubukları için yardımcı bileşen
+function GearBars() {
+  return (
+    <>
+      <div className="absolute left-[-15px] top-1/2 w-[150px] h-[30px] -mt-[15px] rounded-[5px] bg-black z-0 before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-[2px] before:z-[1]" />
+      <div
+        className="absolute left-[-15px] top-1/2 w-[150px] h-[30px] -mt-[15px] rounded-[5px] bg-black z-0 rotate-60 before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-[2px] before:z-[1]"
+        style={{ transform: "rotate(60deg)" }}
+      />
+      <div
+        className="absolute left-[-15px] top-1/2 w-[150px] h-[30px] -mt-[15px] rounded-[5px] bg-black z-0 rotate-120 before:content-[''] before:absolute before:inset-[5px] before:bg-[#eaeaea] before:rounded-[2px] before:z-[1]"
+        style={{ transform: "rotate(120deg)" }}
+      />
+    </>
+  );
+}

components/PageLoader/PreLoader.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-
+import { useTranslations } from "next-intl";
 const Preloader: React.FC = () => {
+  const t =useTranslations();
   return (
-    // bg-bg ve text-fg bizim CSS'te tanımladığımız değişkenleri kullanır.
+    
-    // Standart Tailwind sınıflarını (flex, min-h-screen) düzen için kullanıyoruz.
     <div className="flex flex-col items-center justify-center min-h-screen  text-fg font-sans transition-colors duration-300">
       <div className="text-center max-w-[20em] w-full">
         
@@ -21,15 +21,14 @@ const Preloader: React.FC = () => {
             strokeLinejoin="round"
             strokeWidth="8"
           >
-            {/* Track (Arka plan izleri) */}
+            
             <g className="stroke-track">
               <polyline points="4,4 21,4 26,22 124,22 112,64 35,64 39,80 106,80" />
               <circle cx="43" cy="111" r="13" />
               <circle cx="102" cy="111" r="13" />
             </g>
 
-            {/* Hareketli Çizgiler */}
+           
-            {/* animate-cartLines sınıfı globals.css'ten geliyor */}
             <g className="stroke-primary animate-cartLines">
               <polyline
                 className="animate-cartTop"
@@ -63,14 +62,14 @@ const Preloader: React.FC = () => {
           </g>
         </svg>
 
-        {/* Yükleniyor Yazıları */}
+       
         <div className="relative h-6">
           <p className="absolute w-full animate-msg text-lg">
-            Bringing you the goods…
+            {t('loading')}
           </p>
-          <p className="absolute w-full opacity-0 invisible animate-msgLast text-lg">
+          {/* <p className="absolute w-full opacity-0 invisible animate-msgLast text-lg">
             This is taking long. Something’s wrong.
-          </p>
+          </p> */}
         </div>
       </div>
     </div>

features/cart/components/CartItemCard.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useState, useEffect, useRef, useCallback } from "react";
 import Image from "next/image";
-import { Minus, Plus, Trash2, Loader2, AlertTriangle } from "lucide-react";
+import { Minus, Plus, Trash2, AlertTriangle } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import {
@@ -387,7 +387,7 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
                 variant="outline"
                 size="icon"
                 onClick={handleQuantityDecrease}
-                className={` cursor-pointer rounded-xl bg-blue-50 ${
+                className={` cursor-pointer rounded-lg bg-blue-50 ${
                   isSyncing ? "opacity-70" : ""
                 }`}
               >
@@ -396,9 +396,6 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
 
               <div className="w-12 text-center font-semibold relative">
                 {localQuantity}
-                {isSyncing && (
-                  <Loader2 className="h-3 w-3 animate-spin absolute -top-1 -right-3 text-blue-500" />
-                )}
                 {syncError && (
                   <span
                     className="absolute -top-1 -right-3 h-2 w-2 bg-red-500 rounded-full"
@@ -412,7 +409,7 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
                 size="icon"
                 onClick={handleQuantityIncrease}
                 // disabled={localQuantity >= availableStock}
-                className={`rounded-xl cursor-pointer bg-blue-50 ${
+                className={`rounded-lg cursor-pointer bg-blue-50 ${
                   isSyncing ? "opacity-70" : ""
                 } ${
                   localQuantity >= availableStock

features/cart/components/CartItemSkeleton.tsx

@@ -1,27 +1,36 @@
-// import { Skeleton } from "@/components/ui/skeleton"
+import { Card } from "@/components/ui/card";
-// import { Card } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton";
 
-// export default function CartItemSkeleton() {
+export default function CartItemSkeleton() {
-//   return (
+  return (
-//     <Card className="p-4 rounded-xl">
+    <Card className="p-4 shadow-none border">
-//       <div className="flex gap-4">
+      <div className="flex flex-col sm:flex-row gap-4">
-//         {/* Product Image */}
+        <div className="flex gap-4 flex-1">
-//         <Skeleton className="w-24 h-24 rounded-lg flex-shrink-0 bg-gray-200" />
+          <Skeleton className="w-[88px] h-[117px] rounded-xl" />
+          <div className="flex flex-col gap-2 flex-1">
+            <Skeleton className="h-5 w-3/4" />
+            <Skeleton className="h-4 w-1/2" />
+            <Skeleton className="h-4 w-1/3" />
+            <Skeleton className="h-5 w-5 rounded" />
+          </div>
+        </div>
+
+        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 justify-between">
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-8 w-40 rounded-lg" />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Skeleton className="h-10 w-10 rounded-xl" />
+            <Skeleton className="h-6 w-12" />
+            <Skeleton className="h-10 w-10 rounded-xl" />
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}
 
-//         {/* Product Info */}
-//         <div className="flex-1 space-y-2">
-//           <Skeleton className="h-4 w-3/4 bg-gray-200" />
-//           <Skeleton className="h-4 w-1/2 bg-gray-200" />
-//           <Skeleton className="h-6 w-20 bg-gray-200 mt-2" />
-//         </div>
 
-//         {/* Quantity Controls */}
-//         <div className="flex items-center gap-2">
-//           <Skeleton className="w-8 h-8 rounded-lg bg-gray-200" />
-//           <Skeleton className="w-8 h-8 bg-gray-200" />
-//           <Skeleton className="w-8 h-8 rounded-lg bg-gray-200" />
-//         </div>
-//       </div>
-//     </Card>
-//   )
-// }

features/cart/components/OrderSummarySkeleton.tsx

@@ -0,0 +1,81 @@
+import { Card } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Separator } from "@/components/ui/separator";
+
+export default function OrderSummarySkeleton() {
+  return (
+    <Card className="w-full md:w-[380px] p-4 md:p-6 rounded-xl h-fit sticky top-20">
+      {/* Customer Information */}
+      <div className="mb-6">
+        <Skeleton className="h-6 w-48 mb-3" />
+        <div className="space-y-4">
+          <div>
+            <Skeleton className="h-4 w-20 mb-2" />
+            <Skeleton className="h-10 w-full rounded-lg" />
+          </div>
+          <div>
+            <Skeleton className="h-4 w-24 mb-2" />
+            <Skeleton className="h-10 w-full rounded-lg" />
+          </div>
+          <div>
+            <Skeleton className="h-4 w-16 mb-2" />
+            <Skeleton className="h-10 w-full rounded-lg" />
+          </div>
+        </div>
+      </div>
+
+      {/* Payment Type */}
+      <div className="mb-6">
+        <Skeleton className="h-6 w-32 mb-3" />
+        <div className="flex gap-2">
+          <Skeleton className="flex-1 h-20 rounded-lg" />
+          <Skeleton className="flex-1 h-20 rounded-lg" />
+        </div>
+      </div>
+
+      {/* Region Selection */}
+      <div className="mb-6">
+        <Skeleton className="h-6 w-36 mb-3" />
+        <div className="flex flex-wrap gap-4">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-2">
+              <Skeleton className="h-4 w-4 rounded-full" />
+              <Skeleton className="h-4 w-16" />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Province Selection */}
+      <div className="mb-6">
+        <Skeleton className="h-6 w-40 mb-3" />
+        <Skeleton className="h-10 w-full rounded-lg" />
+      </div>
+
+      {/* Note */}
+      <div className="mb-6">
+        <Skeleton className="h-6 w-24 mb-3" />
+        <Skeleton className="h-24 w-full rounded-xl" />
+      </div>
+
+      {/* Billing */}
+      <div className="space-y-2 mb-4">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="flex justify-between">
+            <Skeleton className="h-5 w-24" />
+            <Skeleton className="h-5 w-20" />
+          </div>
+        ))}
+      </div>
+
+      <Separator className="my-4" />
+
+      <div className="flex justify-between items-center mb-6">
+        <Skeleton className="h-6 w-32" />
+        <Skeleton className="h-6 w-28" />
+      </div>
+
+      <Skeleton className="h-12 w-full rounded-lg" />
+    </Card>
+  );
+}

features/category/components/CategoryFilters.tsx

@@ -77,7 +77,7 @@ export default function CategoryFilters({
         </FilterSection>
       )}
 
-      <FilterSection title={translations.sort}>
+      {/* <FilterSection title={translations.sort}>
         <RadioItem
           name="sort"
           checked={priceSort === "none"}
@@ -96,7 +96,7 @@ export default function CategoryFilters({
           onChange={() => onPriceSortChange("highToLow")}
           label={translations.price_high_to_low}
         />
-      </FilterSection>
+      </FilterSection> */}
 
       <PriceFilter
         title={translations.price}
@@ -108,7 +108,7 @@ export default function CategoryFilters({
         }}
       />
 
-      <Button variant="outline" className="w-full rounded-lg cursor-pointer" onClick={onReset}>
+      <Button variant="outline" className="w-full rounded-lg cursor-pointer mb-6" onClick={onReset}>
         {translations.reset}
       </Button>
     </div>

features/category/components/CategoryPageClient.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState, useMemo, useCallback } from "react";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   useCategories,
   useCategoryFilters,
@@ -12,6 +13,7 @@ import type { Category, Product } from "@/lib/types/api";
 import CategoryFilters from "./CategoryFilters";
 import CategoryProductsGrid from "./CategoryProductsGrid";
 import CategoryFiltersSheet from "./CategoryFiltersSheet";
+import ErrorPage from "@/components/ErrorPage";
 
 interface CategoryPageClientProps {
   params: { locale: string; slug: string };
@@ -24,8 +26,11 @@ export default function CategoryPageClient({
   const t = useTranslations();
   const [isSheetOpen, setIsSheetOpen] = useState(false);
 
-  const { data: categoriesData, isLoading: categoriesLoading } =
+  const { 
-    useCategories();
+    data: categoriesData, 
+    isLoading: categoriesLoading,
+    isError: categoriesError 
+  } = useCategories();
 
   const selectedCategory = useMemo(() => {
     if (!categoriesData || !slug) return null;
@@ -57,7 +62,11 @@ export default function CategoryPageClient({
   >(new Set());
 
   // Fetch filters
-  const { data: filtersData } = useCategoryFilters(selectedCategory?.id, {
+  const { 
+    data: filtersData,
+    isLoading: filtersLoading,
+    isError: filtersError 
+  } = useCategoryFilters(selectedCategory?.id, {
     enabled: !!selectedCategory,
   });
 
@@ -76,19 +85,18 @@ export default function CategoryPageClient({
       params.categories = Array.from(selectedFilterCategories);
     }
 
-    if (priceRange[0] > 0) {
+    params.min_price = priceRange[0];
-      params.min_price = priceRange[0];
+    params.max_price = priceRange[1];
-    }
-
-    if (priceRange[1] < 10000) {
-      params.max_price = priceRange[1];
-    }
 
     return params;
   }, [currentPage, selectedBrands, selectedFilterCategories, priceRange]);
 
   // Fetch filtered products
-  const { data: productsData, isFetching } = useFilteredCategoryProducts(
+  const { 
+    data: productsData, 
+    isFetching,
+    isError: productsError 
+  } = useFilteredCategoryProducts(
     selectedCategory?.id?.toString() || "",
     filterParams,
     { enabled: !!selectedCategory }
@@ -152,7 +160,7 @@ export default function CategoryPageClient({
   const loadMoreData = useCallback(() => {
     if (!hasMore || isFetching) return;
     setCurrentPage((prev) => prev + 1);
-  }, [hasMore, isFetching, currentPage]);
+  }, [hasMore, isFetching]);
 
   const sortedProducts = useMemo(() => {
     const products = [...allProducts];
@@ -232,9 +240,57 @@ export default function CategoryPageClient({
     [t]
   );
 
+  // ERROR STATE
+  if (categoriesError || productsError || filtersError) {
+    return <ErrorPage />;
+  }
 
-  if (!selectedCategory)
+  // LOADING STATE
+  if (categoriesLoading) {
+    return (
+      <div className="flex flex-col mx-auto max-w-[1504px] px-2 md:px-4 lg:px-6 pb-12">
+        {/* Title Skeleton */}
+        <Skeleton className="h-16 w-full rounded-t-lg mb-0 bg-white" />
+
+        <div className="flex p-2 md:p-4 gap-4 bg-white rounded-b-lg mt-0">
+          {/* Desktop Filters Skeleton */}
+          <div className="hidden sm:block w-[280px] shrink-0 border-r px-4 space-y-6">
+            <Skeleton className="h-8 w-32" />
+            <div className="space-y-2">
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+            </div>
+            <Skeleton className="h-8 w-32" />
+            <div className="space-y-2">
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+            </div>
+            <Skeleton className="h-32 w-full" />
+            <Skeleton className="h-10 w-full rounded-lg" />
+          </div>
+
+          {/* Products Grid Skeleton */}
+          <div className="flex-1">
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <div key={i} className="space-y-2">
+                  <Skeleton className="w-full aspect-square rounded-lg" />
+                  <Skeleton className="h-4 w-3/4" />
+                  <Skeleton className="h-6 w-1/2" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // CATEGORY NOT FOUND
+  if (!selectedCategory) {
     return <div className="text-center py-8">{t("category_not_found")}</div>;
+  }
 
   return (
     <div className="flex flex-col mx-auto max-w-[1504px] px-2 md:px-4 lg:px-6 pb-12">
@@ -246,19 +302,37 @@ export default function CategoryPageClient({
         {/* Desktop Filters Sidebar */}
         <div className="hidden sm:block w-[280px] shrink-0 border-r px-4">
           <ScrollArea className="h-auto">
-            <CategoryFilters
+            {filtersLoading ? (
-              filtersData={filtersData}
+              <div className="space-y-6">
-              selectedBrands={selectedBrands}
+                <div className="space-y-2">
-              selectedFilterCategories={selectedFilterCategories}
+                  <Skeleton className="h-6 w-24" />
-              priceSort={priceSort}
+                  <Skeleton className="h-5 w-full" />
-              priceRange={priceRange}
+                  <Skeleton className="h-5 w-full" />
-              onBrandToggle={handleBrandToggle}
+                  <Skeleton className="h-5 w-full" />
-              onCategoryToggle={handleCategoryToggle}
+                </div>
-              onPriceSortChange={handlePriceSortChange}
+                <div className="space-y-2">
-              onPriceChange={handlePriceChange}
+                  <Skeleton className="h-6 w-24" />
-              onReset={resetFilters}
+                  <Skeleton className="h-5 w-full" />
-              translations={filterTranslations}
+                  <Skeleton className="h-5 w-full" />
-            />
+                </div>
+                <Skeleton className="h-32 w-full" />
+                <Skeleton className="h-10 w-full rounded-lg" />
+              </div>
+            ) : (
+              <CategoryFilters
+                filtersData={filtersData}
+                selectedBrands={selectedBrands}
+                selectedFilterCategories={selectedFilterCategories}
+                priceSort={priceSort}
+                priceRange={priceRange}
+                onBrandToggle={handleBrandToggle}
+                onCategoryToggle={handleCategoryToggle}
+                onPriceSortChange={handlePriceSortChange}
+                onPriceChange={handlePriceChange}
+                onReset={resetFilters}
+                translations={filterTranslations}
+              />
+            )}
           </ScrollArea>
         </div>
 
@@ -284,19 +358,37 @@ export default function CategoryPageClient({
         filterLabel={t("filter")}
         closeLabel={t("close")}
       >
-        <CategoryFilters
+        {filtersLoading ? (
-          filtersData={filtersData}
+          <div className="space-y-6">
-          selectedBrands={selectedBrands}
+            <div className="space-y-2">
-          selectedFilterCategories={selectedFilterCategories}
+              <Skeleton className="h-6 w-24" />
-          priceSort={priceSort}
+              <Skeleton className="h-5 w-full" />
-          priceRange={priceRange}
+              <Skeleton className="h-5 w-full" />
-          onBrandToggle={handleBrandToggle}
+              <Skeleton className="h-5 w-full" />
-          onCategoryToggle={handleCategoryToggle}
+            </div>
-          onPriceSortChange={handlePriceSortChange}
+            <div className="space-y-2">
-          onPriceChange={handlePriceChange}
+              <Skeleton className="h-6 w-24" />
-          onReset={resetFilters}
+              <Skeleton className="h-5 w-full" />
-          translations={filterTranslations}
+              <Skeleton className="h-5 w-full" />
-        />
+            </div>
+            <Skeleton className="h-32 w-full" />
+            <Skeleton className="h-10 w-full rounded-lg" />
+          </div>
+        ) : (
+          <CategoryFilters
+            filtersData={filtersData}
+            selectedBrands={selectedBrands}
+            selectedFilterCategories={selectedFilterCategories}
+            priceSort={priceSort}
+            priceRange={priceRange}
+            onBrandToggle={handleBrandToggle}
+            onCategoryToggle={handleCategoryToggle}
+            onPriceSortChange={handlePriceSortChange}
+            onPriceChange={handlePriceChange}
+            onReset={resetFilters}
+            translations={filterTranslations}
+          />
+        )}
       </CategoryFiltersSheet>
     </div>
   );

features/category/components/CategorySkeleton.tsx

@@ -1,17 +1,17 @@
-import { Skeleton } from "@/components/ui/skeleton"
+// import { Skeleton } from "@/components/ui/skeleton"
-import { Card } from "@/components/ui/card"
+// import { Card } from "@/components/ui/card"
-import { CardContent } from "@/components/ui/card"
+// import { CardContent } from "@/components/ui/card"
 
-export default function CategorySkeleton() {
+// export default function CategorySkeleton() {
-  return (
+//   return (
-    <Card className="overflow-hidden rounded-xl">
+//     <Card className="overflow-hidden rounded-xl">
-      {/* Image */}
+//       {/* Image */}
-      <Skeleton className="w-full h-36 bg-gray-200" />
+//       <Skeleton className="w-full h-36 bg-gray-200" />
 
-      {/* Name */}
+//       {/* Name */}
-      <CardContent className="py-2">
+//       <CardContent className="py-2">
-        <Skeleton className="h-4 w-3/4 bg-gray-200" />
+//         <Skeleton className="h-4 w-3/4 bg-gray-200" />
-      </CardContent>
+//       </CardContent>
-    </Card>
+//     </Card>
-  )
+//   )
-}
+// }

features/collections/components/CollectionFilters.tsx

@@ -107,7 +107,7 @@ export default function CollectionFilters({
         }}
       />
 
-      <Button variant="outline" className="w-full rounded-lg cursor-pointer" onClick={onReset}>
+      <Button variant="outline" className="w-full rounded-lg cursor-pointer mb-6" onClick={onReset}>
         {translations.reset}
       </Button>
     </div>

features/collections/components/CollectionPageClient.tsx

@@ -2,16 +2,18 @@
 
 import { useEffect, useState, useMemo, useCallback } from "react";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { useTranslations } from "next-intl";
+import { Skeleton } from "@/components/ui/skeleton";
-import type { Product } from "@/lib/types/api";
-import CollectionFilters from "./CollectionFilters";
-import CollectionProductsGrid from "./CollectionProductsGrid";
-import CollectionFiltersSheet from "./CollectionFiltersSheet";
 import {
   useCollections,
   useCollectionFilters,
   useFilteredCollectionProducts,
 } from "@/features/collections/hooks/useCollections";
+import { useTranslations } from "next-intl";
+import type { Product } from "@/lib/types/api";
+import CollectionFilters from "./CollectionFilters";
+import CollectionProductsGrid from "./CollectionProductsGrid";
+import CollectionFiltersSheet from "./CollectionFiltersSheet";
+import ErrorPage from "@/components/ErrorPage";
 
 interface CollectionPageClientProps {
   params: { locale: string; slug: string };
@@ -24,8 +26,11 @@ export default function CollectionPageClient({
   const t = useTranslations();
   const [isSheetOpen, setIsSheetOpen] = useState(false);
 
-  const { data: collectionsData, isLoading: collectionsLoading } =
+  const {
-    useCollections();
+    data: collectionsData,
+    isLoading: collectionsLoading,
+    isError: collectionsError,
+  } = useCollections();
 
   const selectedCollection = useMemo(() => {
     if (!collectionsData || !slug) return null;
@@ -35,13 +40,21 @@ export default function CollectionPageClient({
   // State management
   const [currentPage, setCurrentPage] = useState(1);
   const [allProducts, setAllProducts] = useState<Product[]>([]);
-  const [priceSort, setPriceSort] = useState<"none" | "lowToHigh" | "highToLow">("none");
+  const [priceSort, setPriceSort] = useState<
+    "none" | "lowToHigh" | "highToLow"
+  >("none");
   const [priceRange, setPriceRange] = useState<[number, number]>([0, 10000]);
   const [selectedBrands, setSelectedBrands] = useState<Set<number>>(new Set());
-  const [selectedCategories, setSelectedCategories] = useState<Set<number>>(new Set());
+  const [selectedCategories, setSelectedCategories] = useState<Set<number>>(
+    new Set()
+  );
 
   // Fetch filters
-  const { data: filtersData } = useCollectionFilters(selectedCollection?.id, {
+  const {
+    data: filtersData,
+    isLoading: filtersLoading,
+    isError: filtersError,
+  } = useCollectionFilters(selectedCollection?.id, {
     enabled: !!selectedCollection,
   });
 
@@ -60,19 +73,18 @@ export default function CollectionPageClient({
       params.categories = Array.from(selectedCategories);
     }
 
-    if (priceRange[0] > 0) {
+    params.min_price = priceRange[0];
-      params.min_price = priceRange[0];
+    params.max_price = priceRange[1];
-    }
-
-    if (priceRange[1] < 10000) {
-      params.max_price = priceRange[1];
-    }
 
     return params;
   }, [currentPage, selectedBrands, selectedCategories, priceRange]);
 
   // Fetch filtered products
-  const { data: productsData, isFetching } = useFilteredCollectionProducts(
+  const {
+    data: productsData,
+    isFetching,
+    isError: productsError,
+  } = useFilteredCollectionProducts(
     selectedCollection?.id?.toString() || "",
     filterParams,
     { enabled: !!selectedCollection }
@@ -97,14 +109,20 @@ export default function CollectionPageClient({
         if (currentPage === 1) {
           return productsData.data;
         }
+
         const existingIds = new Set(prev.map((p) => p.id));
         const newProducts = productsData.data.filter(
           (p: Product) => !existingIds.has(p.id)
         );
+
+        if (newProducts.length === 0) {
+          return prev;
+        }
+
         return [...prev, ...newProducts];
       });
     }
-  }, [productsData, currentPage]);
+  }, [productsData?.data, currentPage]);
 
   const hasMore = useMemo(() => {
     return !!productsData?.pagination?.next_page_url;
@@ -115,6 +133,7 @@ export default function CollectionPageClient({
     setCurrentPage((prev) => prev + 1);
   }, [hasMore, isFetching]);
 
+  // Client-side sorting
   const sortedProducts = useMemo(() => {
     const products = [...allProducts];
     if (priceSort === "lowToHigh") {
@@ -146,7 +165,9 @@ export default function CollectionPageClient({
   const handleCategoryToggle = useCallback((categoryId: number) => {
     setSelectedCategories((prev) => {
       const newSet = new Set(prev);
-      newSet.has(categoryId) ? newSet.delete(categoryId) : newSet.add(categoryId);
+      newSet.has(categoryId)
+        ? newSet.delete(categoryId)
+        : newSet.add(categoryId);
       return newSet;
     });
     setCurrentPage(1);
@@ -191,9 +212,63 @@ export default function CollectionPageClient({
     [t]
   );
 
+  // ERROR STATE
+  if (collectionsError || productsError || filtersError) {
+    return <ErrorPage />;
+  }
 
-  if (!selectedCollection)
+  // LOADING STATE
+  if (collectionsLoading) {
+    return (
+      <div className="flex flex-col mx-auto max-w-[1504px] px-2 md:px-4 lg:px-6 pb-12">
+        {/* Title Skeleton */}
+        <Skeleton className="h-16 w-full rounded-t-lg mb-0 bg-white" />
+
+        <div className="flex p-2 md:p-4 gap-4 bg-white rounded-b-lg mt-0">
+          {/* Desktop Filters Skeleton */}
+          <div className="hidden sm:block w-[280px] shrink-0 border-r px-4 space-y-6">
+            <Skeleton className="h-8 w-32" />
+            <div className="space-y-2">
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+            </div>
+            <Skeleton className="h-8 w-32" />
+            <div className="space-y-2">
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+            </div>
+            <Skeleton className="h-8 w-32" />
+            <div className="space-y-2">
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+            </div>
+            <Skeleton className="h-32 w-full" />
+            <Skeleton className="h-10 w-full rounded-lg" />
+          </div>
+
+          {/* Products Grid Skeleton */}
+          <div className="flex-1">
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
+              {Array.from({ length: 8 }).map((_, i) => (
+                <div key={i} className="space-y-2">
+                  <Skeleton className="w-full aspect-square rounded-lg" />
+                  <Skeleton className="h-4 w-3/4" />
+                  <Skeleton className="h-6 w-1/2" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // COLLECTION NOT FOUND
+  if (!selectedCollection) {
     return <div className="text-center py-8">{t("collection_not_found")}</div>;
+  }
 
   return (
     <div className="flex flex-col mx-auto max-w-[1504px] px-2 md:px-4 lg:px-6 pb-12">
@@ -201,23 +276,47 @@ export default function CollectionPageClient({
         {selectedCollection.name}
       </h2>
 
-      <div className="flex  p-2 md:p-4 gap-4 bg-white rounded-b-lg">
+      <div className="flex p-2 md:p-4 gap-4 bg-white rounded-b-lg">
         {/* Desktop Filters Sidebar */}
         <div className="hidden sm:block w-[280px] shrink-0 border-r px-4">
           <ScrollArea className="h-auto">
-            <CollectionFilters
+            {filtersLoading ? (
-              filtersData={filtersData}
+              <div className="space-y-6">
-              selectedBrands={selectedBrands}
+                <div className="space-y-2">
-              selectedCategories={selectedCategories}
+                  <Skeleton className="h-6 w-24" />
-              priceSort={priceSort}
+                  <Skeleton className="h-5 w-full" />
-              priceRange={priceRange}
+                  <Skeleton className="h-5 w-full" />
-              onBrandToggle={handleBrandToggle}
+                  <Skeleton className="h-5 w-full" />
-              onCategoryToggle={handleCategoryToggle}
+                </div>
-              onPriceSortChange={handlePriceSortChange}
+                <div className="space-y-2">
-              onPriceChange={handlePriceChange}
+                  <Skeleton className="h-6 w-24" />
-              onReset={resetFilters}
+                  <Skeleton className="h-5 w-full" />
-              translations={filterTranslations}
+                  <Skeleton className="h-5 w-full" />
-            />
+                </div>
+                <div className="space-y-2">
+                  <Skeleton className="h-6 w-24" />
+                  <Skeleton className="h-5 w-full" />
+                  <Skeleton className="h-5 w-full" />
+                  <Skeleton className="h-5 w-full" />
+                </div>
+                <Skeleton className="h-32 w-full" />
+                <Skeleton className="h-10 w-full rounded-lg" />
+              </div>
+            ) : (
+              <CollectionFilters
+                filtersData={filtersData}
+                selectedBrands={selectedBrands}
+                selectedCategories={selectedCategories}
+                priceSort={priceSort}
+                priceRange={priceRange}
+                onBrandToggle={handleBrandToggle}
+                onCategoryToggle={handleCategoryToggle}
+                onPriceSortChange={handlePriceSortChange}
+                onPriceChange={handlePriceChange}
+                onReset={resetFilters}
+                translations={filterTranslations}
+              />
+            )}
           </ScrollArea>
         </div>
 
@@ -227,6 +326,7 @@ export default function CollectionPageClient({
             products={sortedProducts}
             hasMore={hasMore}
             onLoadMore={loadMoreData}
+            isFetching={isFetching}
             translations={{
               loading: t("common.loading"),
               no_results: t("no_results"),
@@ -242,19 +342,43 @@ export default function CollectionPageClient({
         filterLabel={t("filter")}
         closeLabel={t("close")}
       >
-        <CollectionFilters
+        {filtersLoading ? (
-          filtersData={filtersData}
+          <div className="space-y-6">
-          selectedBrands={selectedBrands}
+            <div className="space-y-2">
-          selectedCategories={selectedCategories}
+              <Skeleton className="h-6 w-24" />
-          priceSort={priceSort}
+              <Skeleton className="h-5 w-full" />
-          priceRange={priceRange}
+              <Skeleton className="h-5 w-full" />
-          onBrandToggle={handleBrandToggle}
+              <Skeleton className="h-5 w-full" />
-          onCategoryToggle={handleCategoryToggle}
+            </div>
-          onPriceSortChange={handlePriceSortChange}
+            <div className="space-y-2">
-          onPriceChange={handlePriceChange}
+              <Skeleton className="h-6 w-24" />
-          onReset={resetFilters}
+              <Skeleton className="h-5 w-full" />
-          translations={filterTranslations}
+              <Skeleton className="h-5 w-full" />
-        />
+            </div>
+            <div className="space-y-2">
+              <Skeleton className="h-6 w-24" />
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+              <Skeleton className="h-5 w-full" />
+            </div>
+            <Skeleton className="h-32 w-full" />
+            <Skeleton className="h-10 w-full rounded-lg" />
+          </div>
+        ) : (
+          <CollectionFilters
+            filtersData={filtersData}
+            selectedBrands={selectedBrands}
+            selectedCategories={selectedCategories}
+            priceSort={priceSort}
+            priceRange={priceRange}
+            onBrandToggle={handleBrandToggle}
+            onCategoryToggle={handleCategoryToggle}
+            onPriceSortChange={handlePriceSortChange}
+            onPriceChange={handlePriceChange}
+            onReset={resetFilters}
+            translations={filterTranslations}
+          />
+        )}
       </CollectionFiltersSheet>
     </div>
   );

features/collections/components/CollectionProductsGrid.tsx

@@ -5,6 +5,7 @@ import type { Product } from "@/lib/types/api";
 interface CollectionProductsGridProps {
   products: Product[];
   hasMore: boolean;
+  isFetching?: boolean;
   onLoadMore: () => void;
   translations: {
     loading: string;
@@ -16,9 +17,10 @@ export default function CollectionProductsGrid({
   products,
   hasMore,
   onLoadMore,
+  isFetching = false,
   translations,
 }: CollectionProductsGridProps) {
-  if (products.length === 0) {
+  if (products.length === 0 && !isFetching) {
     return (
       <div className="text-center py-8 text-gray-500">
         {translations.no_results}
@@ -35,9 +37,17 @@ export default function CollectionProductsGrid({
       style={{ overflow: "visible" }}
       loader={
         <div className="flex justify-center py-4">
-          <div>{translations.loading}</div>
+          <div className="flex items-center gap-2">
+            <div className="w-5 h-5 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" />
+            <span>{translations.loading}</span>
+          </div>
         </div>
       }
+      endMessage={
+        products.length > 0 && !hasMore ? (
+          <div className="text-center py-4 text-gray-500 text-sm"></div>
+        ) : null
+      }
     >
       <div className="bg-white rounded-lg grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
         {products.map((product) => (
@@ -55,6 +65,18 @@ export default function CollectionProductsGrid({
           />
         ))}
       </div>
+
+      {isFetching && products.length === 0 && (
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 mt-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="animate-pulse">
+              <div className="bg-gray-200 h-48 rounded-lg mb-2" />
+              <div className="bg-gray-200 h-4 rounded w-3/4 mb-2" />
+              <div className="bg-gray-200 h-4 rounded w-1/2" />
+            </div>
+          ))}
+        </div>
+      )}
     </InfiniteScroll>
   );
 }

features/favorites/hooks/useFavorites.ts

@@ -27,6 +27,7 @@ async function fetchAllFavorites(): Promise<Favorite[]> {
   const allFavorites: Favorite[] = [];
   let currentPage = 1;
   let hasMorePages = true;
+  let lastError: Error | null = null;
 
   while (hasMorePages) {
     try {
@@ -37,7 +38,6 @@ async function fetchAllFavorites(): Promise<Favorite[]> {
       const favorites = transformFavoritesResponse(response.data);
       allFavorites.push(...favorites);
 
-      // Check pagination
       const pagination = response.data?.pagination;
       if (pagination?.next_page_url) {
         currentPage++;
@@ -45,11 +45,22 @@ async function fetchAllFavorites(): Promise<Favorite[]> {
         hasMorePages = false;
       }
     } catch (error) {
-      // If pagination not supported, return what we have
+    
+      if (currentPage === 1) {
+        throw error;
+      }
+      
+      
+      lastError = error as Error;
       hasMorePages = false;
     }
   }
 
+  
+  if (allFavorites.length === 0 && lastError) {
+    throw lastError;
+  }
+
   return allFavorites;
 }
 

features/home/components/CategoryGrid.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { Card, CardContent } from "@/components/ui/card";
 import type { Category } from "@/lib/types/api";
+import { Skeleton } from "@/components/ui/skeleton";
 
 type Props = {
   categories: Category[] | undefined;
@@ -34,11 +35,11 @@ export default function CategoryGrid({
     return (
       <section className="bg-white rounded-2xl shadow-sm p-6">
         <h2 className="text-xl font-semibold mb-4">{title}</h2>
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
-          {Array.from({ length: 6 }).map((_, i) => (
+          {Array.from({ length: 10 }).map((_, i) => (
             <div key={i} className="space-y-2">
-              <div className="w-full h-36 bg-gray-200 rounded-lg animate-pulse" />
+              <Skeleton className="w-full h-36 rounded-lg" />
-              <div className="h-4 bg-gray-200 rounded w-full animate-pulse" />
+              <Skeleton className="h-4 w-full" />
             </div>
           ))}
         </div>

features/home/components/HomePage.tsx

@@ -5,6 +5,7 @@ import InfiniteScroll from "react-infinite-scroll-component";
 import HeroCarousel from "./Carousel";
 import CategoryGrid from "./CategoryGrid";
 import CollectionSection from "./ProductGrid";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   useCategories,
   useCarousels,
@@ -49,8 +50,12 @@ export default function HomePage() {
 
   return (
     <div className="px-2 md:px-4 lg:px-6 pt-4 pb-12 space-y-8 max-w-[1504px] mx-auto">
-      {!carouselsLoading && carouselItems.length > 0 && (
+      {carouselsLoading ? (
-        <HeroCarousel items={carouselItems} />
+        <section className=" bg-white rounded-2xl overflow-hidden">
+          <Skeleton className="w-full h-[200px] sm:h-[300px] md:h-[496px]" />
+        </section>
+      ) : (
+        carouselItems.length > 0 && <HeroCarousel items={carouselItems} />
       )}
 
       <CategoryGrid
@@ -71,13 +76,16 @@ export default function HomePage() {
         <div className="space-y-8">
           {Array.from({ length: 3 }).map((_, i) => (
             <section key={i} className="bg-white rounded-2xl shadow-sm p-6">
-              <div className="h-8 bg-gray-200 rounded w-48 mb-4 animate-pulse" />
+              <div className="flex items-center justify-between mb-4">
-              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                <Skeleton className="h-8 w-48" />
-                {Array.from({ length: 5 }).map((_, j) => (
+                <Skeleton className="h-6 w-6 rounded-full" />
+              </div>
+              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
+                {Array.from({ length: 10 }).map((_, j) => (
                   <div key={j} className="space-y-2">
-                    <div className="w-full h-[260px] bg-gray-200 rounded-xl animate-pulse" />
+                    <Skeleton className="w-full h-[260px] rounded-xl" />
-                    <div className="h-4 bg-gray-200 rounded w-3/4 animate-pulse" />
+                    <Skeleton className="h-4 w-3/4 mx-2" />
-                    <div className="h-6 bg-gray-200 rounded w-1/2 animate-pulse" />
+                    <Skeleton className="h-6 w-1/2 mx-2" />
                   </div>
                 ))}
               </div>

features/home/components/ProductCard.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useRef, useCallback, MouseEvent } from "react";
 import { useRouter } from "next/navigation";
-import { Heart, ShoppingCart, Loader2, Plus, Minus, AlertTriangle } from "lucide-react";
+import { Heart, ShoppingCart, Plus, Minus, AlertTriangle } from "lucide-react";
 import { toast } from "sonner";
 import {
   Carousel,
@@ -377,8 +377,8 @@ export default function ProductCard({
                 >
                   {isSyncing ? (
                     <>
-                      <Loader2 className="h-4 w-4 animate-spin" />
+                      
-                      Adding...
+                      {t("adding")}
                     </>
                   ) : (
                     <>
@@ -400,9 +400,6 @@ export default function ProductCard({
                   </Button>
                   <div className="flex-1 text-center font-semibold text-sm border rounded-lg h-9 flex items-center justify-center bg-white relative">
                     {localQuantity}
-                    {isSyncing && (
-                      <Loader2 className="h-3 w-3 animate-spin absolute -top-1 -right-1 text-blue-500" />
-                    )}
                   </div>
                   <Button
                     variant="outline"

features/home/components/ProductGrid.tsx

@@ -4,6 +4,7 @@ import { ChevronRight } from "lucide-react";
 import ProductCard from "@/features/home/components/ProductCard";
 import { useCollectionProducts } from "@/features/collections/hooks/useCollections";
 import type { Collection } from "@/lib/types/api";
+import { Skeleton } from "@/components/ui/skeleton";
 
 type Props = {
   collection: Collection;
@@ -22,24 +23,19 @@ export default function CollectionSection({ collection, locale }: Props) {
     router.push(`/collections/${collection.slug}`);
   };
 
-  // Hide section if no products
-  if (!isLoading && (!productsData?.data || productsData.data.length === 0)) {
-    return null;
-  }
-
   if (isLoading) {
     return (
       <section className="bg-white rounded-2xl shadow-sm p-6">
         <div className="flex items-center justify-between mb-4">
-          <div className="h-8 w-48 bg-gray-200 rounded animate-pulse" />
+          <Skeleton className="h-8 w-48" />
-          <div className="h-6 w-6 bg-gray-200 rounded-full animate-pulse" />
+          <Skeleton className="h-6 w-6 rounded-full" />
         </div>
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
-          {Array.from({ length: 5 }).map((_, i) => (
+          {Array.from({ length: 10 }).map((_, i) => (
             <div key={i} className="space-y-2">
-              <div className="w-full h-[260px] bg-gray-200 rounded-xl animate-pulse" />
+              <Skeleton className="w-full h-[260px] rounded-xl" />
-              <div className="h-4 bg-gray-200 rounded w-3/4 animate-pulse mx-2" />
+              <Skeleton className="h-4 w-3/4 mx-2" />
-              <div className="h-6 bg-gray-200 rounded w-1/2 animate-pulse mx-2" />
+              <Skeleton className="h-6 w-1/2 mx-2" />
             </div>
           ))}
         </div>
@@ -49,6 +45,11 @@ export default function CollectionSection({ collection, locale }: Props) {
 
   if (isError) return null;
 
+  // Hide section if no products
+  if (!productsData?.data || productsData.data.length === 0) {
+    return null;
+  }
+
   const displayProducts = productsData?.data.slice(0, 10) || [];
 
   return (

features/orders/components/OrderPage.tsx

@@ -29,6 +29,7 @@ import { useOrders, useCancelOrder } from "@/lib/hooks";
 import { useTranslations } from "next-intl";
 import type { Order } from "@/lib/types/api";
 import EmptyOrders from "./EmptyOrders";
+import ErrorPage from "@/components/ErrorPage";
 interface OrdersPageClientProps {
   locale: string;
 }
@@ -161,30 +162,67 @@ export default function OrdersPageClient({ locale }: OrdersPageClientProps) {
 
   if (isLoading) {
     return (
-      <div className=" mx-auto p-4 min-h-screen">
+      <div className="mx-auto p-2 lg:p-6 md:p-4 mb-16 min-h-screen">
-        <h1 className="text-3xl font-bold mb-6">{t("my_orders")}</h1>
+        <h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-6">
+          {t("my_orders")}
+        </h1>
+
+        {/* Tabs Skeleton */}
+        <div className="mb-4 md:mb-6">
+          <div className="flex gap-2 mb-4">
+            <Skeleton className="h-10 w-32 rounded-md" />
+            <Skeleton className="h-10 w-32 rounded-md" />
+          </div>
+        </div>
+
+        {/* Order Cards Skeleton */}
         <div className="space-y-4">
-          {Array.from({ length: 4 }).map((_, i) => (
+          {Array.from({ length: 3 }).map((_, i) => (
-            <Skeleton key={i} className="h-32 rounded-lg" />
+            <Card key={i} className="overflow-hidden py-2 md:py-4 lg:py-6">
+              <div className="p-2 md:p-4 mx-2 md:mx-4 rounded-lg">
+                <div className="flex items-center justify-between">
+                  {/* Left side - Order info */}
+                  <div className="flex items-center gap-4 flex-1">
+                    <Skeleton className="h-5 w-5 rounded" />
+                    <div className="space-y-2">
+                      <Skeleton className="h-5 w-32" />
+                      <Skeleton className="h-4 w-24" />
+                    </div>
+                  </div>
+
+                  {/* Right side - Status and price */}
+                  <div className="flex items-center gap-4">
+                    <div className="flex flex-col md:flex-row gap-2 items-end">
+                      <Skeleton className="h-6 w-20 rounded-full" />
+                      <Skeleton className="h-6 w-24" />
+                    </div>
+                    <Skeleton className="h-5 w-5 rounded" />
+                  </div>
+                </div>
+              </div>
+            </Card>
           ))}
         </div>
       </div>
     );
   }
 
+  if (isError) {
+    return <ErrorPage />;
+  }
   if (isError || !orders || orders.length === 0) {
-    return (
+    return <EmptyOrders />;
-    <EmptyOrders/>
-    );
   }
 
   return (
     <div className=" mx-auto p-2 lg:p-6 md:p-4 mb-16 min-h-screen">
-      <h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-6">{t("my_orders")}</h1>
+      <h1 className="text-xl md:text-2xl lg:text-3xl font-bold mb-6">
+        {t("my_orders")}
+      </h1>
 
       <Tabs defaultValue="active" className="w-full">
         <TabsList className="mb-4 md:mb-6 w-full md:w-fit gap-2 p-0">
-          <TabsTrigger value="active" >
+          <TabsTrigger value="active">
             {t("active_orders")} ({activeOrders.length})
           </TabsTrigger>
           <TabsTrigger value="completed">
@@ -327,13 +365,12 @@ function CompactOrderCard({
 
           <div className="flex items-center gap-4">
             <div className="flex flex-col md:flex-row gap-2 items-end">
-              
+              {getStatusBadge(order.status)}
-            {getStatusBadge(order.status)}
+              <div className="text-right">
-            <div className="text-right">
+                <p className="font-bold text-lg text-green-600">
-              <p className="font-bold text-lg text-green-600">
+                  {total.toFixed(2)} TMT
-                {total.toFixed(2)} TMT
+                </p>
-              </p>
+              </div>
-            </div>
             </div>
             {isExpanded ? (
               <ChevronUp className="h-5 w-5 text-gray-400" />

features/products/components/ProductPurchaseCard.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { Minus, Plus, Heart, ShoppingCart, Store, Loader2 } from "lucide-react";
+import { Minus, Plus, Heart, ShoppingCart, Store } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
@@ -131,7 +131,7 @@ export function ProductPurchaseCard({
             >
               {isSyncing ? (
                 <>
-                  <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                  
                   {t("adding")}
                 </>
               ) : (

features/products/components/ReviewModal.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Star, Send, Loader2 } from "lucide-react";
+import { Star, Send } from "lucide-react";
 import {
   Dialog,
   DialogContent,
@@ -107,7 +107,7 @@ export function ReviewModal({
           >
             {isSubmitting ? (
               <>
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                
                 {t("submitting")}
               </>
             ) : (

lib/types/api.ts

@@ -16,6 +16,8 @@ export interface Carousel {
   title: string
   image:  string
   url?: string | null
+  thumbnail: string;
+  link: string;
 }
 
 export interface Review {