UBERF-11415: Optimise contact UI stores (#9185)

services/github/github-resources/src/components/presenters/GithubReviewPresenter.svelte

@@ -7,12 +7,13 @@
   import { GithubPullRequestReviewState, GithubReview } from '@hcengineering/github'
 
   import { ActivityMessageHeader, ActivityMessageTemplate } from '@hcengineering/activity-resources'
-  import { personByPersonIdStore } from '@hcengineering/contact-resources'
+  import { getPersonByPersonIdCb } from '@hcengineering/contact-resources'
   import { IntlString } from '@hcengineering/platform'
   import { MessageViewer } from '@hcengineering/presentation'
   import { isEmptyMarkup } from '@hcengineering/text'
   import { PaletteColorIndexes, getPlatformColor, themeStore } from '@hcengineering/ui'
   import github from '../../plugin'
+  import { Person } from '@hcengineering/contact'
 
   export let value: WithLookup<GithubReview>
   export let showNotify: boolean = false
@@ -22,7 +23,15 @@
   export let embedded: boolean = false
   export let onClick: (() => void) | undefined = undefined
 
-  $: person = $personByPersonIdStore.get(value?.createdBy ?? value?.modifiedBy)
+  $: personId = value?.createdBy ?? value?.modifiedBy
+  let person: Person | undefined
+  $: if (personId !== undefined) {
+    getPersonByPersonIdCb(personId, (p) => {
+      person = p ?? undefined
+    })
+  } else {
+    person = undefined
+  }
 
   function getCommentFromState (value?: GithubPullRequestReviewState): {
     label: IntlString

services/github/github-resources/src/components/presenters/GithubReviewThreadPresenter.svelte

@@ -8,7 +8,7 @@
 
   import { ActivityMessageHeader, ActivityMessageTemplate } from '@hcengineering/activity-resources'
   import { Person } from '@hcengineering/contact'
-  import { EmployeePresenter, personByPersonIdStore } from '@hcengineering/contact-resources'
+  import { EmployeePresenter, getPersonByPersonId, getPersonByPersonIdCb } from '@hcengineering/contact-resources'
   import { getEmbeddedLabel } from '@hcengineering/platform'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { ReferenceInput } from '@hcengineering/text-editor-resources'
@@ -26,7 +26,15 @@
   export let embedded: boolean = false
   export let onClick: (() => void) | undefined = undefined
 
-  $: person = $personByPersonIdStore.get(value?.createdBy ?? value?.modifiedBy)
+  $: personId = value?.createdBy ?? value?.modifiedBy
+  let person: Person | undefined
+  $: if (personId !== undefined) {
+    getPersonByPersonIdCb(personId, (p) => {
+      person = p ?? undefined
+    })
+  } else {
+    person = undefined
+  }
 
   const commentsQuery = createQuery()
 
@@ -141,24 +149,25 @@
               />
             {/if}
             {#if value.isResolved && value.resolvedBy != null}
-              {@const resolvePerson = $personByPersonIdStore.get(value.resolvedBy)}
-              {#if resolvePerson !== undefined}
-                <div class="flex-row-center ml-4">
-                  <Label label={getEmbeddedLabel('resolved by')} />
+              {#await getPersonByPersonId(value.resolvedBy) then resolvePerson}
+                {#if resolvePerson !== undefined}
+                  <div class="flex-row-center ml-4">
+                    <Label label={getEmbeddedLabel('resolved by')} />
 
-                  <div class="content ml-2 clear-mins">
-                    <div class="header clear-mins">
-                      {#if resolvePerson}
-                        <EmployeePresenter value={resolvePerson} shouldShowAvatar={true} />
-                      {:else}
-                        <div class="strong">
-                          <Label label={core.string.System} />
-                        </div>
-                      {/if}
+                    <div class="content ml-2 clear-mins">
+                      <div class="header clear-mins">
+                        {#if resolvePerson}
+                          <EmployeePresenter value={resolvePerson} shouldShowAvatar={true} />
+                        {:else}
+                          <div class="strong">
+                            <Label label={core.string.System} />
+                          </div>
+                        {/if}
+                      </div>
                     </div>
                   </div>
-                </div>
-              {/if}
+                {/if}
+              {/await}
             {/if}
           </div>
         {/if}

services/github/github-resources/src/components/presenters/ReviewCommentPresenter.svelte

@@ -1,14 +1,23 @@
 <script lang="ts">
-  import { EmployeePresenter, SystemAvatar, personByPersonIdStore } from '@hcengineering/contact-resources'
+  import { EmployeePresenter, SystemAvatar, getPersonByPersonIdCb } from '@hcengineering/contact-resources'
   import Avatar from '@hcengineering/contact-resources/src/components/Avatar.svelte'
   import core, { getDisplayTime } from '@hcengineering/core'
   import { MessageViewer } from '@hcengineering/presentation'
   import { Label } from '@hcengineering/ui'
   import { GithubReviewComment } from '@hcengineering/github'
+  import { Person } from '@hcengineering/contact'
 
   export let comment: GithubReviewComment
 
-  $: person = $personByPersonIdStore.get(comment?.createdBy ?? comment?.modifiedBy)
+  $: personId = comment?.createdBy ?? comment?.modifiedBy
+  let person: Person | undefined
+  $: if (personId !== undefined) {
+    getPersonByPersonIdCb(personId, (p) => {
+      person = p ?? undefined
+    })
+  } else {
+    person = undefined
+  }
 </script>
 
 {#if comment}