From 577cdff11cbc3eed17409d44bef92c037fa5ce55 Mon Sep 17 00:00:00 2001
From: joanagmaia <joana@crowd.dev>
Date: Tue, 24 Oct 2023 15:14:05 +0100
Subject: [PATCH] Improve lists page performance (#1734)

---
 frontend/src/assets/scss/layout.scss          |   8 +
 .../activity/components/activity-list.vue     |   9 +-
 .../components/conversation-list.vue          |   9 +-
 .../components/list/member-list-table.vue     |  94 ++++-
 .../components/member-dropdown-content.vue    | 396 ++++++++++++++++++
 .../member/components/member-dropdown.vue     | 391 ++---------------
 .../modules/member/pages/member-list-page.vue |   1 +
 .../list/organization-list-table.vue          |  90 +++-
 .../organization-dropdown-content.vue         | 298 +++++++++++++
 .../components/organization-dropdown.vue      | 261 +-----------
 .../src/shared/avatar-image/avatar-image.vue  |   2 +-
 frontend/vite.config.js                       |   3 +-
 12 files changed, 924 insertions(+), 638 deletions(-)
 create mode 100644 frontend/src/modules/member/components/member-dropdown-content.vue
 create mode 100644 frontend/src/modules/organization/components/organization-dropdown-content.vue

diff --git a/frontend/src/assets/scss/layout.scss b/frontend/src/assets/scss/layout.scss
index 040d16d4ca..4e5fc3f217 100644
--- a/frontend/src/assets/scss/layout.scss
+++ b/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;
 }
diff --git a/frontend/src/modules/activity/components/activity-list.vue b/frontend/src/modules/activity/components/activity-list.vue
index 58234f0f78..217c7a4949 100644
--- a/frontend/src/modules/activity/components/activity-list.vue
+++ b/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
diff --git a/frontend/src/modules/conversation/components/conversation-list.vue b/frontend/src/modules/conversation/components/conversation-list.vue
index c77c91b04c..d1e4495994 100644
--- a/frontend/src/modules/conversation/components/conversation-list.vue
+++ b/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
diff --git a/frontend/src/modules/member/components/list/member-list-table.vue b/frontend/src/modules/member/components/list/member-list-table.vue
index 7b2a3f1ad1..538f322b9d 100644
--- a/frontend/src/modules/member/components/list/member-list-table.vue
+++ b/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>
diff --git a/frontend/src/modules/member/components/member-dropdown-content.vue b/frontend/src/modules/member/components/member-dropdown-content.vue
new file mode 100644
index 0000000000..4d6d5665bc
--- /dev/null
+++ b/frontend/src/modules/member/components/member-dropdown-content.vue
@@ -0,0 +1,396 @@
+<template>
+  <router-link
+    :to="{
+      name: 'memberEdit',
+      params: {
+        id: member.id,
+      },
+    }"
+    :class="{
+      'pointer-events-none cursor-not-allowed':
+        isEditLockedForSampleData,
+    }"
+  >
+    <button
+      class="h-10 el-dropdown-menu__item w-full mb-1"
+      :disabled="isEditLockedForSampleData"
+      type="button"
+    >
+      <i
+        class="ri-pencil-line text-base mr-2"
+      /><span class="text-xs">Edit contact</span>
+    </button>
+  </router-link>
+  <el-tooltip
+    placement="top"
+    :content="!isEnrichmentFeatureEnabled()
+      ? 'Upgrade your plan to increase your quota of available contact enrichments'
+      : 'Contact enrichment requires an associated GitHub profile or Email'"
+    :disabled="isEnrichmentDisabledForMember || isEnrichmentFeatureEnabled()"
+    popper-class="max-w-[260px]"
+  >
+    <span>
+      <button
+        class="h-10 el-dropdown-menu__item w-full mb-1"
+        :disabled="isEnrichmentActionDisabled"
+        type="button"
+        @click="handleCommand({
+          action: 'memberEnrich',
+          member,
+        })"
+      >
+        <app-svg
+          name="enrichment"
+          class="max-w-[16px] h-4"
+          color="#9CA3AF"
+        />
+        <span
+          class="ml-2 text-xs"
+          :class="{
+            'text-gray-400': isEnrichmentDisabledForMember,
+          }"
+        >{{
+          member.lastEnriched
+            ? 'Re-enrich contact'
+            : 'Enrich contact'
+        }}</span>
+      </button>
+    </span>
+  </el-tooltip>
+  <button
+    class="h-10 el-dropdown-menu__item w-full"
+    :disabled="isEditLockedForSampleData"
+    type="button"
+    @click="handleCommand({
+      action: 'memberMerge',
+      member,
+    })"
+  >
+    <i class="ri-group-line text-base mr-2" /><span
+      class="text-xs"
+    >Merge contact</span>
+  </button>
+
+  <!-- Hubspot -->
+  <el-tooltip
+    placement="top"
+    content="Upgrade your plan to create a 2-way sync with HubSpot"
+    :disabled="isHubspotFeatureEnabled"
+    popper-class="max-w-[260px]"
+  >
+    <span>
+      <button
+        v-if="!isSyncingWithHubspot"
+        class="h-10 el-dropdown-menu__item w-full"
+        :disabled="isHubspotActionDisabled"
+        type="button"
+        @click="handleCommand({
+          action: 'syncHubspot',
+          member,
+        })"
+      >
+        <app-svg name="hubspot" class="h-4 w-4 text-current" />
+        <span
+          class="text-xs pl-2"
+        >Sync with HubSpot</span>
+      </button>
+      <button
+        v-else
+        class="h-10 el-dropdown-menu__item w-full"
+        :disabled="isHubspotActionDisabled"
+        type="button"
+        @click="handleCommand({
+          action: 'stopSyncHubspot',
+          member,
+        })"
+      >
+        <app-svg name="hubspot" class="h-4 w-4 text-current" />
+        <span
+          class="text-xs pl-2"
+        >Stop sync with HubSpot</span>
+      </button>
+    </span>
+  </el-tooltip>
+
+  <button
+    v-if="!member.attributes.isTeamMember?.default"
+    class="h-10 el-dropdown-menu__item w-full"
+    :disabled="isEditLockedForSampleData"
+    type="button"
+    @click="handleCommand({
+      action: 'memberMarkAsTeamMember',
+      member,
+      value: true,
+    })"
+  >
+    <i
+      class="ri-bookmark-line text-base mr-2"
+    /><span class="text-xs">Mark as team contact</span>
+  </button>
+  <button
+    v-if="member.attributes.isTeamMember?.default"
+    class="h-10 el-dropdown-menu__item w-full"
+    :disabled="isEditLockedForSampleData"
+    type="button"
+    @click="handleCommand({
+      action: 'memberMarkAsTeamMember',
+      member,
+      value: false,
+    })"
+  >
+    <i
+      class="ri-bookmark-2-line text-base mr-2"
+    /><span class="text-xs">Unmark as team contact</span>
+  </button>
+  <button
+    v-if="!member.attributes.isBot?.default"
+    class="h-10 el-dropdown-menu__item w-full"
+    :disabled="isEditLockedForSampleData"
+    type="button"
+    @click="handleCommand({
+      action: 'memberMarkAsBot',
+      member,
+    })"
+  >
+    <i class="ri-robot-line text-base mr-2" /><span
+      class="text-xs"
+    >Mark as bot</span>
+  </button>
+  <button
+    v-if="member.attributes.isBot?.default"
+    class="h-10 el-dropdown-menu__item w-full"
+    :disabled="isEditLockedForSampleData"
+    type="button"
+    @click="handleCommand({
+      action: 'memberUnmarkAsBot',
+      member,
+    })"
+  >
+    <i class="ri-robot-line text-base mr-2" /><span
+      class="text-xs"
+    >Unmark as bot</span>
+  </button>
+  <el-divider class="border-gray-200" />
+  <button
+    class="h-10 el-dropdown-menu__item w-full"
+    :disabled="isDeleteLockedForSampleData"
+    type="button"
+    @click="handleCommand({
+      action: 'memberDelete',
+      member,
+    })"
+  >
+    <i
+      class="ri-delete-bin-line text-base mr-2"
+      :class="{
+        'text-red-500': !isDeleteLockedForSampleData,
+      }"
+    /><span
+      class="text-xs"
+      :class="{
+        'text-red-500': !isDeleteLockedForSampleData,
+      }"
+    >Delete contact</span>
+  </button>
+</template>
+
+<script setup>
+import {
+  mapActions,
+  mapGetters,
+} from '@/shared/vuex/vuex.helpers';
+import { MemberService } from '@/modules/member/member-service';
+import Message from '@/shared/message/message';
+import { MemberPermissions } from '@/modules/member/member-permissions';
+import ConfirmDialog from '@/shared/dialog/confirm-dialog';
+import AppSvg from '@/shared/svg/svg.vue';
+import { useMemberStore } from '@/modules/member/store/pinia';
+import { CrowdIntegrations } from '@/integrations/integrations-config';
+import { HubspotEntity } from '@/integrations/hubspot/types/HubspotEntity';
+import { HubspotApiService } from '@/integrations/hubspot/hubspot.api.service';
+import { isEnrichmentFeatureEnabled } from '@/modules/member/member-enrichment';
+import { FeatureFlag, FEATURE_FLAGS } from '@/utils/featureFlag';
+import { useStore } from 'vuex';
+import { useRoute } from 'vue-router';
+import { computed } from 'vue';
+
+const emit = defineEmits(['merge', 'closeDropdown']);
+const props = defineProps({
+  member: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const store = useStore();
+const route = useRoute();
+
+const { currentUser, currentTenant } = mapGetters('auth');
+const { doFind, doEnrich } = mapActions('member');
+
+const memberStore = useMemberStore();
+const { fetchMembers } = memberStore;
+
+const isEditLockedForSampleData = computed(() => new MemberPermissions(
+  currentTenant.value,
+  currentUser.value,
+).editLockedForSampleData);
+
+const isDeleteLockedForSampleData = computed(() => new MemberPermissions(
+  currentTenant.value,
+  currentUser.value,
+).destroyLockedForSampleData);
+
+const isEnrichmentDisabledForMember = computed(() => (
+  !props.member.username?.github?.length
+            && !props.member.emails?.length
+));
+
+const isEnrichmentActionDisabled = computed(() => isEnrichmentDisabledForMember.value
+  || isEditLockedForSampleData.value || !isEnrichmentFeatureEnabled());
+
+const isSyncingWithHubspot = computed(() => props.member.attributes?.syncRemote?.hubspot || false);
+
+const isHubspotConnected = computed(() => {
+  const hubspot = CrowdIntegrations.getMappedConfig('hubspot', store);
+  const enabledFor = hubspot.settings?.enabledFor || [];
+
+  return hubspot.status === 'done' && enabledFor.includes(HubspotEntity.MEMBERS);
+});
+
+const isHubspotDisabledForMember = computed(() => props.member.emails.length === 0);
+
+const isHubspotFeatureEnabled = computed(() => FeatureFlag.isFlagEnabled(
+  FEATURE_FLAGS.hubspot,
+));
+
+const isHubspotActionDisabled = computed(() => !isHubspotConnected.value || isHubspotDisabledForMember.value || !isHubspotFeatureEnabled.value);
+
+const doDestroyWithConfirm = async (id) => {
+  try {
+    await ConfirmDialog({
+      type: 'danger',
+      title: 'Delete contact',
+      message:
+            "Are you sure you want to proceed? You can't undo this action",
+      confirmButtonText: 'Confirm',
+      cancelButtonText: 'Cancel',
+      icon: 'ri-delete-bin-line',
+    });
+
+    await MemberService.destroyAll([id]);
+
+    Message.success('Contact successfully deleted');
+
+    emit('closeDropdown');
+
+    await fetchMembers({ reload: true });
+  } catch (error) {
+    // no
+  }
+  return null;
+};
+
+const handleCommand = async (command) => {
+  if (command.action === 'memberDelete') {
+    await doDestroyWithConfirm(command.member.id);
+  } else if (
+    command.action === 'syncHubspot' || command.action === 'stopSyncHubspot'
+  ) {
+    // Hubspot
+    const sync = command.action === 'syncHubspot';
+    (sync ? HubspotApiService.syncMember(command.member.id) : HubspotApiService.stopSyncMember(command.member.id))
+      .then(() => {
+        emit('closeDropdown');
+
+        if (route.name === 'member') {
+          fetchMembers({ reload: true });
+        } else {
+          doFind(command.member.id);
+        }
+        if (sync) {
+          Message.success('Contact is now syncing with HubSpot');
+        } else {
+          Message.success('Contact syncing stopped');
+        }
+      })
+      .catch(() => {
+        Message.error('There was an error');
+      });
+  } else if (
+    command.action === 'memberMarkAsTeamMember'
+  ) {
+    await MemberService.update(command.member.id, {
+      attributes: {
+        ...command.member.attributes,
+        isTeamMember: {
+          default: command.value,
+        },
+      },
+    });
+
+    emit('closeDropdown');
+
+    await fetchMembers({ reload: true });
+
+    Message.success('Contact updated successfully');
+
+    if (route.name === 'member') {
+      await fetchMembers({ reload: true });
+    } else {
+      doFind(command.member.id);
+    }
+  } else if (command.action === 'memberMarkAsBot' || command.action === 'memberUnmarkAsBot') {
+    await MemberService.update(command.member.id, {
+      attributes: {
+        ...command.member.attributes,
+        isBot: {
+          default: command.action === 'memberMarkAsBot',
+        },
+      },
+    });
+
+    emit('closeDropdown');
+
+    await fetchMembers({ reload: true });
+    Message.success('Contact updated successfully');
+    if (route.name === 'member') {
+      await fetchMembers({ reload: true });
+    } else {
+      doFind(command.member.id);
+    }
+  } else if (command.action === 'memberMerge') {
+    emit('closeDropdown');
+    emit('merge');
+  } else if (command.action === 'memberEnrich') {
+    await doEnrich(command.member.id);
+
+    emit('closeDropdown');
+
+    await fetchMembers({ reload: true });
+  }
+
+  emit('closeDropdown');
+  return null;
+};
+
+</script>
+
+<style lang="scss" scoped>
+.el-dropdown__popper .el-dropdown__list {
+  @apply p-2;
+}
+
+// Override divider margin
+.el-divider--horizontal {
+  @apply my-2;
+}
+
+.el-dropdown-menu__item:disabled {
+  @apply cursor-not-allowed text-gray-400;
+}
+
+.el-dropdown-menu__item:disabled:hover {
+  @apply bg-white;
+}
+</style>
diff --git a/frontend/src/modules/member/components/member-dropdown.vue b/frontend/src/modules/member/components/member-dropdown.vue
index fb98c7ea72..6ff1ee8dcd 100644
--- a/frontend/src/modules/member/components/member-dropdown.vue
+++ b/frontend/src/modules/member/components/member-dropdown.vue
@@ -2,9 +2,9 @@
   <div>
     <el-dropdown
       v-if="!isReadOnly"
+      ref="dropdown"
       trigger="click"
       placement="bottom-end"
-      @command="handleCommand"
     >
       <button
         class="el-dropdown-link btn p-1.5 rounder-md hover:bg-gray-200 text-gray-600"
@@ -14,381 +14,44 @@
         <i class="text-xl ri-more-fill" />
       </button>
       <template #dropdown>
-        <router-link
-          :to="{
-            name: 'memberEdit',
-            params: {
-              id: member.id,
-            },
-          }"
-          :class="{
-            'pointer-events-none cursor-not-allowed':
-              isEditLockedForSampleData,
-          }"
-        >
-          <el-dropdown-item
-            class="h-10 mb-1"
-            :disabled="isEditLockedForSampleData"
-          >
-            <i
-              class="ri-pencil-line text-base mr-2"
-            /><span class="text-xs">Edit contact</span>
-          </el-dropdown-item>
-        </router-link>
-        <el-tooltip
-          placement="top"
-          :content="!isEnrichmentFeatureEnabled()
-            ? 'Upgrade your plan to increase your quota of available contact enrichments'
-            : 'Contact enrichment requires an associated GitHub profile or Email'"
-          :disabled="isEnrichmentDisabledForMember || isEnrichmentFeatureEnabled()"
-          popper-class="max-w-[260px]"
-        >
-          <span>
-            <el-dropdown-item
-              :command="{
-                action: 'memberEnrich',
-                member,
-              }"
-              class="h-10 mb-1"
-              :disabled="isEnrichmentActionDisabled"
-            >
-              <app-svg
-                name="enrichment"
-                class="max-w-[16px] h-4"
-                color="#9CA3AF"
-              />
-              <span
-                class="ml-2 text-xs"
-                :class="{
-                  'text-gray-400': isEnrichmentDisabledForMember,
-                }"
-              >{{
-                member.lastEnriched
-                  ? 'Re-enrich contact'
-                  : 'Enrich contact'
-              }}</span>
-            </el-dropdown-item>
-          </span>
-        </el-tooltip>
-        <el-dropdown-item
-          class="h-10"
-          :command="{
-            action: 'memberMerge',
-            member: member,
-          }"
-          :disabled="isEditLockedForSampleData"
-        >
-          <i class="ri-group-line text-base mr-2" /><span
-            class="text-xs"
-          >Merge contact</span>
-        </el-dropdown-item>
-
-        <!-- Hubspot -->
-        <el-tooltip
-          placement="top"
-          content="Upgrade your plan to create a 2-way sync with HubSpot"
-          :disabled="isHubspotFeatureEnabled"
-          popper-class="max-w-[260px]"
-        >
-          <span>
-            <el-dropdown-item
-              v-if="!isSyncingWithHubspot"
-              class="h-10"
-              :command="{
-                action: 'syncHubspot',
-                member: member,
-              }"
-              :disabled="isHubspotActionDisabled"
-            >
-              <app-svg name="hubspot" class="h-4 w-4 text-current" />
-              <span
-                class="text-xs pl-2"
-              >Sync with HubSpot</span>
-            </el-dropdown-item>
-            <el-dropdown-item
-              v-else
-              class="h-10"
-              :command="{
-                action: 'stopSyncHubspot',
-                member: member,
-              }"
-              :disabled="isHubspotActionDisabled"
-            >
-              <app-svg name="hubspot" class="h-4 w-4 text-current" />
-              <span
-                class="text-xs pl-2"
-              >Stop sync with HubSpot</span>
-            </el-dropdown-item>
-          </span>
-        </el-tooltip>
-
-        <el-dropdown-item
-          v-if="!member.attributes.isTeamMember?.default"
-          class="h-10"
-          :command="{
-            action: 'memberMarkAsTeamMember',
-            member: member,
-            value: true,
-          }"
-          :disabled="isEditLockedForSampleData"
-        >
-          <i
-            class="ri-bookmark-line text-base mr-2"
-          /><span class="text-xs">Mark as team contact</span>
-        </el-dropdown-item>
-        <el-dropdown-item
-          v-if="member.attributes.isTeamMember?.default"
-          class="h-10"
-          :command="{
-            action: 'memberMarkAsTeamMember',
-            member: member,
-            value: false,
-          }"
-          :disabled="isEditLockedForSampleData"
-        >
-          <i
-            class="ri-bookmark-2-line text-base mr-2"
-          /><span class="text-xs">Unmark as team contact</span>
-        </el-dropdown-item>
-        <el-dropdown-item
-          v-if="!member.attributes.isBot?.default"
-          class="h-10"
-          :command="{
-            action: 'memberMarkAsBot',
-            member: member,
-          }"
-          :disabled="isEditLockedForSampleData"
-        >
-          <i class="ri-robot-line text-base mr-2" /><span
-            class="text-xs"
-          >Mark as bot</span>
-        </el-dropdown-item>
-        <el-dropdown-item
-          v-if="member.attributes.isBot?.default"
-          class="h-10"
-          :command="{
-            action: 'memberUnmarkAsBot',
-            member: member,
-          }"
-          :disabled="isEditLockedForSampleData"
-        >
-          <i class="ri-robot-line text-base mr-2" /><span
-            class="text-xs"
-          >Unmark as bot</span>
-        </el-dropdown-item>
-        <el-divider class="border-gray-200" />
-        <el-dropdown-item
-          class="h-10"
-          :command="{
-            action: 'memberDelete',
-            member: member,
-          }"
-          :disabled="isDeleteLockedForSampleData"
-        >
-          <i
-            class="ri-delete-bin-line text-base mr-2"
-            :class="{
-              'text-red-500': !isDeleteLockedForSampleData,
-            }"
-          /><span
-            class="text-xs"
-            :class="{
-              'text-red-500': !isDeleteLockedForSampleData,
-            }"
-          >Delete contact</span>
-        </el-dropdown-item>
+        <app-member-dropdown-content
+          :member="member"
+          @merge="emit('merge')"
+          @close-dropdown="onDropdownClose"
+        />
       </template>
     </el-dropdown>
   </div>
 </template>
 
-<script>
-import { mapActions, mapGetters } from 'vuex';
-import { mapActions as piniaMapActions } from 'pinia';
-import { MemberService } from '@/modules/member/member-service';
-import Message from '@/shared/message/message';
+<script setup>
+import { mapGetters } from '@/shared/vuex/vuex.helpers';
 import { MemberPermissions } from '@/modules/member/member-permissions';
-import ConfirmDialog from '@/shared/dialog/confirm-dialog';
-import AppSvg from '@/shared/svg/svg.vue';
-import { useMemberStore } from '@/modules/member/store/pinia';
-import { CrowdIntegrations } from '@/integrations/integrations-config';
-import { HubspotEntity } from '@/integrations/hubspot/types/HubspotEntity';
-import { HubspotApiService } from '@/integrations/hubspot/hubspot.api.service';
-import { isEnrichmentFeatureEnabled } from '@/modules/member/member-enrichment';
-import { FeatureFlag, FEATURE_FLAGS } from '@/utils/featureFlag';
+import { computed, ref } from 'vue';
+import AppMemberDropdownContent from './member-dropdown-content.vue';
 
-export default {
-  name: 'AppMemberDropdown',
-  components: {
-    AppSvg,
-  },
-  props: {
-    member: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  emits: [
-    'merge',
-  ],
-  data() {
-    return {
-      isMergeLoading: false,
-      pair: [],
-    };
+const emit = defineEmits(['merge', 'closeDropdown']);
+defineProps({
+  member: {
+    type: Object,
+    default: () => {},
   },
+});
 
-  computed: {
-    ...mapGetters({
-      currentTenant: 'auth/currentTenant',
-      currentUser: 'auth/currentUser',
-    }),
-    isReadOnly() {
-      return (
-        new MemberPermissions(
-          this.currentTenant,
-          this.currentUser,
-        ).edit === false
-      );
-    },
-    isEditLockedForSampleData() {
-      return new MemberPermissions(
-        this.currentTenant,
-        this.currentUser,
-      ).editLockedForSampleData;
-    },
-    isDeleteLockedForSampleData() {
-      return new MemberPermissions(
-        this.currentTenant,
-        this.currentUser,
-      ).destroyLockedForSampleData;
-    },
-    isEnrichmentDisabledForMember() {
-      return (
-        !this.member.username?.github?.length
-            && !this.member.emails?.length
-      );
-    },
-    isEnrichmentActionDisabled() {
-      return this.isEnrichmentDisabledForMember || this.isEditLockedForSampleData || !this.isEnrichmentFeatureEnabled();
-    },
-    isSyncingWithHubspot() {
-      return this.member.attributes?.syncRemote?.hubspot || false;
-    },
-    isHubspotConnected() {
-      const hubspot = CrowdIntegrations.getMappedConfig('hubspot', this.$store);
-      const enabledFor = hubspot.settings?.enabledFor || [];
-      return hubspot.status === 'done' && enabledFor.includes(HubspotEntity.MEMBERS);
-    },
-    isHubspotDisabledForMember() {
-      return props.member.emails.length === 0;
-    },
-    isHubspotFeatureEnabled() {
-      return FeatureFlag.isFlagEnabled(
-        FEATURE_FLAGS.hubspot,
-      );
-    },
-    isHubspotActionDisabled() {
-      return !this.isHubspotConnected || this.isHubspotDisabledForMember || !this.isHubspotFeatureEnabled;
-    },
-  },
-  methods: {
-    ...mapActions({
-      doFind: 'member/doFind',
-      doDestroy: 'member/doDestroy',
-      doEnrich: 'member/doEnrich',
-    }),
-    ...piniaMapActions(useMemberStore, ['fetchMembers']),
-    async doDestroyWithConfirm(id) {
-      try {
-        await ConfirmDialog({
-          type: 'danger',
-          title: 'Delete contact',
-          message:
-            "Are you sure you want to proceed? You can't undo this action",
-          confirmButtonText: 'Confirm',
-          cancelButtonText: 'Cancel',
-          icon: 'ri-delete-bin-line',
-        });
-
-        await this.doDestroy(id);
-        await this.fetchMembers({ reload: true });
-      } catch (error) {
-        // no
-      }
-      return null;
-    },
-    async handleCommand(command) {
-      if (command.action === 'memberDelete') {
-        await this.doDestroyWithConfirm(command.member.id);
-      } else if (
-        command.action === 'syncHubspot' || command.action === 'stopSyncHubspot'
-      ) {
-        // Hubspot
-        const sync = command.action === 'syncHubspot';
-        (sync ? HubspotApiService.syncMember(command.member.id) : HubspotApiService.stopSyncMember(command.member.id))
-          .then(() => {
-            if (this.$route.name === 'member') {
-              this.fetchMembers({ reload: true });
-            } else {
-              this.doFind(command.member.id);
-            }
-            if (sync) {
-              Message.success('Contact is now syncing with HubSpot');
-            } else {
-              Message.success('Contact syncing stopped');
-            }
-          })
-          .catch(() => {
-            Message.error('There was an error');
-          });
-      } else if (
-        command.action === 'memberMarkAsTeamMember'
-      ) {
-        await MemberService.update(command.member.id, {
-          attributes: {
-            ...command.member.attributes,
-            isTeamMember: {
-              default: command.value,
-            },
-          },
-        });
-        await this.fetchMembers({ reload: true });
+const { currentTenant, currentUser } = mapGetters('auth');
 
-        Message.success('Contact updated successfully');
+const dropdown = ref();
 
-        if (this.$route.name === 'member') {
-          await this.fetchMembers({ reload: true });
-        } else {
-          this.doFind(command.member.id);
-        }
-      } else if (command.action === 'memberMarkAsBot' || command.action === 'memberUnmarkAsBot') {
-        await MemberService.update(command.member.id, {
-          attributes: {
-            ...command.member.attributes,
-            isBot: {
-              default: command.action === 'memberMarkAsBot',
-            },
-          },
-        });
-        await this.fetchMembers({ reload: true });
-        Message.success('Contact updated successfully');
-        if (this.$route.name === 'member') {
-          await this.fetchMembers({ reload: true });
-        } else {
-          this.doFind(command.member.id);
-        }
-      } else if (command.action === 'memberMerge') {
-        this.$emit('merge');
-      } else if (command.action === 'memberEnrich') {
-        await this.doEnrich(command.member.id);
-        await this.fetchMembers({ reload: true });
-      }
+const isReadOnly = computed(() => (
+  new MemberPermissions(
+    currentTenant.value,
+    currentUser.value,
+  ).edit === false
+));
 
-      return null;
-    },
-    isEnrichmentFeatureEnabled,
-  },
+const onDropdownClose = () => {
+  dropdown.value?.handleClose();
+  emit('closeDropdown');
 };
 </script>
 
diff --git a/frontend/src/modules/member/pages/member-list-page.vue b/frontend/src/modules/member/pages/member-list-page.vue
index d3d118e8b3..e2a4e97606 100644
--- a/frontend/src/modules/member/pages/member-list-page.vue
+++ b/frontend/src/modules/member/pages/member-list-page.vue
@@ -107,6 +107,7 @@ const membersToMergeCount = ref(0);
 
 const { listByPlatform } = mapGetters('integration');
 const { currentUser, currentTenant } = mapGetters('auth');
+
 const { doRefreshCurrentUser } = mapActions('auth');
 
 const memberFilter = ref<CrFilter | null>(null);
diff --git a/frontend/src/modules/organization/components/list/organization-list-table.vue b/frontend/src/modules/organization/components/list/organization-list-table.vue
index e55e68dd0c..043cd2fe93 100644
--- a/frontend/src/modules/organization/components/list/organization-list-table.vue
+++ b/frontend/src/modules/organization/components/list/organization-list-table.vue
@@ -3,9 +3,12 @@
     <div class="pt-3">
       <div
         v-if="isLoading"
-        v-loading="isLoading"
-        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
@@ -629,10 +632,18 @@
                       }"
                       class="flex justify-center"
                     >
-                      <app-organization-dropdown
-                        :organization="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>
                     </router-link>
                   </template>
                 </el-table-column>
@@ -660,6 +671,25 @@
         </div>
       </div>
     </div>
+    <el-popover
+      ref="OrganizationDropdownPopover"
+      placement="bottom-end"
+      popper-class="popover-dropdown"
+      :virtual-ref="actionBtnRefs[selectedActionOrganization?.id]"
+      trigger="click"
+      :visible="showOrganizationDropdownPopover"
+      virtual-triggering
+      @hide="onHide"
+    >
+      <div v-click-outside="onClickOutside">
+        <app-organization-dropdown-content
+          v-if="selectedActionOrganization"
+          :organization="selectedActionOrganization"
+          @merge="isMergeDialogOpen = selectedActionOrganization"
+          @close-dropdown="closeDropdown"
+        />
+      </div>
+    </el-popover>
     <app-organization-merge-dialog v-model="isMergeDialogOpen" />
   </div>
 </template>
@@ -682,10 +712,11 @@ import employeeChurnRate from '@/modules/organization/config/enrichment/employee
 import employeeGrowthRate from '@/modules/organization/config/enrichment/employeeGrowthRate';
 import revenueRange from '@/modules/organization/config/enrichment/revenueRange';
 import AppTagList from '@/modules/tag/components/tag-list.vue';
+import { ClickOutside as vClickOutside } from 'element-plus';
 import AppOrganizationIdentities from '../organization-identities.vue';
 import AppOrganizationListToolbar from './organization-list-toolbar.vue';
 import AppOrganizationName from '../organization-name.vue';
-import AppOrganizationDropdown from '../organization-dropdown.vue';
+import AppOrganizationDropdownContent from '../organization-dropdown-content.vue';
 
 const router = useRouter();
 
@@ -723,6 +754,11 @@ const isScrollbarVisible = ref(false);
 const isTableHovered = ref(false);
 const isCursorDown = ref(false);
 
+const showOrganizationDropdownPopover = ref(false);
+const OrganizationDropdownPopover = ref(null);
+const actionBtnRefs = ref({});
+const selectedActionOrganization = ref(null);
+
 const pagination = computed({
   get() {
     return props.pagination;
@@ -770,6 +806,39 @@ document.onmouseup = () => {
   isCursorDown.value = false;
 };
 
+const setActionBtnsRef = (el, id) => {
+  if (el) {
+    actionBtnRefs.value[id] = el;
+  }
+};
+
+const onActionBtnClick = (organization) => {
+  if (selectedActionOrganization.value?.id === organization.id) {
+    showOrganizationDropdownPopover.value = false;
+
+    setTimeout(() => {
+      selectedActionOrganization.value = null;
+    }, 200);
+  } else {
+    showOrganizationDropdownPopover.value = true;
+    selectedActionOrganization.value = organization;
+  }
+};
+
+const closeDropdown = () => {
+  showOrganizationDropdownPopover.value = false;
+
+  setTimeout(() => {
+    selectedActionOrganization.value = null;
+  }, 200);
+};
+
+const onClickOutside = (el) => {
+  if (!el.target?.id.includes('buttonRef')) {
+    closeDropdown();
+  }
+};
+
 function doChangeSort(sorter) {
   filters.value.order = {
     prop: sorter.prop,
@@ -936,4 +1005,9 @@ export default {
 .el-table__body {
   height: 1px;
 }
+
+.popover-dropdown {
+  padding: 0.5rem !important;
+  width: fit-content !important;
+}
 </style>
diff --git a/frontend/src/modules/organization/components/organization-dropdown-content.vue b/frontend/src/modules/organization/components/organization-dropdown-content.vue
new file mode 100644
index 0000000000..6a7145632b
--- /dev/null
+++ b/frontend/src/modules/organization/components/organization-dropdown-content.vue
@@ -0,0 +1,298 @@
+<template>
+  <!-- Edit -->
+  <button
+    :disabled="isEditLockedForSampleData"
+    class="h-10 el-dropdown-menu__item w-full"
+    type="button"
+    @click="handleCommand({
+      action: 'organizationEdit',
+      organization,
+    })"
+  >
+    <i class="ri-pencil-line text-base mr-2" /><span
+      class="text-xs"
+    >Edit organization</span>
+  </button>
+
+  <!-- Merge organization -->
+  <button
+    class="h-10 el-dropdown-menu__item w-full"
+    type="button"
+    :disabled="isEditLockedForSampleData"
+    @click="handleCommand({
+      action: 'organizationMerge',
+      organization,
+    })"
+  >
+    <i class="ri-shuffle-line text-base mr-2" /><span
+      class="text-xs"
+    >Merge organization</span>
+  </button>
+
+  <!-- Hubspot -->
+  <el-tooltip
+    placement="top"
+    content="Upgrade your plan to create a 2-way sync with HubSpot"
+    :disabled="isHubspotEnabled"
+    popper-class="max-w-[260px]"
+  >
+    <span>
+      <button
+        v-if="!isSyncingWithHubspot(organization)"
+        class="h-10 el-dropdown-menu__item w-full"
+        type="button"
+        :disabled="!isHubspotConnected || (!organization.website && !organization.attributes?.sourceId?.hubspot) || !isHubspotEnabled"
+        @click="handleCommand({
+          action: 'syncHubspot',
+          organization,
+        })"
+      >
+        <app-svg name="hubspot" class="h-4 w-4 text-current" />
+        <span
+          class="text-xs pl-2"
+        >Sync with HubSpot</span>
+      </button>
+      <button
+        v-else
+        class="h-10 el-dropdown-menu__item w-full"
+        type="button"
+        :disabled="!isHubspotConnected"
+        @click="handleCommand({
+          action: 'stopSyncHubspot',
+          organization,
+        })"
+      >
+        <app-svg name="hubspot" class="h-4 w-4 text-current" />
+        <span
+          class="text-xs pl-2"
+        >Stop sync with HubSpot</span>
+      </button>
+    </span>
+  </el-tooltip>
+
+  <!-- Mark as Team Organization -->
+  <button
+    v-if="!organization.isTeamOrganization"
+    class="h-10 el-dropdown-menu__item w-full"
+    type="button"
+    :disabled="isEditLockedForSampleData"
+    @click="handleCommand({
+      action: 'markOrganizationTeam',
+      organization,
+      value: true,
+    })"
+  >
+    <i
+      class="ri-bookmark-line text-base mr-2"
+    /><span class="text-xs">Mark as team organization</span>
+  </button>
+
+  <!-- Unmark as Team Organization -->
+  <button
+    v-if="organization.isTeamOrganization"
+    type="button"
+    class="h-10 el-dropdown-menu__item w-full"
+    :disabled="isEditLockedForSampleData"
+    @click="handleCommand({
+      action: 'markOrganizationTeam',
+      organization,
+      value: false,
+    })"
+  >
+    <i
+      class="ri-bookmark-2-line text-base mr-2"
+    /><span class="text-xs">Unmark as team organization</span>
+  </button>
+
+  <el-divider class="border-gray-200 my-2" />
+
+  <!-- Delete -->
+  <button
+    class="h-10 el-dropdown-menu__item w-full"
+    :disabled="isDeleteLockedForSampleData"
+    type="button"
+    @click="handleCommand({
+      action: 'organizationDelete',
+      organization,
+    })"
+  >
+    <i
+      class="ri-delete-bin-line text-base mr-2"
+      :class="{
+        'text-red-500': !isDeleteLockedForSampleData,
+      }"
+    /><span
+      class="text-xs"
+      :class="{
+        'text-red-500': !isDeleteLockedForSampleData,
+      }"
+    >Delete organization</span>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import {
+  mapGetters,
+} from '@/shared/vuex/vuex.helpers';
+import ConfirmDialog from '@/shared/dialog/confirm-dialog';
+import Message from '@/shared/message/message';
+import { useOrganizationStore } from '@/modules/organization/store/pinia';
+import { i18n } from '@/i18n';
+import AppSvg from '@/shared/svg/svg.vue';
+import { CrowdIntegrations } from '@/integrations/integrations-config';
+import { HubspotEntity } from '@/integrations/hubspot/types/HubspotEntity';
+import { HubspotApiService } from '@/integrations/hubspot/hubspot.api.service';
+import { useStore } from 'vuex';
+import { FeatureFlag, FEATURE_FLAGS } from '@/utils/featureFlag';
+import { OrganizationService } from '../organization-service';
+import { OrganizationPermissions } from '../organization-permissions';
+
+const router = useRouter();
+
+defineProps({
+  organization: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const emit = defineEmits([
+  'merge',
+  'closeDropdown',
+]);
+
+const store = useStore();
+
+const { currentUser, currentTenant } = mapGetters('auth');
+
+const organizationStore = useOrganizationStore();
+const { fetchOrganizations, fetchOrganization } = organizationStore;
+
+const isEditLockedForSampleData = computed(
+  () => new OrganizationPermissions(
+    currentTenant.value,
+    currentUser.value,
+  ).editLockedForSampleData,
+);
+const isDeleteLockedForSampleData = computed(
+  () => new OrganizationPermissions(
+    currentTenant.value,
+    currentUser.value,
+  ).destroyLockedForSampleData,
+);
+
+const isHubspotEnabled = computed(() => FeatureFlag.isFlagEnabled(
+  FEATURE_FLAGS.hubspot,
+));
+
+const isSyncingWithHubspot = (organization) => organization.attributes?.syncRemote?.hubspot || false;
+
+const isHubspotConnected = computed(() => {
+  const hubspot = CrowdIntegrations.getMappedConfig('hubspot', store);
+  const enabledFor = hubspot.settings?.enabledFor || [];
+  return hubspot.status === 'done' && enabledFor.includes(HubspotEntity.ORGANIZATIONS);
+});
+
+const doDestroyWithConfirm = async (id) => {
+  try {
+    await ConfirmDialog({
+      type: 'danger',
+      title: 'Delete organization',
+      message:
+        "Are you sure you want to proceed? You can't undo this action",
+      confirmButtonText: 'Confirm',
+      cancelButtonText: 'Cancel',
+      icon: 'ri-delete-bin-line',
+    });
+
+    await OrganizationService.destroyAll([id]);
+
+    Message.success(
+      i18n('entities.organization.destroy.success'),
+    );
+    emit('closeDropdown');
+
+    await fetchOrganizations({
+      reload: true,
+    });
+  } catch (error) {
+    console.error(error);
+  }
+  return null;
+};
+
+const handleCommand = (command) => {
+  if (command.action === 'organizationDelete') {
+    return doDestroyWithConfirm(command.organization.id);
+  } if (command.action === 'organizationEdit') {
+    emit('closeDropdown');
+    router.push({
+      name: 'organizationEdit',
+      params: {
+        id: command.organization.id,
+      },
+    });
+  } else if (command.action === 'organizationMerge') {
+    emit('closeDropdown');
+    emit('merge');
+  } else if (
+    command.action === 'syncHubspot' || command.action === 'stopSyncHubspot'
+  ) {
+    // Hubspot
+    const sync = command.action === 'syncHubspot';
+    (sync ? HubspotApiService.syncOrganization(command.organization.id) : HubspotApiService.stopSyncOrganization(command.organization.id))
+      .then(() => {
+        emit('closeDropdown');
+        if (
+          router.currentRoute.value.name === 'organization'
+        ) {
+          fetchOrganizations({
+            reload: true,
+          });
+        } else {
+          fetchOrganization(command.organization.id);
+        }
+        if (sync) {
+          Message.success('Organization is now syncing with HubSpot');
+        } else {
+          Message.success('Organization syncing stopped');
+        }
+      })
+      .catch(() => {
+        Message.error('There was an error');
+      });
+  } else if (command.action === 'markOrganizationTeam') {
+    OrganizationService.update(command.organization.id, {
+      isTeamOrganization: command.value,
+    }).then(() => {
+      Message.success('Organization updated successfully');
+      emit('closeDropdown');
+
+      if (
+        router.currentRoute.value.name === 'organization'
+      ) {
+        fetchOrganizations({
+          reload: true,
+        });
+      } else {
+        fetchOrganization(command.organization.id);
+      }
+    });
+  }
+
+  emit('closeDropdown');
+  return null;
+};
+</script>
+
+<style lang="scss" scoped>
+.el-dropdown-menu__item:disabled {
+  @apply cursor-not-allowed text-gray-400;
+}
+
+.el-dropdown-menu__item:disabled:hover {
+  @apply bg-white;
+}
+</style>
diff --git a/frontend/src/modules/organization/components/organization-dropdown.vue b/frontend/src/modules/organization/components/organization-dropdown.vue
index 6be7a3b40a..873c3d08d4 100644
--- a/frontend/src/modules/organization/components/organization-dropdown.vue
+++ b/frontend/src/modules/organization/components/organization-dropdown.vue
@@ -2,9 +2,9 @@
   <div>
     <el-dropdown
       v-if="!isReadOnly && organization"
+      ref="dropdown"
       trigger="click"
       placement="bottom-end"
-      @command="handleCommand"
     >
       <button
         class="el-dropdown-link btn p-1.5 rounder-md hover:bg-gray-200 text-gray-600"
@@ -14,153 +14,23 @@
         <i class="text-xl ri-more-fill" />
       </button>
       <template #dropdown>
-        <!-- Edit -->
-        <el-dropdown-item
-          :command="{
-            action: 'organizationEdit',
-            organization,
-          }"
-          :disabled="isEditLockedForSampleData"
-          class="h-10"
-        >
-          <i class="ri-pencil-line text-base mr-2" /><span
-            class="text-xs"
-          >Edit organization</span>
-        </el-dropdown-item>
-
-        <!-- Merge organization -->
-        <el-dropdown-item
-          class="h-10"
-          :command="{
-            action: 'organizationMerge',
-            organization,
-          }"
-          :disabled="isEditLockedForSampleData"
-        >
-          <i class="ri-shuffle-line text-base mr-2" /><span
-            class="text-xs"
-          >Merge organization</span>
-        </el-dropdown-item>
-
-        <!-- Hubspot -->
-        <el-tooltip
-          placement="top"
-          content="Upgrade your plan to create a 2-way sync with HubSpot"
-          :disabled="isHubspotEnabled"
-          popper-class="max-w-[260px]"
-        >
-          <span>
-            <el-dropdown-item
-              v-if="!isSyncingWithHubspot(organization)"
-              class="h-10"
-              :command="{
-                action: 'syncHubspot',
-                organization,
-              }"
-              :disabled="!isHubspotConnected || (!organization.website && !organization.attributes?.sourceId?.hubspot) || !isHubspotEnabled"
-            >
-              <app-svg name="hubspot" class="h-4 w-4 text-current" />
-              <span
-                class="text-xs pl-2"
-              >Sync with HubSpot</span>
-            </el-dropdown-item>
-            <el-dropdown-item
-              v-else
-              class="h-10"
-              :command="{
-                action: 'stopSyncHubspot',
-                organization,
-              }"
-              :disabled="!isHubspotConnected"
-            >
-              <app-svg name="hubspot" class="h-4 w-4 text-current" />
-              <span
-                class="text-xs pl-2"
-              >Stop sync with HubSpot</span>
-            </el-dropdown-item>
-          </span>
-        </el-tooltip>
-
-        <!-- Mark as Team Organization -->
-        <el-dropdown-item
-          v-if="!organization.isTeamOrganization"
-          :command="{
-            action: 'markOrganizationTeam',
-            organization,
-            value: true,
-          }"
-          class="h-10"
-          :disabled="isEditLockedForSampleData"
-        >
-          <i
-            class="ri-bookmark-line text-base mr-2"
-          /><span class="text-xs">Mark as team organization</span>
-        </el-dropdown-item>
-
-        <!-- Unmark as Team Organization -->
-        <el-dropdown-item
-          v-if="organization.isTeamOrganization"
-          :command="{
-            action: 'markOrganizationTeam',
-            organization,
-            value: false,
-          }"
-          class="h-10"
-          :disabled="isEditLockedForSampleData"
-        >
-          <i
-            class="ri-bookmark-2-line text-base mr-2"
-          /><span class="text-xs">Unmark as team organization</span>
-        </el-dropdown-item>
-
-        <el-divider class="border-gray-200 my-2" />
-
-        <!-- Delete -->
-        <el-dropdown-item
-          class="h-10"
-          :command="{
-            action: 'organizationDelete',
-            organization,
-          }"
-          :disabled="isDeleteLockedForSampleData"
-        >
-          <i
-            class="ri-delete-bin-line text-base mr-2"
-            :class="{
-              'text-red-500': !isDeleteLockedForSampleData,
-            }"
-          /><span
-            class="text-xs"
-            :class="{
-              'text-red-500': !isDeleteLockedForSampleData,
-            }"
-          >Delete organization</span>
-        </el-dropdown-item>
+        <app-organization-dropdown-content
+          :organization="organization"
+          @merge="emit('merge')"
+          @close-dropdown="onDropdownClose"
+        />
       </template>
     </el-dropdown>
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import { useRouter } from 'vue-router';
+import { computed, ref } from 'vue';
 import {
   mapGetters,
 } from '@/shared/vuex/vuex.helpers';
-import ConfirmDialog from '@/shared/dialog/confirm-dialog';
-import Message from '@/shared/message/message';
-import { useOrganizationStore } from '@/modules/organization/store/pinia';
-import { i18n } from '@/i18n';
-import AppSvg from '@/shared/svg/svg.vue';
-import { CrowdIntegrations } from '@/integrations/integrations-config';
-import { HubspotEntity } from '@/integrations/hubspot/types/HubspotEntity';
-import { HubspotApiService } from '@/integrations/hubspot/hubspot.api.service';
-import { useStore } from 'vuex';
-import { FeatureFlag, FEATURE_FLAGS } from '@/utils/featureFlag';
-import { OrganizationService } from '../organization-service';
 import { OrganizationPermissions } from '../organization-permissions';
-
-const router = useRouter();
+import AppOrganizationDropdownContent from './organization-dropdown-content.vue';
 
 defineProps({
   organization: {
@@ -171,14 +41,12 @@ defineProps({
 
 const emit = defineEmits([
   'merge',
+  'closeDropdown',
 ]);
 
-const store = useStore();
-
 const { currentUser, currentTenant } = mapGetters('auth');
 
-const organizationStore = useOrganizationStore();
-const { fetchOrganizations, fetchOrganization } = organizationStore;
+const dropdown = ref();
 
 const isReadOnly = computed(
   () => new OrganizationPermissions(
@@ -187,112 +55,9 @@ const isReadOnly = computed(
   ).edit === false,
 );
 
-const isEditLockedForSampleData = computed(
-  () => new OrganizationPermissions(
-    currentTenant.value,
-    currentUser.value,
-  ).editLockedForSampleData,
-);
-const isDeleteLockedForSampleData = computed(
-  () => new OrganizationPermissions(
-    currentTenant.value,
-    currentUser.value,
-  ).destroyLockedForSampleData,
-);
-
-const isHubspotEnabled = computed(() => FeatureFlag.isFlagEnabled(
-  FEATURE_FLAGS.hubspot,
-));
-
-const isSyncingWithHubspot = (organization) => organization.attributes?.syncRemote?.hubspot || false;
-
-const isHubspotConnected = computed(() => {
-  const hubspot = CrowdIntegrations.getMappedConfig('hubspot', store);
-  const enabledFor = hubspot.settings?.enabledFor || [];
-  return hubspot.status === 'done' && enabledFor.includes(HubspotEntity.ORGANIZATIONS);
-});
-
-const doDestroyWithConfirm = async (id) => {
-  try {
-    await ConfirmDialog({
-      type: 'danger',
-      title: 'Delete organization',
-      message:
-        "Are you sure you want to proceed? You can't undo this action",
-      confirmButtonText: 'Confirm',
-      cancelButtonText: 'Cancel',
-      icon: 'ri-delete-bin-line',
-    });
-
-    await OrganizationService.destroyAll([id]);
-
-    Message.success(
-      i18n('entities.organization.destroy.success'),
-    );
-    await fetchOrganizations({
-      reload: true,
-    });
-  } catch (error) {
-    console.error(error);
-  }
-  return null;
-};
-
-const handleCommand = (command) => {
-  if (command.action === 'organizationDelete') {
-    return doDestroyWithConfirm(command.organization.id);
-  } if (command.action === 'organizationEdit') {
-    router.push({
-      name: 'organizationEdit',
-      params: {
-        id: command.organization.id,
-      },
-    });
-  } else if (command.action === 'organizationMerge') {
-    emit('merge');
-  } else if (
-    command.action === 'syncHubspot' || command.action === 'stopSyncHubspot'
-  ) {
-    // Hubspot
-    const sync = command.action === 'syncHubspot';
-    (sync ? HubspotApiService.syncOrganization(command.organization.id) : HubspotApiService.stopSyncOrganization(command.organization.id))
-      .then(() => {
-        if (
-          router.currentRoute.value.name === 'organization'
-        ) {
-          fetchOrganizations({
-            reload: true,
-          });
-        } else {
-          fetchOrganization(command.organization.id);
-        }
-        if (sync) {
-          Message.success('Organization is now syncing with HubSpot');
-        } else {
-          Message.success('Organization syncing stopped');
-        }
-      })
-      .catch(() => {
-        Message.error('There was an error');
-      });
-  } else if (command.action === 'markOrganizationTeam') {
-    OrganizationService.update(command.organization.id, {
-      isTeamOrganization: command.value,
-    }).then(() => {
-      Message.success('Organization updated successfully');
-
-      if (
-        router.currentRoute.value.name === 'organization'
-      ) {
-        fetchOrganizations({
-          reload: true,
-        });
-      } else {
-        fetchOrganization(command.organization.id);
-      }
-    });
-  }
-  return null;
+const onDropdownClose = () => {
+  dropdown.value?.handleClose();
+  emit('closeDropdown');
 };
 </script>
 
diff --git a/frontend/src/shared/avatar-image/avatar-image.vue b/frontend/src/shared/avatar-image/avatar-image.vue
index f07717c170..1bb891f716 100644
--- a/frontend/src/shared/avatar-image/avatar-image.vue
+++ b/frontend/src/shared/avatar-image/avatar-image.vue
@@ -1,7 +1,7 @@
 <template>
   <img
     v-if="showImage"
-    :src="src"
+    v-lazy="src"
     alt="Avatar Logo"
     @error="handleImageError"
   >
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 74d70644ea..b36258fbed 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,6 +1,6 @@
 import { fileURLToPath, URL } from 'node:url';
 
-import { defineConfig } from 'vite';
+import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import vue from '@vitejs/plugin-vue';
 
 import Components from 'unplugin-vue-components/vite';
@@ -18,6 +18,7 @@ export default defineConfig({
   envPrefix: 'VUE_APP',
   plugins: [
     vue(),
+    splitVendorChunkPlugin(),
     Components({
       extensions: ['vue', 'md'],
       include: [/\.vue$/, /\.vue\?vue/, /\.md$/],