render placeholder avatars while fetching mentions

src/components/mention_link/mention_link.vue

@@ -8,15 +8,20 @@
       :href="url"
       class="original"
       target="_blank"
-      v-html="content"
-    /><!-- eslint-enable vue/no-v-html -->
+    ><!-- eslint-enable vue/no-v-html -->
+      <UserAvatar
+        v-if="shouldShowAvatar"
+        class="mention-avatar"
+        :user-id="null"
+      />
+      <span v-html="content" />
+    </a>
     <UserPopover
       v-else
       :user-id="user.id"
       :disabled="!shouldShowTooltip"
     >
       <span
-        v-if="user"
         class="new"
         :style="style"
         :class="classnames"

src/components/user_avatar/user_avatar.js

@@ -12,7 +12,7 @@ const UserAvatar = {
   props: {
     // UserID of a user to show avatar of
     userId: {
-      required: true,
+      required: false, // You can pass null to just render a placeholder
       type: String,
     },
     // Use less space and use alternative roundness

src/components/user_avatar/user_avatar.vue

@@ -70,6 +70,7 @@
 
     &.-placeholder {
       background-color: var(--background);
+      border: 1px solid var(--border)
     }
   }