Merge pull request #40 from SpeciesFileGroup/development

Fix #14

src/components/Gallery/GalleryImage.global.vue

@@ -1,35 +1,29 @@
 <template>
   <div class="flex flex-col">
     <div
-      class="
-        flex
-        justify-center 
-        border
-        print:hidden
-        bg-base-0
-        border-base-muted
-      "
+      class="flex justify-center border print:hidden bg-base-0 border-base-muted"
     >
-      <div class="h-80 max-h-80 flex items-center justify-center">
-        <img
-          class="max-h-80 h-max w-100 cursor-zoom-in m-auto"
-          :src="currentImage.original"
-          @click="isImageViewerOpen = true"
-        >
-      </div>
+      <GalleryMainImage
+        :image="currentImage"
+        @open:viewer="() => (isImageViewerOpen = true)"
+      />
     </div>
     <GalleryThumbnailList
       class="pt-2 pb-2"
       :images="images"
-      @select-index="galleryIndex = $event; isImageViewerOpen = true"
+      @select-index="
+        ($event) => {
+          galleryIndex = $event
+        }
+      "
     />
   </div>
 
-  <ImageViewer 
+  <ImageViewer
     v-if="isImageViewerOpen"
     :index="galleryIndex"
     :images="images"
-    :next="galleryIndex < (props.images.length - 1)"
+    :next="galleryIndex < props.images.length - 1"
     :previous="galleryIndex > 0"
     @select-index="galleryIndex = $event"
     @next="nextImage()"
@@ -40,7 +34,8 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue'
-import GalleryThumbnailList from './GalleryThumbnailList.vue';
+import GalleryThumbnailList from './GalleryThumbnailList.vue'
+import GalleryMainImage from './GalleryMainImage.vue'
 
 const props = defineProps({
   images: {
@@ -53,12 +48,18 @@ const isImageViewerOpen = ref(false)
 const galleryIndex = ref(0)
 const currentImage = computed(() => props.images[galleryIndex.value] || {})
 
-const previousImage = () => { galleryIndex.value-- }
-const nextImage = () => { galleryIndex.value++ }
+const previousImage = () => {
+  galleryIndex.value--
+}
+const nextImage = () => {
+  galleryIndex.value++
+}
 
 watch(
-  () => props.images, 
-  () => { galleryIndex.value = 0 }, 
+  () => props.images,
+  () => {
+    galleryIndex.value = 0
+  },
   { immediate: true }
 )
-</script>
+</script>

src/components/Gallery/GalleryMainImage.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="h-80 max-h-80 flex items-center justify-center">
+    <VSpinner v-if="isLoading" />
+    <img
+      ref="imageElement"
+      class="max-h-80 h-max w-100 cursor-zoom-in m-auto"
+      :src="image.original"
+      @click="emit('open:viewer')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import VSpinnerGlobal from '../VSpinner.global.vue'
+
+const props = defineProps({
+  image: {
+    type: Object,
+    required: true
+  }
+})
+const emit = defineEmits(['open:viewer'])
+
+const isLoading = ref(false)
+const imageElement = ref(null)
+
+watch(
+  () => props.image,
+  (newVal) => {
+    if (newVal.id) {
+      isLoading.value = true
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+onMounted(() => {
+  imageElement.value.addEventListener('load', () => (isLoading.value = false))
+})
+
+onUnmounted(() => {})
+</script>