Added loader

Author: DCzajkowski

src/Components/Lightbox.vue

@@ -17,7 +17,8 @@
                     </svg>
                 </div>
                 <div class="lightbox__image" @click.stop="">
-                    <img :src="images[index]">
+                    <slot name="loader" v-if="$slots.loader"></slot>
+                    <img :src="images[index]" @load="loaded" v-if="displayImage">
                 </div>
                 <div
                     class="lightbox__arrow lightbox__arrow--right"
@@ -35,6 +36,8 @@
 </template>
 
 <script>
+    import Vue from 'vue'
+
     export default {
         props: [
             'thumbnail',
@@ -45,6 +48,7 @@
             return {
                 visible: false,
                 index: 0,
+                displayImage: true,
             }
         },
         mounted() {
@@ -71,13 +75,22 @@
             prev() {
                 if (this.has_prev()) {
                     this.index -= 1
+                    this.tick()
                 }
             },
             next() {
                 if (this.has_next()) {
                     this.index += 1
+                    this.tick()
                 }
             },
+            tick() {
+                this.displayImage = false
+
+                Vue.nextTick(() => {
+                    this.displayImage = true
+                })
+            },
             eventListener(e) {
                 if (this.visible) {
                     switch (e.key) {
@@ -163,6 +176,7 @@
     .lightbox__image {
         flex: 1;
     }
+
     .lightbox__image img {
         width: 100%;
         height: auto !important;

src/Components/LightboxDefaultLoader.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="lightbox__default-loader">
+        <div class="lightbox__default-loader__element"></div>
+    </div>
+</template>
+
+<script>
+    export default {
+        //
+    }
+</script>
+
+<style>
+    .lightbox__default-loader {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        z-index: -1;
+    }
+
+    .lightbox__default-loader__element {
+        animation: LightboxDefaultLoaderAnimation 1s linear infinite;
+        border: 3px solid #292929;
+        border-top: 3px solid #fff;
+        border-radius: 50%;
+        height: 75px;
+        width: 75px;
+    }
+
+    @keyframes LightboxDefaultLoaderAnimation {
+        to {
+            border-top-color: #fff;
+            transform: rotate(360deg);
+        }
+    }
+</style>

src/main.js

@@ -1,10 +1,12 @@
 import LightboxComponent from './Components/Lightbox.vue'
+import LightboxDefaultLoader from './Components/LightboxDefaultLoader.vue'
 
 const Lightbox = {
     install(Vue, options = {}) {
         Vue.mixin({
             components: {
                 lightbox: LightboxComponent,
+                LightboxDefaultLoader,
             },
         });
     },