From 63a6b3f1801d7c9b12e792a519ffe0ec33c520b3 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 27 Jul 2021 22:33:58 +0200
Subject: [PATCH] Set loading spinner when moving a list

---
 src/components/home/navigation.vue | 15 +++++++++++++--
 src/styles/theme/navigation.scss   |  8 ++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index 188226c2d..498de9912 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -89,7 +89,13 @@
 						>
 							<transition-group type="transition" :name="!drag ? 'flip-list' : null">
 								<!-- eslint-disable vue/no-use-v-if-with-v-for,vue/no-confusing-v-for-v-if -->
-								<li v-for="l in n.lists" :key="l.id" v-if="!l.isArchived">
+								<li
+									v-for="l in n.lists"
+									:key="l.id"
+									v-if="!l.isArchived"
+									class="loader-container"
+									:class="{'is-loading': listUpdating[l.id]}"
+								>
 									<router-link
 										class="list-menu-link"
 										:class="{'router-link-exact-active': currentList.id === l.id}"
@@ -117,7 +123,7 @@
 									</router-link>
 									<list-settings-dropdown :list="l" v-if="l.id > 0"/>
 									<span class="list-setting-spacer" v-else></span>
-							</li>
+								</li>
 							</transition-group>
 						</draggable>
 					</ul>
@@ -148,6 +154,7 @@ export default {
 				animation: 100,
 				ghostClass: 'ghost',
 			},
+			listUpdating: {},
 		}
 	},
 	components: {
@@ -204,6 +211,7 @@ export default {
 			const list = listsFiltered[e.newIndex]
 			const listBefore = listsFiltered[e.newIndex - 1] ?? null
 			const listAfter = listsFiltered[e.newIndex + 1] ?? null
+			this.$set(this.listUpdating, list.id, true)
 
 			list.position = calculateItemPosition(listBefore !== null ? listBefore.position : null, listAfter !== null ? listAfter.position : null)
 
@@ -211,6 +219,9 @@ export default {
 				.catch(e => {
 					this.error(e)
 				})
+				.finally(() => {
+					this.$set(this.listUpdating, list.id, false)
+				})
 		},
 	},
 }
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index d9ee62a31..9201c350c 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -238,6 +238,14 @@
 							opacity: 1;
 						}
 					}
+
+					&.loader-container.is-loading:after {
+						width: 1.5rem;
+						height: 1.5rem;
+						top: calc(50% - .75rem);
+						left: calc(50% - .75rem);
+						border-width: 2px;
+					}
 				}
 
 				.flip-list-move {