From 721c1487ba444a89a1705946efdd48f4cd6b2749 Mon Sep 17 00:00:00 2001
From: Marco La Rosa <m@lr.id.au>
Date: Sat, 26 Oct 2024 17:15:07 +1100
Subject: [PATCH] tweaking transition and layout

---
 src/index.md                             | 18 +++++++++---------
 src/vue-components/InfoPanelCarousel.vue | 10 +++++++---
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/index.md b/src/index.md
index fb06592..55fdf35 100644
--- a/src/index.md
+++ b/src/index.md
@@ -72,7 +72,7 @@ layout: home
           },
       ]"
       :auto-play="true"
-      :interval="6000"
+      :interval="8000"
       :initial-delay=0
   />
 
@@ -133,8 +133,8 @@ layout: home
       ]"
       documentation="/docs/guide/vocabulary.html"
       :auto-play="true"
-      :interval="6000"
-      :initial-delay=3000
+      :interval="8000"
+      :initial-delay=1600
   />
 
   <InfoPanelComponent>
@@ -220,8 +220,8 @@ layout: home
       ]"
       documentation="/docs/guide/transcribing-content.html"
       :auto-play="true"
-      :interval="6000"
-      :initial-delay=6000
+      :interval="8000"
+      :initial-delay=3200
   />
 
   <!-- <InfoPanelComponent  layout="rtl">
@@ -269,8 +269,8 @@ layout: home
       ]"
       documentation="/docs/guide/assistant-supported-discovery.html"
       :auto-play="true"
-      :interval="6000"
-      :initial-delay=1500
+      :interval="8000"
+      :initial-delay=4800
   />
 
   <!-- <InfoPanelComponent>
@@ -316,8 +316,8 @@ layout: home
       ]"
       documentation="/docs/guide/visualising-the-structure.html"
       :auto-play="true"
-      :interval="6000"
-      :initial-delay=4500
+      :interval="8000"
+      :initial-delay=6400
   />
 
 </div>
diff --git a/src/vue-components/InfoPanelCarousel.vue b/src/vue-components/InfoPanelCarousel.vue
index a5496fa..113b4cf 100644
--- a/src/vue-components/InfoPanelCarousel.vue
+++ b/src/vue-components/InfoPanelCarousel.vue
@@ -220,7 +220,7 @@
 
 <script setup>
 import { faBook } from "@fortawesome/free-solid-svg-icons";
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+import { ref, computed, onMounted, onBeforeUnmount, onBeforeMount } from "vue";
 
 const props = defineProps({
     panels: {
@@ -331,9 +331,13 @@ const preloadImages = () => {
     });
 };
 
-onMounted(() => {
+onBeforeMount(() => {
     preloadImages();
     smallDevice.value = window.innerWidth < 900;
+});
+
+onMounted(() => {
+    preloadImages();
     if (props.autoPlay) {
         // Set initial timeout before starting the regular interval
         setTimeout(() => {
@@ -354,7 +358,7 @@ circle {
 
 .fade-enter-active,
 .fade-leave-active {
-    transition: opacity 1s ease;
+    transition: opacity 0.7s ease;
 }
 
 .fade-enter-from,