added skeleton and middleware

frontend/pages/cart/index.vue

@@ -7,7 +7,7 @@ import useGetOrdersCart from "~/composables/api/orders/useGetOrdersCart";
 
 definePageMeta({
     layout: "cart",
-    middleware: "check-is-logged-in",
+    middleware: ["check-is-logged-in", 'check-has-cart-item'],
     pageTitle: "سبد خرید",
     prevPage: { name: "index", label: "بازگشت به خانه" },
     nextPage: { name: "cart-delivery", label: "انتخاب آدرس" },
@@ -23,12 +23,23 @@ const { data: cart, isLoading: cartIsLoading } = useGetOrdersCart();
         <div
             class="flex items-center justify-between w-full gap-3 px-5 py-4 rounded-xl bg-slate-50 border border-slate-200"
         >
-            <div class="flex items-center w-full gap-3 lg:w-1/2">
+            <Skeleton
+                v-if="cartIsLoading"
+                class="!w-36 !h-[43px] !rounded-lg"
+            />
+
+            <div v-else class="flex items-center w-full gap-3 lg:w-1/2">
                 <p class="font-semibold lg:text-lg text-black">
                     {{ cart?.items.length }} مرسوله
                 </p>
             </div>
-            <DeleteCartAllModal />
+
+            <Skeleton
+                v-if="cartIsLoading"
+                class="!w-28 !h-[43px] !rounded-full"
+            />
+
+            <DeleteCartAllModal v-else />
         </div>
 
         <ul v-if="cartIsLoading" class="w-full flex flex-col gap-4 lg:gap-6">