From e62165dd5159cf694ad36eac21edf43c38c82875 Mon Sep 17 00:00:00 2001
From: Redume <Danilivasenko09@gmail.com>
Date: Mon, 19 Sep 2022 23:40:49 +0300
Subject: [PATCH] add loading bar in gallery

---
 web/src/gallery.html          | 5 ++++-
 web/static/scripts/gallery.js | 5 +++--
 web/static/style/gallery.css  | 4 ++++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/src/gallery.html b/web/src/gallery.html
index 9652cb0..0aa443a 100644
--- a/web/src/gallery.html
+++ b/web/src/gallery.html
@@ -48,7 +48,9 @@
     <header class="header-row">
     </header>
 </div>
-
+<div class="preloader">
+    <lottie-player src="https://assets4.lottiefiles.com/datafiles/a3YH0ragZcwfKHS/data.json" background="transparent" speed="1" style="width: 600px; height: 600px;" loop autoplay></lottie-player>
+</div>
 <div class="toast-container position-fixed bottom-0 end-0 p-3">
     <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="toast-header">
@@ -61,6 +63,7 @@
 </div>
 <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
 <script src="/static/scripts/gallery.js" type="application/javascript"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/web/static/scripts/gallery.js b/web/static/scripts/gallery.js
index f652c17..87903e5 100644
--- a/web/static/scripts/gallery.js
+++ b/web/static/scripts/gallery.js
@@ -23,6 +23,7 @@ const myModal = new bootstrap.Modal('#Wallpaper', {
 myModal.show()
 
 function Wallpaper(data) {
+    $(".preloader").fadeOut(0)
     for (let i = 0; i < data.length; i++) {
         if (data[i].media_type === "image") {
             $(".header-row").append(`
@@ -60,7 +61,7 @@ function Wallpaper(data) {
                         <p>Author: <strong>${data[id - 1].copyright}</strong></p>
                         <p>Date of shooting: <strong>${data[id - 1].date}</strong></p>
                         <p>Explanation: <strong>${data[id - 1].explanation}</strong></p>
-                    `
+                    `.replace("undefined", "Unknown")
                     title.innerHTML = `
                         <h5 class="modal-title">${data[id - 1].title}</h5>
                     `
@@ -89,7 +90,7 @@ function Wallpaper(data) {
                         <p>Author: <strong>${data[id - 1].copyright}</strong></p>
                         <p>Date of shooting: <strong>${data[id - 1].date}</strong></p>
                         <p>Explanation: <strong>${data[id - 1].explanation}</strong></p>
-                    `
+                    `.replace("undefined", "Unknown")
                     title.innerHTML = `
                         <h5 class="modal-title">${data[id].title}</h5>
                     `
diff --git a/web/static/style/gallery.css b/web/static/style/gallery.css
index 51b19f7..ceb8a11 100644
--- a/web/static/style/gallery.css
+++ b/web/static/style/gallery.css
@@ -19,4 +19,8 @@
 .card-img-top {
     object-fit: none;
     object-position: center;
+}
+
+lottie-player {
+    margin: 0 auto;
 }
\ No newline at end of file