From 91286ab1e6d6b249b82ff593f287801e927c9821 Mon Sep 17 00:00:00 2001
From: Andrey Sobolev <haiodo@users.noreply.github.com>
Date: Fri, 24 Nov 2023 10:38:03 +0700
Subject: [PATCH] UBERF-4388: Few performance related fixes (#4053)
Signed-off-by: Andrey Sobolev <haiodo@gmail.com>
---
.../breadcrumbs/BreadcrumbsElement.svelte | 8 ++++++-
.../src/components/schedule/MonthView.svelte | 24 +++++++++++++++----
.../issues/edit/QueryIssuesList.svelte | 10 ++++++--
.../src/components/list/ListView.svelte | 15 ++++++++----
4 files changed, 45 insertions(+), 12 deletions(-)
diff --git a/packages/presentation/src/components/breadcrumbs/BreadcrumbsElement.svelte b/packages/presentation/src/components/breadcrumbs/BreadcrumbsElement.svelte
index 1572c94b73..9248be6047 100644
--- a/packages/presentation/src/components/breadcrumbs/BreadcrumbsElement.svelte
+++ b/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}
diff --git a/plugins/hr-resources/src/components/schedule/MonthView.svelte b/plugins/hr-resources/src/components/schedule/MonthView.svelte
index fd54b872f4..0bb501574a 100644
--- a/plugins/hr-resources/src/components/schedule/MonthView.svelte
+++ b/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">
diff --git a/plugins/tracker-resources/src/components/issues/edit/QueryIssuesList.svelte b/plugins/tracker-resources/src/components/issues/edit/QueryIssuesList.svelte
index bdec957878..7bec36f1c4 100644
--- a/plugins/tracker-resources/src/components/issues/edit/QueryIssuesList.svelte
+++ b/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}
diff --git a/plugins/view-resources/src/components/list/ListView.svelte b/plugins/view-resources/src/components/list/ListView.svelte
index e5d1b6988c..aad2a360c5 100644
--- a/plugins/view-resources/src/components/list/ListView.svelte
+++ b/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