From 55b9b68258ee6fcd63d92457f3febb1d8e5596f1 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 14 Jan 2021 22:19:28 +0100
Subject: [PATCH] Make sure the loading spinner is always visible at the end of
 the page

---
 src/components/input/multiselect.vue        | 16 ++++++++--------
 src/styles/components/base/multiselect.scss | 21 +++++++++++----------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/input/multiselect.vue b/src/components/input/multiselect.vue
index a64e758df..5832e554c 100644
--- a/src/components/input/multiselect.vue
+++ b/src/components/input/multiselect.vue
@@ -4,18 +4,19 @@
 		:class="{'has-search-results': searchResultsVisible}"
 		ref="multiselectRoot"
 	>
-		<div class="input-wrapper input" :class="{'has-multiple': multiple && Array.isArray(internalValue) && internalValue.length > 0}">
-			<template v-if="Array.isArray(internalValue)">
-				<template v-for="(item, key) in internalValue">
-					<slot name="tag" :item="item">
+		<div class="control" :class="{'is-loading': loading || localLoading}">
+			<div class="input-wrapper input" :class="{'has-multiple': multiple && Array.isArray(internalValue) && internalValue.length > 0}">
+				<template v-if="Array.isArray(internalValue)">
+					<template v-for="(item, key) in internalValue">
+						<slot name="tag" :item="item">
 						<span :key="`item${key}`" class="tag ml-2 mt-2">
 							{{ label !== '' ? item[label] : item }}
 							<a @click="() => remove(item)" class="delete is-small"></a>
 						</span>
-					</slot>
+						</slot>
+					</template>
 				</template>
-			</template>
-			<div class="input-loader-wrapper">
+
 				<input
 					type="text"
 					class="input"
@@ -27,7 +28,6 @@
 					ref="searchInput"
 					@focus="() => showSearchResults = true"
 				/>
-				<span class="loader is-loading" v-if="loading || localLoading"></span>
 			</div>
 		</div>
 
diff --git a/src/styles/components/base/multiselect.scss b/src/styles/components/base/multiselect.scss
index f8f40e50b..e85fe2168 100644
--- a/src/styles/components/base/multiselect.scss
+++ b/src/styles/components/base/multiselect.scss
@@ -2,6 +2,10 @@
 	width: 100%;
 	position: relative;
 
+	.control.is-loading::after {
+		top: .75rem;
+	}
+
 	&.has-search-results .input-wrapper {
 		border-radius: $radius $radius 0 0;
 		border-color: $primary !important;
@@ -23,24 +27,21 @@
 			border-color: $grey-light !important;
 		}
 
-		.input-loader-wrapper {
+		.input {
 			display: flex;
 			max-width: 100%;
 			width: 100%;
 			align-items: center;
+			border: none !important;
+			background: transparent;
+			height: auto;
 
-			.input {
-				border: none !important;
-				background: transparent;
-				height: auto;
-
-				&::placeholder {
-					font-style: normal !important;
-				}
+			&::placeholder {
+				font-style: normal !important;
 			}
 		}
 
-		&.has-multiple .input-loader-wrapper {
+		&.has-multiple .input {
 			max-width: 250px;
 
 			input {