Fix rendering of user popover

Popovers were flickering because mouseleave is being triggered
immediately after the popover is rendered.

app/assets/javascripts/user_popovers.js

@@ -73,9 +73,14 @@ const handleUserPopoverMouseOver = event => {
             location: userData.location,
             bio: userData.bio,
             organization: userData.organization,
+            status: userData.status,
             loaded: true,
           });
 
+          if (userData.status) {
+            return Promise.resolve();
+          }
+
           return UsersCache.retrieveStatusById(userId);
         })
         .then(status => {

app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue

@@ -51,7 +51,7 @@ export default {
 </script>
 
 <template>
-  <gl-popover :target="target" boundary="viewport" placement="top" show>
+  <gl-popover :target="target" boundary="viewport" placement="top" offset="0, 1" show>
     <div class="user-popover d-flex">
       <div class="p-1 flex-shrink-1">
         <user-avatar-image :img-src="user.avatarUrl" :size="60" css-classes="mr-2" />
@@ -90,7 +90,7 @@ export default {
             name="location"
             class="category-icon flex-shrink-0"
           />
-          <span class="ml-1">{{ user.location }}</span>
+          <span v-if="user.location" class="ml-1">{{ user.location }}</span>
           <gl-skeleton-loading
             v-if="locationIsLoading"
             :lines="1"

changelogs/unreleased/34423-user-popover-immediately-closed-when-hovering-over-certain-areas.yml

+---
+title: Fix user popover not being displayed when the user has a status message
+merge_request: 19519
+author:
+type: fixed