From 9d3d91121274624abac1859824b582e1f3e7f354 Mon Sep 17 00:00:00 2001 From: Robbie Coomber Date: Wed, 20 Nov 2024 15:55:45 +0000 Subject: [PATCH] Add debouncing to the onchange function --- .../VerticalNestedDND/VerticalNestedDND.tsx | 16 ++++++-- package.json | 4 ++ pnpm-lock.yaml | 41 +++++++++++++++---- 3 files changed, 49 insertions(+), 12 deletions(-) diff --git a/frontend/src/lib/lemon-ui/VerticalNestedDND/VerticalNestedDND.tsx b/frontend/src/lib/lemon-ui/VerticalNestedDND/VerticalNestedDND.tsx index c4093bde31d..735032793b6 100644 --- a/frontend/src/lib/lemon-ui/VerticalNestedDND/VerticalNestedDND.tsx +++ b/frontend/src/lib/lemon-ui/VerticalNestedDND/VerticalNestedDND.tsx @@ -30,7 +30,9 @@ import type { Transform } from '@dnd-kit/utilities' import { CSS } from '@dnd-kit/utilities' import { IconBuilding, IconTrash } from '@posthog/icons' import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton' -import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react' +import debounce from 'lodash.debounce' +import isEqual from 'lodash.isequal' +import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { createPortal, unstable_batchedUpdates } from 'react-dom' export interface VDNDChildItem { id: UniqueIdentifier @@ -76,10 +78,18 @@ export function VerticalNestedDND (onChange ? debounce(onChange, 200, { trailing: true }) : undefined), + [onChange] + ) + const savedChanges = useRef(initialItems) useEffect(() => { const newItemsArray = containers.map((containerId) => items[containerId]) - onChange?.(newItemsArray) - }, [containers, items, onChange]) + if (!isEqual(newItemsArray, savedChanges.current)) { + savedChanges.current = newItemsArray + debouncedOnChanged?.(newItemsArray) + } + }, [containers, items, debouncedOnChanged]) const collisionDetectionStrategy: CollisionDetection = useCallback( (args) => { diff --git a/package.json b/package.json index cbd9de0e31d..3bd029fb93e 100644 --- a/package.json +++ b/package.json @@ -96,6 +96,8 @@ "@tiptap/react": "^2.1.16", "@tiptap/starter-kit": "^2.1.16", "@tiptap/suggestion": "^2.1.16", + "@types/lodash.debounce": "^4.0.9", + "@types/lodash.isequal": "^4.5.8", "@types/md5": "^2.3.0", "@types/react-transition-group": "^4.4.5", "@types/react-virtualized": "^9.21.23", @@ -145,6 +147,8 @@ "kea-test-utils": "^0.2.4", "kea-waitfor": "^0.2.1", "kea-window-values": "^3.0.0", + "lodash.debounce": "^4.0.8", + "lodash.isequal": "^4.5.0", "lodash.merge": "^4.6.2", "lodash.uniqby": "^4.7.0", "maplibre-gl": "^3.5.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d6e8bd632f0..fd923638f0c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -109,6 +109,12 @@ dependencies: '@tiptap/suggestion': specifier: ^2.1.16 version: 2.1.16(@tiptap/core@2.1.16)(@tiptap/pm@2.1.16) + '@types/lodash.debounce': + specifier: ^4.0.9 + version: 4.0.9 + '@types/lodash.isequal': + specifier: ^4.5.8 + version: 4.5.8 '@types/md5': specifier: ^2.3.0 version: 2.3.2 @@ -256,6 +262,12 @@ dependencies: kea-window-values: specifier: ^3.0.0 version: 3.0.0(kea@3.1.5) + lodash.debounce: + specifier: ^4.0.8 + version: 4.0.8 + lodash.isequal: + specifier: ^4.5.0 + version: 4.5.0 lodash.merge: specifier: ^4.6.2 version: 4.6.2 @@ -6465,7 +6477,7 @@ packages: '@storybook/preview-api': 7.6.4 '@storybook/theming': 7.6.4(react-dom@18.2.0)(react@18.2.0) '@storybook/types': 7.6.4 - '@types/lodash': 4.14.188 + '@types/lodash': 4.17.13 color-convert: 2.0.1 dequal: 2.0.3 lodash: 4.17.21 @@ -8406,21 +8418,32 @@ packages: resolution: {integrity: sha512-PecSzorDGdabF57OBeQO/xFbAkYWo88g4Xvnsx7LRwqLC17I7OoKtA3bQB9uXkY6UkMWCOsA8HSVpaoitscdXw==} dev: false + /@types/lodash.debounce@4.0.9: + resolution: {integrity: sha512-Ma5JcgTREwpLRwMM+XwBR7DaWe96nC38uCBDFKZWbNKD+osjVzdpnUSwBcqCptrp16sSOLBAUb50Car5I0TCsQ==} + dependencies: + '@types/lodash': 4.17.13 + dev: false + + /@types/lodash.isequal@4.5.8: + resolution: {integrity: sha512-uput6pg4E/tj2LGxCZo9+y27JNyB2OZuuI/T5F+ylVDYuqICLG2/ktjxx0v6GvVntAf8TvEzeQLcV0ffRirXuA==} + dependencies: + '@types/lodash': 4.17.13 + dev: false + /@types/lodash.merge@4.6.9: resolution: {integrity: sha512-23sHDPmzd59kUgWyKGiOMO2Qb9YtqRO/x4IhkgNUiPQ1+5MUVqi6bCZeq9nBJ17msjIMbEIO5u+XW4Kz6aGUhQ==} dependencies: - '@types/lodash': 4.14.188 + '@types/lodash': 4.17.13 dev: true /@types/lodash.uniqby@4.7.9: resolution: {integrity: sha512-rjrXji/seS6BZJRgXrU2h6FqxRVufsbq/HE0Tx0SdgbtlWr2YmD/M64BlYEYYlaMcpZwy32IYVkMfUMYlPuv0w==} dependencies: - '@types/lodash': 4.14.188 + '@types/lodash': 4.17.13 dev: true - /@types/lodash@4.14.188: - resolution: {integrity: sha512-zmEmF5OIM3rb7SbLCFYoQhO4dGt2FRM9AMkxvA3LaADOF1n8in/zGJlWji9fmafLoNyz+FoL6FE0SLtGIArD7w==} - dev: true + /@types/lodash@4.17.13: + resolution: {integrity: sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==} /@types/mapbox__point-geometry@0.1.3: resolution: {integrity: sha512-2W46IOXlu7vC8m3+M5rDqSnuY22GFxxx3xhkoyqyPWrD+eP2iAwNst0A1+umLYjCTJMJTSpiofphn9h9k+Kw+w==} @@ -18410,7 +18433,7 @@ packages: react: '>=15' dependencies: react: 18.2.0 - unlayer-types: 1.157.0 + unlayer-types: 1.169.0 dev: false /react-error-boundary@3.1.4(react@18.2.0): @@ -20957,8 +20980,8 @@ packages: resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==} engines: {node: '>= 10.0.0'} - /unlayer-types@1.157.0: - resolution: {integrity: sha512-D9xnoeQREgUxEkaFG3q90CVicmysu8REVIkQA3alHaTG3JM+LPzdq20vjrd6V4iGuvvUD8L5EDQybSsSRS/k+g==} + /unlayer-types@1.169.0: + resolution: {integrity: sha512-BXT4C/MzrYIiiEXHOovtquGehX4IXLYKx3qo4SwYGmqmaGMvZLKvt2rDlO+DKUjVnvGHxgre/tAbUl3I5Gnpxg==} dev: false /unpipe@1.0.0: