fixed some bugs

2025-12-23 13:32:57 +05:00
parent cdc9fa686f
commit 2b46d525f2
30 changed files with 857 additions and 260 deletions
--- a/app/[locale]/cart/page.tsx
+++ b/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: provinces = [] } = useRegions();
-  const { data: paymentTypes = [] } = usePaymentTypes();
+  const { data: cartResponse, isLoading: cartLoading, isError } = useCart();
+  const { data: provinces = [], isLoading: provincesLoading } = useRegions();
+  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>
--- a/app/[locale]/category/[slug]/page.tsx
+++ b/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`,
-    description: `Browse ${slug} products in our store`,
+    title: `${slug}${meta.suffix}`,
+    description: meta.description,
    openGraph: {
-      locale,
-      type: "website",
-      title: `${slug.charAt(0).toUpperCase() + slug.slice(1)} | E-Commerce`,
-      description: `Browse ${slug} products in our store`,
+      locale: meta.ogLocale,
+      title: `${slug}${meta.suffix}`,
+      description: meta.description,
    },
-  }
+  };
 }

 export async function generateStaticParams() {
-  const categories = ["electronics", "clothing", "home-garden"]
-  return categories.map((slug) => ({ slug }))
+  const categories = ["electronics", "clothing", "home-garden"];
+  return categories.map((slug) => ({ slug }));
 }

 export default async function CategoryPage(props: Props) {
-  const params = await props.params
-  const { slug } = params
+  const params = await props.params;
+  const { slug } = params;

-  const CategoryPageClient = (await import("../../../../features/category/components/CategoryPageClient")).default
-  return <CategoryPageClient params={params} />
+  const CategoryPageClient = (
+    await import("../../../../features/category/components/CategoryPageClient")
+  ).default;
+  return <CategoryPageClient params={params} />;
 }
--- a/app/[locale]/collections/[slug]/page.tsx
+++ b/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`,
-    description: `Browse ${slug} collection products in our store`,
+    title,
+    description,
    openGraph: {
-      locale,
      type: "website",
-      title: `${slug.charAt(0).toUpperCase() + slug.slice(1)} | E-Commerce`,
-      description: `Browse ${slug} collection products in our store`,
+      locale: meta.ogLocale,
+      title,
+      description,
    },
-  }
+  };
 }

 export async function generateStaticParams() {
-  const collections = ["new-arrivals", "best-sellers", "featured"]
-  return collections.map((slug) => ({ slug }))
+  const collections = ["new-arrivals", "best-sellers", "featured"];
+  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")
-  ).default
-  
-  return <CollectionPageClient params={params} />
-}
+    await import(
+      "../../../../features/collections/components/CollectionPageClient"
+    )
+  ).default;
+
+  return <CollectionPageClient params={params} />;
+}
--- a/app/[locale]/favorites/page.tsx
+++ b/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">
-        <h1 className="text-3xl font-bold mb-6">{t("favorite_products")}</h1>
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+      <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>
+        <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) {
-    return (
-     <EmptyFavorites/>
-    );
+  if (isError) {
+    return <ErrorPage />;
+  }
+
+  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] 
-    ">
-      <h1 className="bg-white text-3xl p-4 font-bold mb-0 pb-6">{t("favorite_products")}</h1>
+    <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>
      <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;
--- a/components/ErrorPage/index.tsx
+++ b/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)" }}
+      />
+    </>
+  );
+}
--- a/components/PageLoader/PreLoader.tsx
+++ b/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>
--- a/features/cart/components/CartItemCard.tsx
+++ b/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
--- a/features/cart/components/CartItemSkeleton.tsx
+++ b/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() {
-//   return (
-//     <Card className="p-4 rounded-xl">
-//       <div className="flex gap-4">
-//         {/* Product Image */}
-//         <Skeleton className="w-24 h-24 rounded-lg flex-shrink-0 bg-gray-200" />
+export default function CartItemSkeleton() {
+  return (
+    <Card className="p-4 shadow-none border">
+      <div className="flex flex-col sm:flex-row gap-4">
+        <div className="flex gap-4 flex-1">
+          <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>
-//   )
-// }
--- a/features/cart/components/OrderSummarySkeleton.tsx
+++ b/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>
+  );
+}
--- a/features/category/components/CategoryFilters.tsx
+++ b/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>
--- a/features/category/components/CategoryPageClient.tsx
+++ b/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 } =
-    useCategories();
+  const { 
+    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];
-    }
-
-    if (priceRange[1] < 10000) {
-      params.max_price = priceRange[1];
-    }
+    params.min_price = priceRange[0];
+    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 }
@@ -126,7 +134,7 @@ export default function CategoryPageClient({
        return [...prev, ...newProducts];
      });
    }
-  }, [productsData?.data, currentPage]); 
+  }, [productsData?.data, currentPage]);

  const hasMore = useMemo(() => {
    if (!productsData?.pagination) return false;
@@ -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]
  );

-  
-  if (!selectedCategory)
+  // ERROR STATE
+  if (categoriesError || productsError || filtersError) {
+    return <ErrorPage />;
+  }
+
+  // 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
-              filtersData={filtersData}
-              selectedBrands={selectedBrands}
-              selectedFilterCategories={selectedFilterCategories}
-              priceSort={priceSort}
-              priceRange={priceRange}
-              onBrandToggle={handleBrandToggle}
-              onCategoryToggle={handleCategoryToggle}
-              onPriceSortChange={handlePriceSortChange}
-              onPriceChange={handlePriceChange}
-              onReset={resetFilters}
-              translations={filterTranslations}
-            />
+            {filtersLoading ? (
+              <div className="space-y-6">
+                <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>
+                <div className="space-y-2">
+                  <Skeleton className="h-6 w-24" />
+                  <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>
+            ) : (
+              <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,20 +358,38 @@ export default function CategoryPageClient({
        filterLabel={t("filter")}
        closeLabel={t("close")}
      >
-        <CategoryFilters
-          filtersData={filtersData}
-          selectedBrands={selectedBrands}
-          selectedFilterCategories={selectedFilterCategories}
-          priceSort={priceSort}
-          priceRange={priceRange}
-          onBrandToggle={handleBrandToggle}
-          onCategoryToggle={handleCategoryToggle}
-          onPriceSortChange={handlePriceSortChange}
-          onPriceChange={handlePriceChange}
-          onReset={resetFilters}
-          translations={filterTranslations}
-        />
+        {filtersLoading ? (
+          <div className="space-y-6">
+            <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>
+            <div className="space-y-2">
+              <Skeleton className="h-6 w-24" />
+              <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>
+        ) : (
+          <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>
  );
-}
+}
--- a/features/category/components/CategorySkeleton.tsx
+++ b/features/category/components/CategorySkeleton.tsx
@@ -1,17 +1,17 @@
-import { Skeleton } from "@/components/ui/skeleton"
-import { Card } from "@/components/ui/card"
-import { CardContent } from "@/components/ui/card"
+// import { Skeleton } from "@/components/ui/skeleton"
+// import { Card } from "@/components/ui/card"
+// import { CardContent } from "@/components/ui/card"

-export default function CategorySkeleton() {
-  return (
-    <Card className="overflow-hidden rounded-xl">
-      {/* Image */}
-      <Skeleton className="w-full h-36 bg-gray-200" />
+// export default function CategorySkeleton() {
+//   return (
+//     <Card className="overflow-hidden rounded-xl">
+//       {/* Image */}
+//       <Skeleton className="w-full h-36 bg-gray-200" />

-      {/* Name */}
-      <CardContent className="py-2">
-        <Skeleton className="h-4 w-3/4 bg-gray-200" />
-      </CardContent>
-    </Card>
-  )
-}
+//       {/* Name */}
+//       <CardContent className="py-2">
+//         <Skeleton className="h-4 w-3/4 bg-gray-200" />
+//       </CardContent>
+//     </Card>
+//   )
+// }
--- a/features/collections/components/CollectionFilters.tsx
+++ b/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>
--- a/features/collections/components/CollectionPageClient.tsx
+++ b/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 type { Product } from "@/lib/types/api";
-import CollectionFilters from "./CollectionFilters";
-import CollectionProductsGrid from "./CollectionProductsGrid";
-import CollectionFiltersSheet from "./CollectionFiltersSheet";
+import { Skeleton } from "@/components/ui/skeleton";
 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 } =
-    useCollections();
+  const {
+    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];
-    }
-
-    if (priceRange[1] < 10000) {
-      params.max_price = priceRange[1];
-    }
+    params.min_price = priceRange[0];
+    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]
  );

- 
-  if (!selectedCollection)
+  // ERROR STATE
+  if (collectionsError || productsError || filtersError) {
+    return <ErrorPage />;
+  }
+
+  // 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
-              filtersData={filtersData}
-              selectedBrands={selectedBrands}
-              selectedCategories={selectedCategories}
-              priceSort={priceSort}
-              priceRange={priceRange}
-              onBrandToggle={handleBrandToggle}
-              onCategoryToggle={handleCategoryToggle}
-              onPriceSortChange={handlePriceSortChange}
-              onPriceChange={handlePriceChange}
-              onReset={resetFilters}
-              translations={filterTranslations}
-            />
+            {filtersLoading ? (
+              <div className="space-y-6">
+                <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>
+                <div className="space-y-2">
+                  <Skeleton className="h-6 w-24" />
+                  <Skeleton className="h-5 w-full" />
+                  <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,20 +342,44 @@ export default function CollectionPageClient({
        filterLabel={t("filter")}
        closeLabel={t("close")}
      >
-        <CollectionFilters
-          filtersData={filtersData}
-          selectedBrands={selectedBrands}
-          selectedCategories={selectedCategories}
-          priceSort={priceSort}
-          priceRange={priceRange}
-          onBrandToggle={handleBrandToggle}
-          onCategoryToggle={handleCategoryToggle}
-          onPriceSortChange={handlePriceSortChange}
-          onPriceChange={handlePriceChange}
-          onReset={resetFilters}
-          translations={filterTranslations}
-        />
+        {filtersLoading ? (
+          <div className="space-y-6">
+            <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>
+            <div className="space-y-2">
+              <Skeleton className="h-6 w-24" />
+              <Skeleton className="h-5 w-full" />
+              <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>
  );
-}
+}
--- a/features/collections/components/CollectionProductsGrid.tsx
+++ b/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>
  );
-}
+}
--- a/features/favorites/hooks/useFavorites.ts
+++ b/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;
 }

--- a/features/home/components/CategoryGrid.tsx
+++ b/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">
-          {Array.from({ length: 6 }).map((_, i) => (
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+          {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" />
-              <div className="h-4 bg-gray-200 rounded w-full animate-pulse" />
+              <Skeleton className="w-full h-36 rounded-lg" />
+              <Skeleton className="h-4 w-full" />
            </div>
          ))}
        </div>
--- a/features/home/components/HomePage.tsx
+++ b/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 && (
-        <HeroCarousel items={carouselItems} />
+      {carouselsLoading ? (
+        <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="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
-                {Array.from({ length: 5 }).map((_, j) => (
+              <div className="flex items-center justify-between mb-4">
+                <Skeleton className="h-8 w-48" />
+                <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" />
-                    <div className="h-4 bg-gray-200 rounded w-3/4 animate-pulse" />
-                    <div className="h-6 bg-gray-200 rounded w-1/2 animate-pulse" />
+                    <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>
--- a/features/home/components/ProductCard.tsx
+++ b/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"
--- a/features/home/components/ProductGrid.tsx
+++ b/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" />
-          <div className="h-6 w-6 bg-gray-200 rounded-full animate-pulse" />
+          <Skeleton className="h-8 w-48" />
+          <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">
-          {Array.from({ length: 5 }).map((_, i) => (
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
+          {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" />
-              <div className="h-4 bg-gray-200 rounded w-3/4 animate-pulse mx-2" />
-              <div className="h-6 bg-gray-200 rounded w-1/2 animate-pulse mx-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>
@@ -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 (
@@ -99,4 +100,4 @@ export default function CollectionSection({ collection, locale }: Props) {
      </div>
    </section>
  );
-}
+}
--- a/features/orders/components/OrderPage.tsx
+++ b/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">
-        <h1 className="text-3xl font-bold mb-6">{t("my_orders")}</h1>
+      <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>
+
+        {/* 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) => (
-            <Skeleton key={i} className="h-32 rounded-lg" />
+          {Array.from({ length: 3 }).map((_, i) => (
+            <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 (
-    <EmptyOrders/>
-    );
+    return <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)}
-            <div className="text-right">
-              <p className="font-bold text-lg text-green-600">
-                {total.toFixed(2)} TMT
-              </p>
-            </div>
+              {getStatusBadge(order.status)}
+              <div className="text-right">
+                <p className="font-bold text-lg text-green-600">
+                  {total.toFixed(2)} TMT
+                </p>
+              </div>
            </div>
            {isExpanded ? (
              <ChevronUp className="h-5 w-5 text-gray-400" />
--- a/features/products/components/ProductPurchaseCard.tsx
+++ b/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")}
                </>
              ) : (
--- a/features/products/components/ReviewModal.tsx
+++ b/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")}
              </>
            ) : (
--- a/lib/types/api.ts
+++ b/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 {
--- a/public/jb.webp
+++ b/public/jb.webp
--- a/public/jbl.png
+++ b/public/jbl.png
--- a/public/jbl3.webp
+++ b/public/jbl3.webp
--- a/public/jbll.png
+++ b/public/jbll.png
--- a/public/temp1.jpg
+++ b/public/temp1.jpg
--- a/public/temp2.jpg
+++ b/public/temp2.jpg