diff --git a/website/client/src/components/admin-panel/search.vue b/website/client/src/components/admin-panel/search.vue
index f80543f85c..7b2baa92d0 100644
--- a/website/client/src/components/admin-panel/search.vue
+++ b/website/client/src/components/admin-panel/search.vue
@@ -7,7 +7,7 @@
     >
       Could not find any matching users.
     </div>
-    <loading-spinner v-if="isSearching" />
+    <loading-spinner class="mx-auto mb-2" dark-color="true" v-if="isSearching" />
     <div
       v-if="users.length > 0"
       class="list-group"
@@ -72,6 +72,7 @@ export default {
     userIdentifier () {
       this.isSearching = true;
       this.$store.dispatch('adminPanel:searchUsers', { userIdentifier: this.userIdentifier }).then(users => {
+        this.isSearching = false;
         if (users.length === 1) {
           this.loadUser(users[0]._id);
         } else {
diff --git a/website/client/src/components/ui/loadingSpinner.vue b/website/client/src/components/ui/loadingSpinner.vue
index 32e60c08b1..96ee6a5993 100644
--- a/website/client/src/components/ui/loadingSpinner.vue
+++ b/website/client/src/components/ui/loadingSpinner.vue
@@ -2,6 +2,7 @@
   <div
     v-once
     class="loading-spinner"
+    :class="{'loading-spinner-purple': darkColor}"
     role="text"
     :aria-label="$t('loading')"
   >
@@ -39,6 +40,10 @@
     border-color: $white transparent transparent transparent;
   }
 
+  .loading-spinner-purple div {
+    border-color: $purple-200 transparent transparent transparent;
+  }
+
   .loading-spinner div:nth-child(1) {
     animation-delay: -0.45s;
   }
@@ -58,3 +63,16 @@
     }
   }
 </style>
+
+<script>
+
+export default {
+  props: {
+    darkColor: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+
+</script>