From 3954fa00ad9eb5b63f22ce6fe4e5a531821eae5f Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Mon, 27 Mar 2023 20:48:17 -0300
Subject: [PATCH] Fix #14

---
 .../Gallery/GalleryImage.global.vue           | 49 ++++++++++---------
 src/components/Gallery/GalleryMainImage.vue   | 45 +++++++++++++++++
 2 files changed, 70 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Gallery/GalleryMainImage.vue

diff --git a/src/components/Gallery/GalleryImage.global.vue b/src/components/Gallery/GalleryImage.global.vue
index 085d724..ce0fb08 100644
--- a/src/components/Gallery/GalleryImage.global.vue
+++ b/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>
\ No newline at end of file
+</script>
diff --git a/src/components/Gallery/GalleryMainImage.vue b/src/components/Gallery/GalleryMainImage.vue
new file mode 100644
index 0000000..b8b4d55
--- /dev/null
+++ b/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>