From ba7cdee9b05bbc416415e2750e37100bfbe169c1 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Tue, 18 Mar 2025 16:23:19 +0330
Subject: [PATCH] added suspense in cart layout

---
 frontend/layouts/Cart.vue | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/layouts/Cart.vue b/frontend/layouts/Cart.vue
index edc240b..08dc2b7 100644
--- a/frontend/layouts/Cart.vue
+++ b/frontend/layouts/Cart.vue
@@ -12,7 +12,9 @@ const prevPage = computed(() => route.meta.prevPage);
 
 // queries
 
-const { data: cart } = useGetCartOrders();
+const { data: cart, isPending: cartIsPending, suspense } = useGetCartOrders();
+
+await suspense();
 
 // computed
 
@@ -27,12 +29,13 @@ const hasCartItem = computed(
         dir="rtl"
     >
         <Header />
+
         <main
-            class="w-full overflow-x-hidden container flex flex-col gap-[5rem] max-w-[80vw]"
+            class="w-full overflow-x-hidden flex flex-col gap-[5rem] lg:max-w-[85vw]"
         >
-            <div class="w-full flex flex-col">
+            <div class="w-full flex flex-col container">
                 <div
-                    class="flex flex-col items-center justify-center gap-4 py-[5rem] lg:gap-0 lg:flex-row"
+                    class="flex flex-col items-center justify-center py-[3.5rem] lg:py-[5rem] gap-5 lg:gap-0 lg:flex-row"
                 >
                     <div
                         class="flex items-center justify-start w-full lg:w-3/12"
@@ -53,7 +56,7 @@ const hasCartItem = computed(
                     </div>
 
                     <h1
-                        class="w-full text-center typo-h-3 lg:w-6/12 title-large"
+                        class="w-full text-center lg:w-6/12 typo-h-5 lg:typo-h-4"
                     >
                         {{ pageTitle }}
                     </h1>
@@ -61,7 +64,7 @@ const hasCartItem = computed(
                     <div class="hidden w-3/12 shrink-0 lg:block">&nbsp;</div>
                 </div>
                 <div
-                    class="w-full flex flex-col items-center relative justify-between gap-8 lg:gap-6 lg:flex-row lg:items-start"
+                    class="w-full flex flex-col items-center relative justify-between gap-4 lg:gap-6 lg:flex-row lg:items-start"
                 >
                     <div
                         class="flex flex-col w-full gap-4 lg:gap-6 shrink-0"
@@ -69,11 +72,10 @@ const hasCartItem = computed(
                     >
                         <NuxtPage />
                     </div>
-
-                    <CartSummary v-if="hasCartItem" />
+                    <CartSummary v-if="hasCartItem && !cartIsPending" />
                 </div>
             </div>
-            <ProductsSlider title="دیگران این محصولات را هم خریده‌اند" />
+            <ProductsSlider title="دیگر محصولات" />
         </main>
         <div class="w-full flex-col flex mt-20">
             <ServiceHighlights />