From 99c45bd4d29047fbceccfb7b45dd8c2e27a157d3 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Tue, 2 Jul 2024 22:13:11 -0500
Subject: [PATCH] fix(web): slow people page load (#10793)

---
 .../components/faces-page/people-card.svelte  | 48 ++++++++++---------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/web/src/lib/components/faces-page/people-card.svelte b/web/src/lib/components/faces-page/people-card.svelte
index b5a00cf23db14..21f48e42ebfc4 100644
--- a/web/src/lib/components/faces-page/people-card.svelte
+++ b/web/src/lib/components/faces-page/people-card.svelte
@@ -66,27 +66,29 @@
     {/if}
   </a>
 
-  <div class="absolute top-2 right-2">
-    <ButtonContextMenu
-      buttonClass="icon-white-drop-shadow focus:opacity-100 {showVerticalDots ? 'opacity-100' : 'opacity-0'}"
-      color="opaque"
-      padding="2"
-      size="20"
-      icon={mdiDotsVertical}
-      title={$t('show_person_options')}
-    >
-      <MenuOption onClick={() => onMenuClick('hide-person')} icon={mdiEyeOffOutline} text={$t('hide_person')} />
-      <MenuOption onClick={() => onMenuClick('change-name')} icon={mdiAccountEditOutline} text={$t('change_name')} />
-      <MenuOption
-        onClick={() => onMenuClick('set-birth-date')}
-        icon={mdiCalendarEditOutline}
-        text={$t('set_date_of_birth')}
-      />
-      <MenuOption
-        onClick={() => onMenuClick('merge-people')}
-        icon={mdiAccountMultipleCheckOutline}
-        text={$t('merge_people')}
-      />
-    </ButtonContextMenu>
-  </div>
+  {#if showVerticalDots}
+    <div class="absolute top-2 right-2">
+      <ButtonContextMenu
+        buttonClass="icon-white-drop-shadow focus:opacity-100 {showVerticalDots ? 'opacity-100' : 'opacity-0'}"
+        color="opaque"
+        padding="2"
+        size="20"
+        icon={mdiDotsVertical}
+        title={$t('show_person_options')}
+      >
+        <MenuOption onClick={() => onMenuClick('hide-person')} icon={mdiEyeOffOutline} text={$t('hide_person')} />
+        <MenuOption onClick={() => onMenuClick('change-name')} icon={mdiAccountEditOutline} text={$t('change_name')} />
+        <MenuOption
+          onClick={() => onMenuClick('set-birth-date')}
+          icon={mdiCalendarEditOutline}
+          text={$t('set_date_of_birth')}
+        />
+        <MenuOption
+          onClick={() => onMenuClick('merge-people')}
+          icon={mdiAccountMultipleCheckOutline}
+          text={$t('merge_people')}
+        />
+      </ButtonContextMenu>
+    </div>
+  {/if}
 </div>