From c8d0a30fcbcebe66ba16c7e442732b977737af41 Mon Sep 17 00:00:00 2001
From: Oleg <64714442+aluarius@users.noreply.github.com>
Date: Tue, 31 Jan 2023 15:19:19 +0400
Subject: [PATCH] [#2785] Throttling composable, integration to VaSelect and
 VaDataTable (#2832)

---
 packages/docs/src/locales/en/en.json          |   1 +
 packages/docs/src/locales/ru/ru.json          |   1 +
 packages/docs/src/locales/zh-cn/zh-cn.json    |   4 +-
 .../va-data-table/VaDataTable.new.demo.vue    |  13 +++
 .../components/va-data-table/VaDataTable.vue  |   3 +-
 .../va-data-table/hooks/useFilterable.ts      |  13 ++-
 .../va-data-table/hooks/usePaginatedRows.ts   |   7 +-
 .../va-data-table/hooks/useSortable.ts        |   7 +-
 .../components/va-select/VaSelect.demo.vue    |   7 ++
 .../ui/src/components/va-select/VaSelect.vue  |   4 +-
 .../VaSelectOptionList/VaSelectOptionList.vue |   7 +-
 packages/ui/src/composables/index.ts          |   1 +
 packages/ui/src/composables/useThrottle.ts    | 101 ++++++++++++++++++
 13 files changed, 158 insertions(+), 11 deletions(-)
 create mode 100644 packages/ui/src/composables/useThrottle.ts

diff --git a/packages/docs/src/locales/en/en.json b/packages/docs/src/locales/en/en.json
index 633660584b..a5ed2af944 100644
--- a/packages/docs/src/locales/en/en.json
+++ b/packages/docs/src/locales/en/en.json
@@ -186,6 +186,7 @@
         "fallbackText": "Shows an alternative text if image failed to load or src doesn't specified.",
         "fallbackIcon": "Shows an icon if image failed to load or src doesn't specified.",
         "fallbackRender": "Allows to use render function to render custom contents if image failed to load or src doesn't specified",
+        "delay": "Sets throttling delay (ms) for the components any data change (useful for huge data).",
         "ratio": "Aspect ratio of the component's wrapper."
       }
     },
diff --git a/packages/docs/src/locales/ru/ru.json b/packages/docs/src/locales/ru/ru.json
index 907d495542..c33cf6e834 100644
--- a/packages/docs/src/locales/ru/ru.json
+++ b/packages/docs/src/locales/ru/ru.json
@@ -183,6 +183,7 @@
         "fallbackText": "Показывает альтернативный текст, если изображение не указано или не удалось загрузить.",
         "fallbackIcon": "Показывает альтернативную иконку, если изображение не указано или не удалось загрузить.",
         "fallbackRender": "Позволяет задать функцию-рендерер с настраиваемым содержимым, если изображение не указано или не удалось загрузить.",
+        "delay": "Устанавливает задержку (тротлинг в ms) изменения данных в компоненте (при рендеринге больших объемов данных).",
         "ratio": "Соотношение сторон обертки компонента."
       }
     },
diff --git a/packages/docs/src/locales/zh-cn/zh-cn.json b/packages/docs/src/locales/zh-cn/zh-cn.json
index 239edf24cb..66aa1a76a4 100644
--- a/packages/docs/src/locales/zh-cn/zh-cn.json
+++ b/packages/docs/src/locales/zh-cn/zh-cn.json
@@ -179,10 +179,12 @@
           "plain": "Applies `plain` styling.",
           "round": "Adds rounded corners (or make a button fully rounded if only icon is passed).",
           "iconRight": "The icon to be displayed to the right of a title.",
+          "keyboardNavigation": "Enables keyboard navigation for the component.",
           "fallbackSrc": "Shows an alternative image if original image failed to load or src doesn't specified.",
           "fallbackText": "Shows an alternative text if image failed to load or src doesn't specified.",
           "fallbackIcon": "Shows an icon if image failed to load or src doesn't specified.",
-          "fallbackRender": "Allows to use render function to render custom contents if image failed to load or src doesn't specified"
+          "fallbackRender": "Allows to use render function to render custom contents if image failed to load or src doesn't specified",
+          "delay": "Sets throttling delay (ms) for the components any data change (useful for huge data)."
         }
       },
       "VaBadge": {
diff --git a/packages/ui/src/components/va-data-table/VaDataTable.new.demo.vue b/packages/ui/src/components/va-data-table/VaDataTable.new.demo.vue
index cc7acc6db6..f3f6f713e2 100644
--- a/packages/ui/src/components/va-data-table/VaDataTable.new.demo.vue
+++ b/packages/ui/src/components/va-data-table/VaDataTable.new.demo.vue
@@ -120,6 +120,19 @@
       </va-data-table>
     </VbCard>
 
+    <VbCard title="Throttling (in the example below - for columns sorting)">
+      <va-data-table
+        v-model:sort-by="sortBy"
+        v-model:sorting-order="sortingOrder"
+        :items="items"
+        :columns="columns"
+        :delay="1000"
+      >
+        <template #header(street)="{ label }">{{ label }}</template>
+        <template #header(companyName)>Company Name</template>
+      </va-data-table>
+    </VbCard>
+
     <VbCard title="Use `columns` prop, enable sorting and use custom sorting function (always returns -1) for the `id` column">
       <label for="sortingBy">Sort by</label>
       <select id="sortingBy" v-model="sortBy">
diff --git a/packages/ui/src/components/va-data-table/VaDataTable.vue b/packages/ui/src/components/va-data-table/VaDataTable.vue
index 649957d56c..55e55c803b 100644
--- a/packages/ui/src/components/va-data-table/VaDataTable.vue
+++ b/packages/ui/src/components/va-data-table/VaDataTable.vue
@@ -189,7 +189,7 @@ import { useFilterable, useFilterableProps } from './hooks/useFilterable'
 import { useSortable, useSortableProps } from './hooks/useSortable'
 import { useTableScroll, useTableScrollProps, useTableScrollEmits } from './hooks/useTableScroll'
 
-import { useComponentPresetProp, useTranslation } from '../../composables'
+import { useComponentPresetProp, useTranslation, useThrottleProps } from '../../composables'
 
 import { extractComponentProps, filterComponentProps } from '../../utils/component-options'
 
@@ -240,6 +240,7 @@ export default defineComponent({
     ...usePaginatedRowsProps,
     ...useRowsProps,
     ...useSelectableProps,
+    ...useThrottleProps,
     hoverable: { type: Boolean, default: false },
     clickable: { type: Boolean, default: false },
     loading: { type: Boolean, default: false },
diff --git a/packages/ui/src/components/va-data-table/hooks/useFilterable.ts b/packages/ui/src/components/va-data-table/hooks/useFilterable.ts
index c0bcffa3fb..25aa51c8de 100644
--- a/packages/ui/src/components/va-data-table/hooks/useFilterable.ts
+++ b/packages/ui/src/components/va-data-table/hooks/useFilterable.ts
@@ -1,8 +1,11 @@
 import { Ref, watch, computed, PropType, ExtractPropTypes } from 'vue'
 
+import { useThrottleValue, useThrottleProps } from '../../../composables'
+
 import type { DataTableRow, DataTableFilterMethod, DataTableItem } from '../types'
 
 export const useFilterableProps = {
+  ...useThrottleProps,
   filter: { type: String, default: '' },
   filterMethod: { type: Function as PropType<DataTableFilterMethod | undefined> },
 }
@@ -31,14 +34,16 @@ export const useFilterable = (
     }))
   })
 
-  watch(filteredRows, () => {
+  const filteredRowsThrottled = useThrottleValue(filteredRows, props)
+
+  watch(filteredRowsThrottled, () => {
     emit('filtered', {
-      items: filteredRows.value.map(row => row.source),
-      itemsIndexes: filteredRows.value.map(row => row.initialIndex),
+      items: filteredRowsThrottled.value.map(row => row.source),
+      itemsIndexes: filteredRowsThrottled.value.map(row => row.initialIndex),
     })
   })
 
   return {
-    filteredRows,
+    filteredRows: filteredRowsThrottled,
   }
 }
diff --git a/packages/ui/src/components/va-data-table/hooks/usePaginatedRows.ts b/packages/ui/src/components/va-data-table/hooks/usePaginatedRows.ts
index c13106fe29..592891538f 100644
--- a/packages/ui/src/components/va-data-table/hooks/usePaginatedRows.ts
+++ b/packages/ui/src/components/va-data-table/hooks/usePaginatedRows.ts
@@ -2,9 +2,12 @@ import { Ref, computed, PropType, ExtractPropTypes } from 'vue'
 
 import { useCurrentPageProp } from './useCommonProps'
 
+import { useThrottleValue, useThrottleProps } from '../../../composables'
+
 import type { DataTableRow } from '../types'
 
 export const usePaginatedRowsProps = {
+  ...useThrottleProps,
   ...useCurrentPageProp,
   perPage: { type: Number as PropType<number | undefined> },
 }
@@ -26,7 +29,9 @@ export const usePaginatedRows = (
     return sortedRows.value.slice(pageStartIndex, pageStartIndex + props.perPage)
   })
 
+  const paginatedRowsThrottled = useThrottleValue(paginatedRows, props)
+
   return {
-    paginatedRows,
+    paginatedRows: paginatedRowsThrottled,
   }
 }
diff --git a/packages/ui/src/components/va-data-table/hooks/useSortable.ts b/packages/ui/src/components/va-data-table/hooks/useSortable.ts
index 1202df7796..bb4b251463 100644
--- a/packages/ui/src/components/va-data-table/hooks/useSortable.ts
+++ b/packages/ui/src/components/va-data-table/hooks/useSortable.ts
@@ -1,5 +1,7 @@
 import { PropType, computed, ref, Ref, watch, ExtractPropTypes, ComputedRef } from 'vue'
 
+import { useThrottleFunction, useThrottleProps } from '../../../composables'
+
 import type {
   DataTableColumnInternal,
   DataTableRow,
@@ -9,6 +11,7 @@ import type {
 } from '../types'
 
 export const useSortableProps = {
+  ...useThrottleProps,
   sortBy: { type: String as PropType<string | undefined> },
   sortingOrder: { type: String as PropType<DataTableSortingOrder | undefined> },
 }
@@ -134,6 +137,8 @@ export const useSortable = (
     }
   }
 
+  const toggleSortingThrottled = useThrottleFunction(toggleSorting, props)
+
   const sortingOrderIconName = computed(() => {
     return sortingOrderSync.value === 'asc'
       ? 'va-arrow-up'
@@ -145,7 +150,7 @@ export const useSortable = (
   return {
     sortBySync,
     sortingOrderSync,
-    toggleSorting,
+    toggleSorting: toggleSortingThrottled,
     sortedRows,
     sortingOrderIconName,
   }
diff --git a/packages/ui/src/components/va-select/VaSelect.demo.vue b/packages/ui/src/components/va-select/VaSelect.demo.vue
index 2b2f3ee271..47637b24c9 100644
--- a/packages/ui/src/components/va-select/VaSelect.demo.vue
+++ b/packages/ui/src/components/va-select/VaSelect.demo.vue
@@ -578,6 +578,13 @@
         searchable
         searchtext="test"
       />
+      <va-select
+        v-model="defaultSingleSelect.value"
+        label="Search with throttling"
+        :options="defaultSingleSelect.options"
+        :delay="1000"
+        searchable
+      />
     </VbCard>
     <VbCard
       title="Allow create new"
diff --git a/packages/ui/src/components/va-select/VaSelect.vue b/packages/ui/src/components/va-select/VaSelect.vue
index b673b72982..4d39f0bb4f 100644
--- a/packages/ui/src/components/va-select/VaSelect.vue
+++ b/packages/ui/src/components/va-select/VaSelect.vue
@@ -118,6 +118,7 @@ import {
   useFocusDeep,
   useTranslation,
   useBem,
+  useThrottleProps,
 } from '../../composables'
 
 import { extractComponentProps, filterComponentProps } from '../../utils/component-options'
@@ -175,6 +176,7 @@ export default defineComponent({
     ...useFormProps,
     ...useMaxVisibleOptionsProps,
     ...useToggleIconProps,
+    ...useThrottleProps,
 
     modelValue: {
       type: [String, Number, Array, Object] as PropType<SelectOption | SelectOption[]>,
@@ -553,7 +555,7 @@ export default defineComponent({
     }))
 
     const optionsListPropsComputed = computed(() => ({
-      ...pick(props, ['textBy', 'trackBy', 'groupBy', 'disabledBy', 'color', 'virtualScroller']),
+      ...pick(props, ['textBy', 'trackBy', 'groupBy', 'disabledBy', 'color', 'virtualScroller', 'delay']),
       search: searchInput.value,
       tabindex: tabIndexComputed.value,
       selectedValue: valueComputed.value,
diff --git a/packages/ui/src/components/va-select/components/VaSelectOptionList/VaSelectOptionList.vue b/packages/ui/src/components/va-select/components/VaSelectOptionList/VaSelectOptionList.vue
index a170914326..b11a832c14 100644
--- a/packages/ui/src/components/va-select/components/VaSelectOptionList/VaSelectOptionList.vue
+++ b/packages/ui/src/components/va-select/components/VaSelectOptionList/VaSelectOptionList.vue
@@ -80,6 +80,7 @@ import {
   useObjectRefs,
   useSlotPassed,
   useSelectableList, useSelectableListProps,
+  useThrottleValue, useThrottleProps,
 } from '../../../../composables'
 
 import { scrollToElement } from '../../../../utils/scroll-to-element'
@@ -102,6 +103,7 @@ export default defineComponent({
     ...useColorProps,
     ...useComponentPresetProp,
     ...useSelectableListProps,
+    ...useThrottleProps,
     noOptionsText: { type: String, default: 'Items not found' },
     getSelectedState: { type: Function as PropType<(option: SelectOption) => boolean>, required: true },
     multiple: { type: Boolean, default: false },
@@ -162,6 +164,7 @@ export default defineComponent({
 
         return groups
       }, { _noGroup: [] }))
+    const optionGroupsThrottled = useThrottleValue(optionGroups, props)
 
     const isValueExists = (value: SelectOption | null | undefined) => !!value || value === 0
 
@@ -174,7 +177,7 @@ export default defineComponent({
 
     const selectOption = (option: SelectOption) => !getDisabled(option) && emit('select-option', option)
 
-    const groupedOptions = computed(() => Object.values(optionGroups.value).flat())
+    const groupedOptions = computed(() => Object.values(optionGroupsThrottled.value).flat())
     const currentOptions = computed(() =>
       filteredOptions.value.some((el) => getGroupBy(el)) ? groupedOptions.value : filteredOptions.value)
 
@@ -259,7 +262,7 @@ export default defineComponent({
       virtualScrollerRef,
 
       rootHeight,
-      optionGroups,
+      optionGroups: optionGroupsThrottled,
       filteredOptions,
       selectOptionProps,
       isSlotContentPassed,
diff --git a/packages/ui/src/composables/index.ts b/packages/ui/src/composables/index.ts
index 8b2737bf83..45ed5db520 100644
--- a/packages/ui/src/composables/index.ts
+++ b/packages/ui/src/composables/index.ts
@@ -58,6 +58,7 @@ export * from './useTimer'
 export * from './useTrackBy'
 export * from './useTranslation'
 export * from './useTrapFocus'
+export * from './useThrottle'
 export * from './useValidation'
 export * from './useWindow'
 export * from './useWindowSize'
diff --git a/packages/ui/src/composables/useThrottle.ts b/packages/ui/src/composables/useThrottle.ts
new file mode 100644
index 0000000000..8f117387bd
--- /dev/null
+++ b/packages/ui/src/composables/useThrottle.ts
@@ -0,0 +1,101 @@
+/**
+ * @description returns throttled function or value
+ * the last one always returns last-call value in the end if no more new calls were provided
+ * @example
+ *    import { useThrottleFunction, useThrottleValue } from '../../composables'
+ *    ...
+ *    const localThrottledFunction = useThrottleFunction(functionToThrottle, props)
+ *    const localThrottledValue = useThrottleValue(reactiveValueToThrottle, props)
+ */
+
+import {
+  ref, toRef, unref,
+  watch,
+  Ref, ExtractPropTypes, ComponentInternalInstance,
+} from 'vue'
+
+type ThrottledFunctionArgs = any[]
+type ThrottledFunction<Output> = (...args: ThrottledFunctionArgs) => Output
+
+export const useThrottleProps = {
+  delay: {
+    type: Number,
+    default: 0,
+    validator: (value: number) => value >= 0,
+  },
+}
+
+type UseThrottleProps = ExtractPropTypes<typeof useThrottleProps>
+
+/**
+ * @param fn passed function to throttle
+ * @param props { delay } call delay in ms
+ */
+export function useThrottleFunction<Output> (fn: ThrottledFunction<Output>, props: UseThrottleProps) {
+  const delay = toRef(props, 'delay') ?? 0
+
+  const isThrottled = ref(true)
+
+  /**
+   * No way this will be returned without reassignment, so we don't want typescript
+   * to always keep undefined as possible return type. If function returns undefined itself
+   * it will be still presented by typescript as undefined (expected behaviour).
+   */
+  let lastCallResult = undefined as any as Output
+
+  return function (this: any, ...args: ThrottledFunctionArgs) {
+    const invoke = () => fn.apply(this, args)
+
+    if (!unref(delay)) { return invoke() }
+
+    if (isThrottled.value) {
+      isThrottled.value = false
+
+      setTimeout(() => (isThrottled.value = true), unref(delay))
+
+      lastCallResult = invoke()
+    }
+
+    return lastCallResult
+  }
+}
+
+/**
+ * @param value passed reactive value to throttle
+ * @param props { delay } call delay in ms
+ */
+export function useThrottleValue<T> (value: Ref<T>, props: UseThrottleProps): Ref<T> {
+  const delay = toRef(props, 'delay') ?? 0
+
+  if (!unref(delay)) { return value }
+
+  const isThrottled = ref(true)
+
+  const previousCallValue = ref<T>() as Ref<T>
+  const previousReturnedValue = ref<T>() as Ref<T>
+  const currentCallValue = ref<T>() as Ref<T>
+
+  watch(value, () => {
+    // we save and return last call value at the end if no more calls were provided
+    previousCallValue.value = value.value
+    const lastCallValue = setTimeout(() => {
+      currentCallValue.value = previousCallValue.value
+    }, unref(delay))
+
+    if (isThrottled.value) {
+      isThrottled.value = false
+
+      currentCallValue.value = value.value
+      previousReturnedValue.value = value.value
+
+      // no need to return previously saved value anymore
+      clearTimeout(lastCallValue)
+
+      setTimeout(() => (isThrottled.value = true), unref(delay))
+    } else {
+      currentCallValue.value = previousReturnedValue.value
+    }
+  }, { immediate: true })
+
+  return currentCallValue
+}