Add latest changes from gitlab-org/gitlab@master

1 files changed, 44 insertions, 39 deletions

diff --git a/app/assets/javascripts/boards/components/board_assignee_dropdown.vue b/app/assets/javascripts/boards/components/board_assignee_dropdown.vue
index e732743905a..231cde0d24f 100644
--- a/app/assets/javascripts/boards/components/board_assignee_dropdown.vue
+++ b/app/assets/javascripts/boards/components/board_assignee_dropdown.vue
@@ -7,6 +7,7 @@ import {
   GlAvatarLabeled,
   GlAvatarLink,
   GlSearchBoxByType,
+  GlLoadingIcon,
 } from '@gitlab/ui';
 import { __, n__ } from '~/locale';
 import IssuableAssignees from '~/sidebar/components/assignees/issuable_assignees.vue';
@@ -33,6 +34,7 @@ export default {
     GlAvatarLabeled,
     GlAvatarLink,
     GlSearchBoxByType,
+    GlLoadingIcon,
   },
   data() {
     return {
@@ -144,45 +146,48 @@ export default {
           <gl-search-box-by-type v-model.trim="search" />
         </template>
         <template #items>
-          <gl-dropdown-item
-            :is-checked="selectedIsEmpty"
-            data-testid="unassign"
-            class="mt-2"
-            @click="selectAssignee()"
-            >{{ $options.i18n.unassigned }}</gl-dropdown-item
-          >
-          <gl-dropdown-divider data-testid="unassign-divider" />
-          <gl-dropdown-item
-            v-for="item in selected"
-            :key="item.id"
-            :is-checked="isChecked(item.username)"
-            @click="unselect(item.username)"
-          >
-            <gl-avatar-link>
-              <gl-avatar-labeled
-                :size="32"
-                :label="item.name"
-                :sub-label="item.username"
-                :src="item.avatarUrl || item.avatar"
-              />
-            </gl-avatar-link>
-          </gl-dropdown-item>
-          <gl-dropdown-divider v-if="!selectedIsEmpty" data-testid="selected-user-divider" />
-          <gl-dropdown-item
-            v-for="unselectedUser in unSelectedFiltered"
-            :key="unselectedUser.id"
-            :data-testid="`item_${unselectedUser.name}`"
-            @click="selectAssignee(unselectedUser)"
-          >
-            <gl-avatar-link>
-              <gl-avatar-labeled
-                :size="32"
-                :label="unselectedUser.name"
-                :sub-label="unselectedUser.username"
-                :src="unselectedUser.avatarUrl || unselectedUser.avatar"
-              />
-            </gl-avatar-link>
-          </gl-dropdown-item>
+          <gl-loading-icon v-if="$apollo.queries.participants.loading" size="lg" />
+          <template v-else>
+            <gl-dropdown-item
+              :is-checked="selectedIsEmpty"
+              data-testid="unassign"
+              class="mt-2"
+              @click="selectAssignee()"
+              >{{ $options.i18n.unassigned }}</gl-dropdown-item
+            >
+            <gl-dropdown-divider data-testid="unassign-divider" />
+            <gl-dropdown-item
+              v-for="item in selected"
+              :key="item.id"
+              :is-checked="isChecked(item.username)"
+              @click="unselect(item.username)"
+            >
+              <gl-avatar-link>
+                <gl-avatar-labeled
+                  :size="32"
+                  :label="item.name"
+                  :sub-label="item.username"
+                  :src="item.avatarUrl || item.avatar"
+                />
+              </gl-avatar-link>
+            </gl-dropdown-item>
+            <gl-dropdown-divider v-if="!selectedIsEmpty" data-testid="selected-user-divider" />
+            <gl-dropdown-item
+              v-for="unselectedUser in unSelectedFiltered"
+              :key="unselectedUser.id"
+              :data-testid="`item_${unselectedUser.name}`"
+              @click="selectAssignee(unselectedUser)"
+            >
+              <gl-avatar-link>
+                <gl-avatar-labeled
+                  :size="32"
+                  :label="unselectedUser.name"
+                  :sub-label="unselectedUser.username"
+                  :src="unselectedUser.avatarUrl || unselectedUser.avatar"
+                />
+              </gl-avatar-link>
+            </gl-dropdown-item>
+          </template>
         </template>
       </multi-select-dropdown>
     </template>