feat: add preloader for product page

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);
-
-import FullScreenImageViewer from "@/components/FullScreenImageViewer.vue";
-
+const isLoading = ref(false);
 
 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}`);
-  product.value = data;
+  isLoading.value = true;
+  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);