From 9e764d313c2941fbf09f62c1c807ae0ff0a9387f Mon Sep 17 00:00:00 2001 From: Ben White Date: Thu, 23 Nov 2023 14:22:43 +0100 Subject: [PATCH 1/4] Added a debounce to the default resize observer --- frontend/src/lib/hooks/useResizeObserver.ts | 26 ++++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) diff --git a/frontend/src/lib/hooks/useResizeObserver.ts b/frontend/src/lib/hooks/useResizeObserver.ts index 8e1db5844577a..880e82115e61a 100644 --- a/frontend/src/lib/hooks/useResizeObserver.ts +++ b/frontend/src/lib/hooks/useResizeObserver.ts @@ -1,5 +1,6 @@ import { RefCallback, RefObject, useMemo, useState } from 'react' import ResizeObserver from 'resize-observer-polyfill' +import { useDebouncedCallback } from 'use-debounce' import useResizeObserverImport from 'use-resize-observer' // Use polyfill only if needed @@ -7,7 +8,30 @@ if (!window.ResizeObserver) { window.ResizeObserver = ResizeObserver } -export const useResizeObserver = useResizeObserverImport +export type ResizeResponse = { + width?: number + height?: number +} + +export function useResizeObserver(opts?: { + ref?: RefObject | T | null | undefined + onResize?: (response: ResizeResponse) => void + debounceMs?: number +}): { ref: RefCallback | RefObject } & ResizeResponse { + const [size, setSize] = useState({}) + + const setSizeDebounced = useDebouncedCallback((value: ResizeResponse) => setSize(value), opts?.debounceMs ?? 100) + + const { ref } = useResizeObserverImport({ + ref: opts?.ref, + onResize: (size) => { + opts?.onResize?.(size) + setSizeDebounced(size) + }, + }) + + return { ref, ...size } +} export function useResizeBreakpoints( breakpoints: { [key: number]: T }, From 78dacdb130166b038b95af6da6dc30413bda1ad1 Mon Sep 17 00:00:00 2001 From: Ben White Date: Thu, 23 Nov 2023 14:27:17 +0100 Subject: [PATCH 2/4] Fix --- frontend/src/lib/hooks/useResizeObserver.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/lib/hooks/useResizeObserver.ts b/frontend/src/lib/hooks/useResizeObserver.ts index 880e82115e61a..c99e2679c6dce 100644 --- a/frontend/src/lib/hooks/useResizeObserver.ts +++ b/frontend/src/lib/hooks/useResizeObserver.ts @@ -17,7 +17,7 @@ export function useResizeObserver(opts?: { ref?: RefObject | T | null | undefined onResize?: (response: ResizeResponse) => void debounceMs?: number -}): { ref: RefCallback | RefObject } & ResizeResponse { +}): { ref: RefCallback } & ResizeResponse { const [size, setSize] = useState({}) const setSizeDebounced = useDebouncedCallback((value: ResizeResponse) => setSize(value), opts?.debounceMs ?? 100) From ab11189855bb55944dce1ccfae3fed4d3fa200d1 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 28 Nov 2023 12:44:12 +0000 Subject: [PATCH 3/4] Update query snapshots --- .../test/__snapshots__/test_session_recordings.ambr | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/posthog/session_recordings/test/__snapshots__/test_session_recordings.ambr b/posthog/session_recordings/test/__snapshots__/test_session_recordings.ambr index 0afe5e0ac247d..dc6d8faaf2c19 100644 --- a/posthog/session_recordings/test/__snapshots__/test_session_recordings.ambr +++ b/posthog/session_recordings/test/__snapshots__/test_session_recordings.ambr @@ -633,7 +633,7 @@ FROM "posthog_persondistinctid" INNER JOIN "posthog_person" ON ("posthog_persondistinctid"."person_id" = "posthog_person"."id") WHERE ("posthog_persondistinctid"."distinct_id" IN ('user2', - 'user_one_2') + 'user_one_1') AND "posthog_persondistinctid"."team_id" = 2) /*controller='project_session_recordings-list',route='api/projects/%28%3FP%3Cparent_lookup_team_id%3E%5B%5E/.%5D%2B%29/session_recordings/%3F%24'*/ ' --- From a3971081e9f567c6edd7c3164299de32629eb22b Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 28 Nov 2023 12:56:55 +0000 Subject: [PATCH 4/4] Update query snapshots --- .../test/__snapshots__/test_session_recordings.ambr | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/posthog/session_recordings/test/__snapshots__/test_session_recordings.ambr b/posthog/session_recordings/test/__snapshots__/test_session_recordings.ambr index dc6d8faaf2c19..0afe5e0ac247d 100644 --- a/posthog/session_recordings/test/__snapshots__/test_session_recordings.ambr +++ b/posthog/session_recordings/test/__snapshots__/test_session_recordings.ambr @@ -633,7 +633,7 @@ FROM "posthog_persondistinctid" INNER JOIN "posthog_person" ON ("posthog_persondistinctid"."person_id" = "posthog_person"."id") WHERE ("posthog_persondistinctid"."distinct_id" IN ('user2', - 'user_one_1') + 'user_one_2') AND "posthog_persondistinctid"."team_id" = 2) /*controller='project_session_recordings-list',route='api/projects/%28%3FP%3Cparent_lookup_team_id%3E%5B%5E/.%5D%2B%29/session_recordings/%3F%24'*/ ' ---