From b74c32b5f2246da7154f17848e8b4b2e593f21e2 Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Sun, 8 Dec 2019 18:19:58 +0100
Subject: [PATCH] Albums: Show progress bar #15

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
---
 frontend/src/pages/album/photos.vue | 8 +++++++-
 frontend/src/pages/photos.vue       | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/album/photos.vue b/frontend/src/pages/album/photos.vue
index dae9e2e3a..1e1540ae6 100644
--- a/frontend/src/pages/album/photos.vue
+++ b/frontend/src/pages/album/photos.vue
@@ -5,7 +5,10 @@
         <p-album-search :settings="settings" :filter="filter" :filter-change="updateQuery"
                               :refresh="refresh"></p-album-search>
 
-        <v-container fluid class="pa-0">
+        <v-container fluid class="pa-4" v-if="loading">
+            <v-progress-linear color="secondary-dark"  :indeterminate="true"></v-progress-linear>
+        </v-container>
+        <v-container fluid class="pa-0" v-else>
             <p-scroll-top></p-scroll-top>
 
             <p-photo-clipboard :refresh="refresh"
@@ -55,6 +58,7 @@
                 this.filter.camera = query['camera'] ? parseInt(query['camera']) : 0;
                 this.filter.country = query['country'] ? query['country'] : '';
                 this.lastFilter = {};
+                this.loading = true;
                 this.routeName = this.$route.name;
                 this.findAlbum();
                 this.search();
@@ -84,6 +88,7 @@
                 filter: filter,
                 lastFilter: {},
                 routeName: routeName,
+                loading: true
             };
         },
         methods: {
@@ -201,6 +206,7 @@
                 const params = this.searchParams();
 
                 Photo.search(params).then(response => {
+                    this.loading = false;
                     this.results = response.models;
 
                     this.scrollDisabled = (response.models.length < this.pageSize);
diff --git a/frontend/src/pages/photos.vue b/frontend/src/pages/photos.vue
index 5d5e86cfa..54783b04f 100644
--- a/frontend/src/pages/photos.vue
+++ b/frontend/src/pages/photos.vue
@@ -5,7 +5,10 @@
         <p-photo-search :settings="settings" :filter="filter" :filter-change="updateQuery"
                         :refresh="refresh"></p-photo-search>
 
-        <v-container fluid class="pa-0">
+        <v-container fluid class="pa-4" v-if="loading">
+            <v-progress-linear color="secondary-dark"  :indeterminate="true"></v-progress-linear>
+        </v-container>
+        <v-container fluid class="pa-0" v-else>
             <p-scroll-top></p-scroll-top>
 
             <p-photo-clipboard :refresh="refresh" :selection="selection"></p-photo-clipboard>
@@ -50,6 +53,7 @@
                 this.filter.before = query['before'] ? query['before'] : '';
                 this.filter.after = query['after'] ? query['after'] : '';
                 this.lastFilter = {};
+                this.loading = true;
                 this.routeName = this.$route.name;
                 this.search();
             }
@@ -77,6 +81,7 @@
                 filter: filter,
                 lastFilter: {},
                 routeName: routeName,
+                loading: true
             };
         },
         methods: {
@@ -192,6 +197,7 @@
                 const params = this.searchParams();
 
                 Photo.search(params).then(response => {
+                    this.loading = false;
                     this.results = response.models;
 
                     this.scrollDisabled = (response.models.length < this.pageSize);