feat: add preloader for product page

spa/src/AppLoading.vue

@@ -1,16 +1,7 @@
 <template>
-  <div style="z-index: 99999" class="fixed top-0 left-0 w-full h-full bg-base-100">
+  <LoadingFullScreen text="Загрузка приложения..."/>
-    <div class="flex flex-col items-center justify-center h-full">
-      <span class="loading loading-infinity loading-xl"></span>
-      <h1>Загрузка приложения...</h1>
-    </div>
-  </div>
 </template>
 
 <script setup>
-const props = defineProps({
+import LoadingFullScreen from "@/components/LoadingFullScreen.vue";
-  error: Error,
-});
 </script>
-
-

spa/src/components/LoadingFullScreen.vue

@@ -0,0 +1,17 @@
+<template>
+  <div style="z-index: 99999" class="fixed top-0 left-0 w-full h-full bg-base-100">
+    <div class="flex flex-col items-center justify-center h-full">
+      <span class="loading loading-infinity loading-xl"></span>
+      <h1>{{ text }}</h1>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  text: {
+    type: String,
+    default: 'Получение данных...',
+  },
+});
+</script>

spa/src/views/Product.vue

@@ -114,6 +114,7 @@
         @close="closeFullScreen"
     />
   </div>
+  <LoadingFullScreen v-if="isLoading"/>
 </template>
 
 <script setup>
@@ -124,6 +125,8 @@ import {useCartStore} from "../stores/CartStore.js";
 import Quantity from "../components/Quantity.vue";
 import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
 import {apiFetch} from "@/utils/ftch.js";
+import FullScreenImageViewer from "@/components/FullScreenImageViewer.vue";
+import LoadingFullScreen from "@/components/LoadingFullScreen.vue";
 
 const route = useRoute();
 const productId = computed(() => route.params.id);
@@ -132,14 +135,11 @@ const cart = useCartStore();
 const quantity = ref(1);
 const error = ref('');
 const router = useRouter();
-
 const isInCart = ref(false);
 const btnText = computed(() => isInCart.value ? 'В корзине' : 'Купить');
 const isFullScreen = ref(false);
 const initialFullScreenIndex = ref(0);
-
+const isLoading = ref(false);
-import FullScreenImageViewer from "@/components/FullScreenImageViewer.vue";
-
 
 const canAddToCart = computed(() => {
   if (!product.value || product.value.options === undefined || product.value.options?.length === 0) {
@@ -210,8 +210,16 @@ onUnmounted(() => {
 });
 
 onMounted(async () => {
-  const {data} = await apiFetch(`/index.php?route=extension/tgshop/handle&api_action=product_show&id=${productId.value}`);
+  isLoading.value = true;
-  product.value = data;
+  try {
+    const {data} = await apiFetch(`/index.php?route=extension/tgshop/handle&api_action=product_show&id=${productId.value}`);
+    product.value = data;
+  } catch (error) {
+    console.error(error);
+  } finally {
+    isLoading.value = false;
+  }
+
 
   window.addEventListener('popstate', onPopState);