Merge pull request #32 from ioaiaaii/feat/improve-image-loading

chore(deploy): bump chart appversion

Author: ioaiaaii

deploy/helm/ioaiaaii/Chart.yaml

@@ -3,7 +3,7 @@ annotations:
   licenses: Apache-2.0
 type: application
 apiVersion: v2
-appVersion: v1.1.1
+appVersion: v1.1.2
 dependencies:
   - name: common
     repository: oci://registry-1.docker.io/bitnamicharts

web/src/components/Live.vue

@@ -1,9 +1,17 @@
 <template>
   <div
-    class="relative w-full overflow-hidden bg-cover bg-center"
-    :style="{ height: 'calc(var(--vh) * 100)' }"
-    style="background-image: url('https://storage.googleapis.com/ioaiaaii-website-static-content/assets/images/live/studio_2024_3000_v1.jpg');"
+    class="relative w-full overflow-hidden bg-cover bg-center transition-opacity duration-700"
+    :class="{ 'opacity-0': !backgroundLoaded, 'opacity-100': backgroundLoaded }"
+    :style="backgroundLoaded ? { backgroundImage: `url(${backgroundUrl})`, height: 'calc(var(--vh) * 100)' } : {}"
   >
+    <!-- Hidden image to trigger loading -->
+    <img
+      :src="backgroundUrl"
+      @load="backgroundLoaded = true"
+      class="hidden"
+      alt="Background"
+    />
+
     <div class="min-h-12 h-16 sm:h-20 md:h-24 lg:h-28 xl:h-32 max-h-40"></div>
 
     <div class="relative h-full flex flex-col items-start justify-start p-4">
@@ -45,19 +53,19 @@
   </div>
 </template>
 
-
 <script>
 export default {
   data() {
     return {
-      performances: [], // Holds the fetched performances
+      performances: [],
+      backgroundUrl: 'https://storage.googleapis.com/ioaiaaii-website-static-content/assets/images/live/studio_2024_3000_v1.jpg',
+      backgroundLoaded: false, // Track if background image has loaded
     };
   },
   created() {
     this.fetchLive();
   },
   mounted() {
-    // Set the viewport height variable for mobile Safari
     const setViewportHeight = () => {
       document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
     };
@@ -69,15 +77,10 @@ export default {
       fetch('/api/v1/live')
         .then((response) => response.json())
         .then((data) => {
-          console.log('Fetched data:', data); // Debugging log to confirm data fetching
           this.performances = data;
         })
         .catch((error) => console.error('Error fetching live performances:', error));
     },
   },
 };
 </script>
-
-<style scoped>
-
-</style>

web/src/components/Releases.vue

@@ -10,13 +10,15 @@
       <div class="relative w-full overflow-hidden">
         <div class="flex transition-transform duration-500 ease-in-out"
              :style="{ transform: `translateX(-${release.currentImageIndex * 100}%)` }">
-          <img
-            v-for="(imgSrc, imgIndex) in release.image"
-            :key="imgIndex"
-            :src="imgSrc"
-            class="w-full object-cover aspect-square lg:h-screen"
-            loading="lazy"
-          />
+        <img
+          v-for="(imgSrc, imgIndex) in release.image"
+          :key="imgIndex"
+          :src="imgSrc"
+          :class="{ 'opacity-0': !release.imagesLoaded[imgIndex], 'opacity-100 transition-opacity duration-700': release.imagesLoaded[imgIndex] }"
+          @load="release.imagesLoaded.splice(imgIndex, 1, true)"
+          class="w-full object-cover aspect-square lg:h-screen"
+          loading="lazy"          
+        />
         </div>
 
         <!-- Navigation Controls -->
@@ -26,15 +28,15 @@
           class="absolute top-1/2 left-2 transform -translate-y-1/2 text-4xl lg:text-5xl text-gray-400 hover:scale-110 focus:outline-none animate-pulse"
           aria-label="Previous image"
         >
-          <
+          &#9664; <!-- Unicode for left arrow (◀) -->
         </button>
         <button
           v-if="release.image && release.image.length > 1"
           @click="nextImage(releaseIndex)"
           class="absolute top-1/2 right-2 transform -translate-y-1/2 text-4xl lg:text-5xl text-gray-400 hover:scale-110 focus:outline-none animate-pulse"
           aria-label="Next image"
         >
-          >
+          &#9654; <!-- Unicode for right arrow (▶) -->
         </button>
       </div>
 
@@ -78,14 +80,13 @@ export default {
     };
   },
   created() {
-    // Fetch releases data on component creation
     fetch('/api/v1/releases')
       .then((response) => response.json())
       .then((data) => {
-        // Initialize each release with a currentImageIndex
         this.releases = data.map(release => ({
           ...release,
-          currentImageIndex: 0, // Start with the first image
+          currentImageIndex: 0,
+          imagesLoaded: Array(release.image.length).fill(false), // Track load state for each image
         }));
       })
       .catch((error) => console.error('Error fetching releases:', error));
@@ -111,5 +112,4 @@ export default {
 </script>
 
 <style scoped>
-/* No additional custom styles required, as Tailwind classes handle the transition */
 </style>