fix: correct back button work

spa/src/App.vue

@@ -1,12 +1,15 @@
 <template>
+  <div class="app-container">
     <FullscreenViewport/>
     <router-view />
+  </div>
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
-import { useWebAppViewport } from 'vue-tg';
+import {onMounted, ref, watch} from "vue";
+import { useWebAppViewport, useBackButton } from 'vue-tg';
 import { useMiniApp, FullscreenViewport } from 'vue-tg';
+import {useRoute, useRouter} from "vue-router";
 
 const tg = useMiniApp();
 const platform = ref();
@@ -14,4 +17,28 @@ platform.value = tg.platform;
 
 const { disableVerticalSwipes } = useWebAppViewport();
 disableVerticalSwipes();
+
+const router = useRouter();
+const route = useRoute();
+const backButton = useBackButton();
+
+watch(
+    () => route.fullPath,
+    () => {
+      if (route.name === 'home') {
+        if (typeof backButton.hide === 'function') {
+          backButton.hide();
+        }
+      } else {
+        if (typeof backButton.show === 'function') {
+          backButton.show();
+          backButton.onClick(() => {
+            router.back();
+          });
+        }
+
+      }
+    },
+    { immediate: true }
+);
 </script>

spa/src/router.js

@@ -5,7 +5,7 @@ import CategoriesList from "./views/CategoriesList.vue";
 import ProductsList from "./views/ProductsList.vue";
 
 const routes = [
-    {path: '/', component: Home},
+    {path: '/', name: 'home', component: Home},
     {path: '/product/:id', component: Product},
     {path: '/categories', component: CategoriesList},
     {path: '/category/:id', component: ProductsList},

spa/src/style.css

@@ -10,8 +10,15 @@ html, body {
 }
 
 #app {
-    padding-top: env(--tg-content-safe-area-inset-top);
-    padding-bottom: env(--tg-content-safe-area-inset-bottom);
-    padding-left: env(--tg-content-safe-area-inset-left);
-    padding-right: env(--tg-content-safe-area-inset-right);
+    padding-top: var(--tg-content-safe-area-inset-top);
+    padding-bottom: var(--tg-content-safe-area-inset-bottom);
+    padding-left: var(--tg-content-safe-area-inset-left);
+    padding-right: var(--tg-content-safe-area-inset-right);
+}
+
+.app-container {
+    padding-top: var(--tg-safe-area-inset-top);
+    padding-bottom: var(--tg-safe-area-inset-bottom);
+    padding-left: var(--tg-safe-area-inset-left);
+    padding-right: var(--tg-safe-area-inset-right);
 }

spa/src/views/Home.vue

@@ -6,21 +6,13 @@
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
+import {ref} from "vue";
 
 const goodsRef = ref();
 function scrollToProducts() {
   goodsRef.value?.scrollIntoView({ behavior: 'smooth' });
 }
 
-import { useBackButton } from 'vue-tg';
 import ProductsList from "./ProductsList.vue";
 import CategoriesInline from "../components/CategoriesInline.vue";
-const backButton = useBackButton();
-
-onMounted(() => {
-  if (backButton.isVisible.value) {
-    backButton.hide();
-  }
-});
 </script>

spa/src/views/Product.vue

@@ -46,14 +46,12 @@ import {onMounted, ref} from "vue";
 import {$fetch} from "ofetch";
 import { useRoute } from 'vue-router'
 import { useRouter } from 'vue-router'
-import {useBackButton, useHapticFeedback} from 'vue-tg';
+import {useHapticFeedback} from 'vue-tg';
 const hapticFeedback = useHapticFeedback();
 
 const router = useRouter()
 const route = useRoute()
 const productId = route.params.id
-
-const id = 28;
 const product = ref([]);
 
 onMounted(async () => {
@@ -61,14 +59,6 @@ onMounted(async () => {
   product.value = data;
 });
 
-const backButton = useBackButton();
-if (typeof backButton.show === 'function') {
-  backButton.show();
-  backButton.onClick(() => {
-    router.back()
-  });
-}
-
 const carouselRef = ref();
 let lastScrollLeft = 0;
 function onScroll(e) {

spa/src/views/ProductsList.vue

@@ -1,5 +1,15 @@
 <template>
   <div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-6 lg:max-w-7xl lg:px-8">
+
+    <div v-if="isLoading" class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+      <div v-for="n in 8" :key="n" class="animate-pulse space-y-2">
+        <div class="aspect-square bg-gray-200 rounded-md"></div>
+        <div class="h-4 bg-gray-200 rounded w-3/4"></div>
+        <div class="h-4 bg-gray-200 rounded w-1/2"></div>
+      </div>
+    </div>
+
+    <template v-else>
       <h2 class="text-lg font-bold mb-5 text-center">{{ productsMeta.currentCategoryName }}</h2>
 
       <div v-if="products.length > 0" class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
@@ -16,12 +26,13 @@
       </div>
 
       <NoProducts v-else/>
+    </template>
   </div>
 </template>
 
 <script setup>
 import {onMounted, ref} from "vue";
-import {useBackButton, useHapticFeedback, useMiniApp} from 'vue-tg';
+import {useHapticFeedback} from 'vue-tg';
 import { useRouter, useRoute } from 'vue-router';
 import ftch from "../utils/ftch.js";
 import NoProducts from "../components/NoProducts.vue";
@@ -31,6 +42,7 @@ const router = useRouter();
 const route = useRoute();
 const categoryId = route.params.id;
 
+const isLoading = ref(true);
 const products = ref([]);
 const productsMeta = ref([]);
 
@@ -46,19 +58,12 @@ function onScroll(e) {
   }
 }
 
-const backButton = useBackButton();
-if (typeof backButton.show === 'function') {
-  backButton.show();
-  backButton.onClick(() => {
-    router.back()
-  });
-}
-
 onMounted(async () => {
   const {data, meta} = await ftch('products', {
     categoryId: categoryId,
   });
   productsMeta.value = meta;
   products.value = data;
+  isLoading.value = false;
 });
 </script>