fix: correct back button work

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,27 +1,38 @@
 <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">
-    <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">
-      <RouterLink v-for="product in products" :key="product.id" class="group" :to="`/product/${product.id}`">
-        <div class="carousel carousel-center rounded-box" ref="carouselRef" @scroll.passive="onScroll">
-          <div v-for="(image, i) in product.images" :key="i" class="carousel-item">
-            <img :src="image.url" :alt="image.alt" loading="lazy"/>
-          </div>
-        </div>
-
-        <h3 class="mt-4 text-sm">{{ product.name }}</h3>
-        <p class="mt-1 text-lg font-medium">{{ product.price }}</p>
-      </RouterLink>
+    <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>
 
-    <NoProducts v-else/>
+    <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">
+        <RouterLink v-for="product in products" :key="product.id" class="group" :to="`/product/${product.id}`">
+          <div class="carousel carousel-center rounded-box" ref="carouselRef" @scroll.passive="onScroll">
+            <div v-for="(image, i) in product.images" :key="i" class="carousel-item">
+              <img :src="image.url" :alt="image.alt" loading="lazy"/>
+            </div>
+          </div>
+
+          <h3 class="mt-4 text-sm">{{ product.name }}</h3>
+          <p class="mt-1 text-lg font-medium">{{ product.price }}</p>
+        </RouterLink>
+      </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>