From 715dcb01b7783ab6ffda0e9ce8d9171b6e90697d Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Tue, 11 Jun 2024 10:50:06 +0300
Subject: [PATCH] transition fix

---
 app.vue                         |  5 ---
 components/calcModels.vue       | 14 +++---
 components/calcValues.vue       |  7 ++-
 components/model/item.vue       |  8 ++--
 components/model/parametric.vue | 79 +++++++++++++++------------------
 5 files changed, 55 insertions(+), 58 deletions(-)

diff --git a/app.vue b/app.vue
index a6ebb4a..5bf283e 100644
--- a/app.vue
+++ b/app.vue
@@ -35,11 +35,6 @@ const { data: footerData } = await useFetch<ApiFooterType[]>(`${apiBase}/footer/
 const { data: social_networkData } = await useFetch<ApiSocial_networkType[]>(`${apiBase}/social_network/`)
 const { data: advData } = await useFetch<ApiAdvantageType[]>(`${apiBase}/advantage/`)
 
-const isModalOpen = useState('modal_open', () => false)
-const toggleModal = () => {
-  isModalOpen.value = !isModalOpen.value
-}
-
 const { scrollToAnchor, scrollToTop } = useAnchorScroll({
   toTop: {
     scrollOptions: {
diff --git a/components/calcModels.vue b/components/calcModels.vue
index d711656..1e5ab1f 100644
--- a/components/calcModels.vue
+++ b/components/calcModels.vue
@@ -13,13 +13,15 @@ const { hasFinishLoading, progress, items } = await useProgress()
 </script>
 <template>
     <div class="container min-w-full relative">
-        <div v-show="!hasFinishLoading"
-            class="absolute bg-neutral-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono">
-            <div class="w-200px">
-                Loading... {{ progress }} %
-                <i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
+        <Transition>
+            <div v-if="!hasFinishLoading"
+                class="absolute bg-neutral-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono">
+                <div class="w-200px">
+                    Идет загрузка... {{ progress }} %
+                    <i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
+                </div>
             </div>
-        </div>
+        </Transition>
         <TresCanvas shadows>
             <TresPerspectiveCamera :position="[8, 2, -4]" />
             <OrbitControls v-bind="controlsState" make-default />
diff --git a/components/calcValues.vue b/components/calcValues.vue
index c42d96f..66645f2 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -109,6 +109,11 @@ const calc_text = computed(() => {
     }
     return txt
 })
+
+const isModalOpen = useState('modal_open', () => false)
+const toggleModal = () => {
+    isModalOpen.value = !isModalOpen.value
+}
 </script>
 <template>
     <div class="container py-4">
@@ -166,7 +171,7 @@ const calc_text = computed(() => {
             <p>
                 <button class="not-prose" @click="toggleModal">Купить прямо сейчас</button>
             </p>
-            
+
         </form>
     </div>
 </template>
\ No newline at end of file
diff --git a/components/model/item.vue b/components/model/item.vue
index 77b21c7..bc4eb36 100644
--- a/components/model/item.vue
+++ b/components/model/item.vue
@@ -75,7 +75,9 @@ watch(props, () => {
 }, { deep: true })
 </script>
 <template>
-    <TresGroup :position="props.position || [0, 0, 0]" ref="model">
-        <primitive :object="scene.children[0]" cast-shadow receive-shadow />
-    </TresGroup>
+    <Suspense>
+        <TresGroup :position="props.position || [0, 0, 0]" ref="model">
+            <primitive :object="scene.children[0]" cast-shadow receive-shadow />
+        </TresGroup>
+    </Suspense>
 </template>
\ No newline at end of file
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index 984ba93..ff2d468 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -26,49 +26,42 @@ const pbrTexture = await useTexture({
 })
 </script>
 <template>
-    <TresGroup>
-        <Suspense>
-            <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
-                <TresMesh receive-shadow cast-shadow :translate-y="-0.25">
-                    <TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5" />
-                    <TresMeshStandardMaterial v-bind="pbrTexture" />
-                </TresMesh>
-                <ModelItem model-url="/models_one/bottom.glb"
-                    :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]" :remove-pos="true"
-                    :color="pillar_color" />
-                <ModelItem model-url="/models_one/bottom.glb" :position="[fence_section * 0.5 + pillar_size, -bSize, 0]"
-                    :remove-pos="true" :color="pillar_color" />
-                <ModelItem model-url="/models_one/verh_100.glb"
-                    :position="[-fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true"
-                    :color="pillar_color" />
-                <ModelItem model-url="/models_one/verh_100.glb"
-                    :position="[fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true"
-                    :color="pillar_color" />
-                <template v-for="(n, i) in lamelles_count">
-                    <TresGroup :position="[-fence_section * 0.5 - pillar_size, (lSize * i), 0]">
-                        <ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" :color="pillar_color" />
-                    </TresGroup>
-                </template>
-                <template v-for="(n, i) in lamelles_count">
-                    <TresGroup :position="[fence_section * 0.5 + pillar_size, (lSize * i), 0]" :scale="[-1, 1, 1]">
-                        <ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" :color="pillar_color" />
-                    </TresGroup>
-                </template>
-                <template v-for="(n, i) in lamelles_count">
-                    <TresGroup :scale-x="fence_section * 10" :position="[0, (lSize * i), 0.03]">
-                        <ModelItem model-url="/models_one/lamel_100.glb" :remove-pos="true" :color="lamelle_color" />
-                    </TresGroup>
-                </template>
-                <TresGroup :scale-x="fence_section * 10" :position="[0, lamelles_count * lSize, 0]">
-                    <ModelItem model-url="/models_one/verh_100.glb" :remove-pos="true" :color="pillar_color" />
-                </TresGroup>
-                <ModelItem model-url="/models_one/bottom.glb"
-                    :position="[-fence_section * 0.5 - pillar_size, lamelles_count * lSize, 0]" :remove-pos="true"
-                    :color="pillar_color" />
-                <ModelItem model-url="/models_one/bottom.glb"
-                    :position="[fence_section * 0.5 + pillar_size, lamelles_count * lSize, 0]" :remove-pos="true"
-                    :color="pillar_color" />
+    <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
+        <TresMesh receive-shadow cast-shadow :translate-y="-0.25">
+            <TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5" />
+            <TresMeshStandardMaterial v-bind="pbrTexture" />
+        </TresMesh>
+        <ModelItem model-url="/models_one/bottom.glb" :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]"
+            :remove-pos="true" :color="pillar_color" />
+        <ModelItem model-url="/models_one/bottom.glb" :position="[fence_section * 0.5 + pillar_size, -bSize, 0]"
+            :remove-pos="true" :color="pillar_color" />
+        <ModelItem model-url="/models_one/verh_100.glb" :position="[-fence_section * 0.5, lamelles_count * lSize, 0]"
+            :remove-pos="true" :color="pillar_color" />
+        <ModelItem model-url="/models_one/verh_100.glb" :position="[fence_section * 0.5, lamelles_count * lSize, 0]"
+            :remove-pos="true" :color="pillar_color" />
+        <template v-for="(n, i) in lamelles_count">
+            <TresGroup :position="[-fence_section * 0.5 - pillar_size, (lSize * i), 0]">
+                <ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" :color="pillar_color" />
             </TresGroup>
-        </Suspense>
+        </template>
+        <template v-for="(n, i) in lamelles_count">
+            <TresGroup :position="[fence_section * 0.5 + pillar_size, (lSize * i), 0]" :scale="[-1, 1, 1]">
+                <ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" :color="pillar_color" />
+            </TresGroup>
+        </template>
+        <template v-for="(n, i) in lamelles_count">
+            <TresGroup :scale-x="fence_section * 10" :position="[0, (lSize * i), 0.03]">
+                <ModelItem model-url="/models_one/lamel_100.glb" :remove-pos="true" :color="lamelle_color" />
+            </TresGroup>
+        </template>
+        <TresGroup :scale-x="fence_section * 10" :position="[0, lamelles_count * lSize, 0]">
+            <ModelItem model-url="/models_one/verh_100.glb" :remove-pos="true" :color="pillar_color" />
+        </TresGroup>
+        <ModelItem model-url="/models_one/bottom.glb"
+            :position="[-fence_section * 0.5 - pillar_size, lamelles_count * lSize, 0]" :remove-pos="true"
+            :color="pillar_color" />
+        <ModelItem model-url="/models_one/bottom.glb"
+            :position="[fence_section * 0.5 + pillar_size, lamelles_count * lSize, 0]" :remove-pos="true"
+            :color="pillar_color" />
     </TresGroup>
 </template>
\ No newline at end of file