UBERF-4388: Few performance related fixes (#4053)

Signed-off-by: Andrey Sobolev <haiodo@gmail.com>

packages/presentation/src/components/breadcrumbs/BreadcrumbsElement.svelte

@@ -13,6 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
+  import { resizeObserver } from '@hcengineering/ui'
   export let label: string | undefined = undefined
   export let title: string | undefined = undefined
   export let position: 'start' | 'middle' | 'end' | undefined = undefined
@@ -24,7 +25,12 @@
   $: lenght = clientWidth + 32 > 300 ? 300 : clientWidth + 32
 </script>
 
-<div class="hidden-text text-md font-medium pointer-events-none content-pointer-events-none" bind:clientWidth>
+<div
+  class="hidden-text text-md font-medium pointer-events-none content-pointer-events-none"
+  use:resizeObserver={(evt) => {
+    clientWidth = evt.clientWidth
+  }}
+>
   {#if $$slots.default}
     <slot />
   {:else}

plugins/hr-resources/src/components/schedule/MonthView.svelte

@@ -29,7 +29,8 @@
     Scroller,
     showPopup,
     tooltip,
-    deviceOptionsStore as deviceInfo
+    deviceOptionsStore as deviceInfo,
+    resizeObserver
   } from '@hcengineering/ui'
   import hr from '../../plugin'
   import { getHolidayDatesForEmployee, getRequests, isHoliday } from '../../utils'
@@ -251,10 +252,20 @@
   {@const dep = departmentById.get(department)}
 
   <Scroller horizontal fade={{ multipler: { top: headerHeightRem, left: headerWidthRem } }} noFade>
-    <div bind:clientWidth={containerWidth} class="timeline">
+    <div
+      use:resizeObserver={(evt) => {
+        containerWidth = evt.clientWidth
+      }}
+      class="timeline"
+    >
       {#key [containerWidthRem, columnWidthRem, headerWidthRem]}
         <!-- Resource Header -->
-        <div bind:clientWidth={headerWidth} class="timeline-header timeline-resource-header">
+        <div
+          use:resizeObserver={(evt) => {
+            headerWidth = evt.clientWidth
+          }}
+          class="timeline-header timeline-resource-header"
+        >
           <div class="timeline-row">
             <div class="timeline-resource-cell">
               <div class="timeline-resource-header__title">
@@ -268,7 +279,12 @@
         </div>
 
         <!-- Resource Content -->
-        <div bind:clientWidth={headerWidth} class="timeline-resource-content">
+        <div
+          use:resizeObserver={(evt) => {
+            headerWidth = evt.clientWidth
+          }}
+          class="timeline-resource-content"
+        >
           {#each rows as row}
             <div class="timeline-row" style={getRowStyle(row)}>
               <div class="timeline-resource-cell">

plugins/tracker-resources/src/components/issues/edit/QueryIssuesList.svelte

@@ -16,7 +16,7 @@
   import { Class, Doc, DocumentQuery, Ref } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
   import { Issue } from '@hcengineering/tracker'
-  import { Button, Chevron, ExpandCollapse, IconAdd, closeTooltip, showPopup } from '@hcengineering/ui'
+  import { Button, Chevron, ExpandCollapse, IconAdd, closeTooltip, resizeObserver, showPopup } from '@hcengineering/ui'
   import view, { ViewOptions, Viewlet, ViewletPreference } from '@hcengineering/view'
   import { ViewletsSettingButton } from '@hcengineering/view-resources'
   import { afterUpdate } from 'svelte'
@@ -157,7 +157,13 @@
 {#if hasSubIssues && viewOptions && viewlet}
   {#if !isCollapsed}
     <ExpandCollapse isExpanded={!isCollapsed}>
-      <div class="list" class:collapsed={isCollapsed} bind:clientWidth={listWidth}>
+      <div
+        class="list"
+        class:collapsed={isCollapsed}
+        use:resizeObserver={(evt) => {
+          listWidth = evt.clientWidth
+        }}
+      >
         <SubIssueList
           createItemDialog={CreateIssue}
           createItemLabel={tracker.string.AddIssueTooltip}

plugins/view-resources/src/components/list/ListView.svelte

@@ -15,10 +15,10 @@
 <script lang="ts">
   import { Class, Doc, DocumentQuery, FindOptions, Ref, Space } from '@hcengineering/core'
   import { IntlString } from '@hcengineering/platform'
-  import { AnyComponent, Scroller } from '@hcengineering/ui'
-  import { BuildModelKey, Viewlet, ViewOptions } from '@hcengineering/view'
-  import { onMount } from 'svelte'
   import { ActionContext } from '@hcengineering/presentation'
+  import { AnyComponent, Scroller, resizeObserver } from '@hcengineering/ui'
+  import { BuildModelKey, ViewOptions, Viewlet } from '@hcengineering/view'
+  import { onMount } from 'svelte'
   import { ListSelectionProvider, SelectDirection, focusStore } from '../..'
 
   import List from './List.svelte'
@@ -41,7 +41,7 @@
   let list: List
   let scroll: Scroller
   let divScroll: HTMLDivElement
-  let listWidth: number
+  let listWidth: number = 0
 
   const listProvider = new ListSelectionProvider(
     (offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection, noScroll?: boolean) => {
@@ -63,7 +63,12 @@
     mode: 'browser'
   }}
 />
-<div bind:clientWidth={listWidth} class="w-full h-full py-4 clear-mins">
+<div
+  use:resizeObserver={(evt) => {
+    listWidth = evt.clientWidth
+  }}
+  class="w-full h-full py-4 clear-mins"
+>
   <Scroller
     bind:this={scroll}
     bind:divScroll