Improve lists page performance (#1734)

Author: joanagmaia

frontend/src/assets/scss/layout.scss

@@ -72,6 +72,14 @@ hr {
   }
 }
 
+.custom-spinner::before {
+  @apply border-2 border-gray-100 border-b-gray-900 border-x-gray-900 rounded-full h-8 w-8 absolute;
+  top: 10%;
+  left: 10%;
+  transform: translate3d(-50%, -50%, 0);
+  content: "";
+}
+
 .el-loading-spinner .path {
   stroke: #e94f2e;
 }

frontend/src/modules/activity/components/activity-list.vue

@@ -9,9 +9,12 @@
     />
     <div
       v-if="loading && !activities.length"
-      v-loading="loading"
-      class="app-page-spinner h-16 !relative !min-h-5"
-    />
+      class="h-16 !relative !min-h-5 flex justify-center items-center"
+    >
+      <div class="animate-spin w-fit">
+        <div class="custom-spinner" />
+      </div>
+    </div>
     <div v-else>
       <!-- Empty State -->
       <app-empty-state-cta

frontend/src/modules/conversation/components/conversation-list.vue

@@ -9,9 +9,12 @@
     />
     <div
       v-if="loading && !conversations.length"
-      v-loading="loading"
-      class="app-page-spinner h-16 !relative !min-h-5"
-    />
+      class="h-16 !relative !min-h-5 flex justify-center items-center"
+    >
+      <div class="animate-spin w-fit">
+        <div class="custom-spinner" />
+      </div>
+    </div>
     <div v-else>
       <!-- Empty state -->
       <app-empty-state-cta

frontend/src/modules/member/components/list/member-list-table.vue

@@ -2,9 +2,12 @@
   <div>
     <div
       v-if="loading"
-      v-loading="loading"
-      class="app-page-spinner h-16 !relative !min-h-5"
-    />
+      class="h-16 !relative !min-h-5 flex justify-center items-center"
+    >
+      <div class="animate-spin w-fit">
+        <div class="custom-spinner" />
+      </div>
+    </div>
     <div v-else>
       <!-- Empty State -->
       <app-empty-state-cta
@@ -408,10 +411,18 @@
                     class="block w-full"
                   >
                     <div class="h-full flex items-center justify-center w-full">
-                      <app-member-dropdown
-                        :member="scope.row"
-                        @merge="isMergeDialogOpen = scope.row"
-                      />
+                      <button
+                        :id="`buttonRef-${scope.row.id}`"
+                        :ref="(el) => setActionBtnsRef(el, scope.row.id)"
+                        class="el-dropdown-link btn p-1.5 rounder-md hover:bg-gray-200 text-gray-600"
+                        type="button"
+                        @click.prevent.stop="() => onActionBtnClick(scope.row)"
+                      >
+                        <i
+                          :id="`buttonRefIcon-${scope.row.id}`"
+                          class="text-xl ri-more-fill"
+                        />
+                      </button>
                     </div>
                   </router-link>
                 </template>
@@ -432,6 +443,25 @@
         </div>
       </div>
     </div>
+    <el-popover
+      ref="memberDropdownPopover"
+      placement="bottom-end"
+      popper-class="popover-dropdown"
+      :virtual-ref="actionBtnRefs[selectedActionMember?.id]"
+      trigger="click"
+      :visible="showMemberDropdownPopover"
+      virtual-triggering
+      @hide="onHide"
+    >
+      <div v-click-outside="onClickOutside">
+        <app-member-dropdown-content
+          v-if="selectedActionMember"
+          :member="selectedActionMember"
+          @merge="isMergeDialogOpen = selectedActionMember"
+          @close-dropdown="closeDropdown"
+        />
+      </div>
+    </el-popover>
     <app-member-merge-dialog v-model="isMergeDialogOpen" />
     <app-tag-popover v-model="isEditTagsDialogOpen" :member="editTagMember" @reload="fetchMembers({ reload: true })" />
   </div>
@@ -443,6 +473,7 @@ import { useRouter } from 'vue-router';
 import {
   computed, onMounted, onUnmounted, ref, defineProps, watch,
 } from 'vue';
+import { ClickOutside as vClickOutside } from 'element-plus';
 import { storeToRefs } from 'pinia';
 import { i18n } from '@/i18n';
 import AppMemberListToolbar from '@/modules/member/components/list/member-list-toolbar.vue';
@@ -456,7 +487,7 @@ import AppMemberMergeDialog from '@/modules/member/components/member-merge-dialo
 import AppTagPopover from '@/modules/tag/components/tag-popover.vue';
 import AppPagination from '@/shared/pagination/pagination.vue';
 import AppMemberBadge from '../member-badge.vue';
-import AppMemberDropdown from '../member-dropdown.vue';
+import AppMemberDropdownContent from '../member-dropdown-content.vue';
 import AppMemberIdentities from '../member-identities.vue';
 import AppMemberReach from '../member-reach.vue';
 import AppMemberEngagementLevel from '../member-engagement-level.vue';
@@ -477,6 +508,11 @@ const isMergeDialogOpen = ref(null);
 const isEditTagsDialogOpen = ref(false);
 const editTagMember = ref(null);
 
+const showMemberDropdownPopover = ref(false);
+const memberDropdownPopover = ref(null);
+const actionBtnRefs = ref({});
+const selectedActionMember = ref(null);
+
 const props = defineProps({
   hasIntegrations: {
     type: Boolean,
@@ -578,6 +614,39 @@ document.onmouseup = () => {
   isCursorDown.value = false;
 };
 
+const setActionBtnsRef = (el, id) => {
+  if (el) {
+    actionBtnRefs.value[id] = el;
+  }
+};
+
+const onActionBtnClick = (member) => {
+  if (selectedActionMember.value?.id === member.id) {
+    showMemberDropdownPopover.value = false;
+
+    setTimeout(() => {
+      selectedActionMember.value = null;
+    }, 200);
+  } else {
+    showMemberDropdownPopover.value = true;
+    selectedActionMember.value = member;
+  }
+};
+
+const closeDropdown = () => {
+  showMemberDropdownPopover.value = false;
+
+  setTimeout(() => {
+    selectedActionMember.value = null;
+  }, 200);
+};
+
+const onClickOutside = (el) => {
+  if (!el.target?.id.includes('buttonRef')) {
+    closeDropdown();
+  }
+};
+
 function handleEditTagsDialog(member) {
   isEditTagsDialogOpen.value = true;
   editTagMember.value = member;
@@ -695,9 +764,9 @@ const doExport = () => MemberService.export({
   offset: null,
 });
 
-onMounted(async () => {
+onMounted(() => {
   if (store.state.integration.count === 0) {
-    await store.dispatch('integration/doFetch');
+    store.dispatch('integration/doFetch');
   }
 });
 
@@ -746,4 +815,9 @@ export default {
 .el-table__body {
   height: 1px;
 }
+
+.popover-dropdown {
+  padding: 0.5rem !important;
+  width: fit-content !important;
+}
 </style>