From 034b2c3bf9c09e5ea1a7c52747099a22c911febc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 24 Aug 2026 16:34:08 +0300
Subject: [PATCH] render placeholder avatars while fetching mentions

---
 src/components/mention_link/mention_link.vue | 11 ++++++++---
 src/components/user_avatar/user_avatar.js    |  2 +-
 src/components/user_avatar/user_avatar.vue   |  1 +
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 33f0d9db7..3973522b0 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/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"
diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
index b80aa8fb8..c8701fe66 100644
--- a/src/components/user_avatar/user_avatar.js
+++ b/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
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index d9e96d52d..613d224a0 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -70,6 +70,7 @@
 
     &.-placeholder {
       background-color: var(--background);
+      border: 1px solid var(--border)
     }
   }