1 files changed, 25 insertions, 2 deletions
diff --git a/app/assets/javascripts/user_popovers.js b/app/assets/javascripts/user_popovers.js
index c18f4fb46cc..21368edb6af 100644
--- a/app/assets/javascripts/user_popovers.js
+++ b/app/assets/javascripts/user_popovers.js
@@ -36,6 +36,7 @@ const populateUserInfo = (user) => {
       if (userData) {
         Object.assign(user, {
           avatarUrl: userData.avatar_url,
+          bot: userData.bot,
           username: userData.username,
           name: userData.name,
           location: userData.location,
@@ -59,11 +60,33 @@ const populateUserInfo = (user) => {
 };
 
 const initializedPopovers = new Map();
+let domObservedForChanges = false;
 
-export default (elements = document.querySelectorAll('.js-user-link')) => {
+const addPopoversToModifiedTree = new MutationObserver(() => {
+  const userLinks = document?.querySelectorAll('.js-user-link, .gfm-project_member');
+
+  if (userLinks) {
+    addPopovers(userLinks); /* eslint-disable-line no-use-before-define */
+  }
+});
+
+function observeBody() {
+  if (!domObservedForChanges) {
+    addPopoversToModifiedTree.observe(document.body, {
+      subtree: true,
+      childList: true,
+    });
+
+    domObservedForChanges = true;
+  }
+}
+
+export default function addPopovers(elements = document.querySelectorAll('.js-user-link')) {
   const userLinks = Array.from(elements);
   const UserPopoverComponent = Vue.extend(UserPopover);
 
+  observeBody();
+
   return userLinks
     .filter(({ dataset }) => dataset.user || dataset.userId)
     .map((el) => {
@@ -105,4 +128,4 @@ export default (elements = document.querySelectorAll('.js-user-link')) => {
 
       return renderedPopover;
     });
-};
+}