fix: debounce sendHeight (#426)

* fix: debounce sendHeight

* feat: allow autoresize debounce time to be set through config

* docs: add TS docs for

Author: swouf

package.json

@@ -52,6 +52,7 @@
     "axios": "1.7.7",
     "dexie": "4.0.8",
     "http-status-codes": "2.3.0",
+    "lodash.debounce": "4.0.8",
     "miragejs": "0.1.48",
     "msw": "2.4.11",
     "uuid": "10.0.0"
@@ -68,6 +69,7 @@
     "@testing-library/dom": "10.4.0",
     "@testing-library/react": "16",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
+    "@types/lodash.debounce": "^4",
     "@types/node": "20.16.5",
     "@types/react": "18.3.8",
     "@types/react-dom": "18.3.0",

src/config/constants.ts

@@ -17,3 +17,5 @@ export const MOCK_TOKEN = 'mock-token';
 export const APP_ACTIONS_TOPIC = 'app-actions';
 export const APP_DATA_TOPIC = 'app-data';
 export const APP_SETTINGS_TOPIC = 'app-settings';
+
+export const DEBOUNCE_TIME_AUTORESIZE = 150; // Unit: ms

src/hooks/postMessage.ts

@@ -7,6 +7,7 @@ import { useEffect } from 'react';
 import { LocalContext } from '@graasp/sdk';
 
 import { useQuery, useQueryClient } from '@tanstack/react-query';
+import debounce from 'lodash.debounce';
 
 import * as Api from '../api/index.js';
 import {
@@ -314,14 +315,14 @@ const configurePostMessageHooks = (queryConfig: QueryClientConfig) => {
 
     useEffect(() => {
       if (!queryConfig.isStandalone) {
-        const sendHeight = (height: number): void => {
+        const sendHeight = debounce((height: number): void => {
           console.debug('[app-postMessage] Sending height', height);
           console.debug('communication channel is', communicationChannel);
           communicationChannel?.postMessage({
             type: POST_MESSAGE_KEYS.POST_AUTO_RESIZE,
             payload: height,
           });
-        };
+        }, queryConfig.debounceTimeAutoResize);
         if (!communicationChannel) {
           const error = new MissingMessageChannelPortError();
           console.error(error);
@@ -340,7 +341,10 @@ const configurePostMessageHooks = (queryConfig: QueryClientConfig) => {
         });
         resizeObserver.observe(document.body);
 
-        return () => resizeObserver.disconnect();
+        return () => {
+          sendHeight.cancel();
+          resizeObserver.disconnect();
+        };
       }
       return () => {};
       // eslint-disable-next-line react-hooks/exhaustive-deps

src/queryClient.ts

@@ -10,7 +10,11 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 
 import { API_ROUTES } from './api/routes.js';
-import { CACHE_TIME_MILLISECONDS, STALE_TIME_MILLISECONDS } from './config/constants.js';
+import {
+  CACHE_TIME_MILLISECONDS,
+  DEBOUNCE_TIME_AUTORESIZE,
+  STALE_TIME_MILLISECONDS,
+} from './config/constants.js';
 import { QUERY_KEYS, buildPostMessageKeys } from './config/keys.js';
 import configureHooks from './hooks/index.js';
 import configureMutations from './mutations/index.js';
@@ -78,6 +82,7 @@ const configure = (
     enableWebsocket: Boolean(config.enableWebsocket),
     refetchOnWindowFocus: config.refetchOnWindowFocus ?? false,
     isStandalone: config.isStandalone ?? false,
+    debounceTimeAutoResize: config.debounceTimeAutoResize ?? DEBOUNCE_TIME_AUTORESIZE,
   };
 
   // create queryclient with given config

src/types.ts

@@ -34,6 +34,14 @@ export type OptionalQueryClientConfig = {
   WS_HOST?: string;
   enableWebsocket: boolean;
   isStandalone: boolean;
+  /**
+   * Time in milliseconds for debouncing the autoresize hook defined in {@link postMessage}.
+   * Sending the height from the app to the parent window will be delayed until after
+   * `debounceTimeAutoResize` milliseconds have elapsed since the last time the height was
+   * sent.
+   * @see {@link https://lodash.com/docs/#debounce}
+   */
+  debounceTimeAutoResize: number;
 
   /**
    * @deprecated Use GRAASP_APP_KEY instead

yarn.lock

@@ -977,6 +977,7 @@ __metadata:
     "@testing-library/dom": "npm:10.4.0"
     "@testing-library/react": "npm:16"
     "@trivago/prettier-plugin-sort-imports": "npm:4.3.0"
+    "@types/lodash.debounce": "npm:^4"
     "@types/node": "npm:20.16.5"
     "@types/react": "npm:18.3.8"
     "@types/react-dom": "npm:18.3.0"
@@ -1001,6 +1002,7 @@ __metadata:
     happy-dom: "npm:15.7.4"
     http-status-codes: "npm:2.3.0"
     husky: "npm:9.1.6"
+    lodash.debounce: "npm:4.0.8"
     miragejs: "npm:0.1.48"
     msw: "npm:2.4.11"
     nock: "npm:13.5.5"
@@ -1961,6 +1963,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/lodash.debounce@npm:^4":
+  version: 4.0.9
+  resolution: "@types/lodash.debounce@npm:4.0.9"
+  dependencies:
+    "@types/lodash": "npm:*"
+  checksum: 10/8183a152e01928e3b97ca773f6ae6038b8695e76493ba8bf6b743ec143948a62294fbc9d49fa4a78b52265b3ba4892ef57534e0c13d04aa0f111671b5a944feb
+  languageName: node
+  linkType: hard
+
+"@types/lodash@npm:*":
+  version: 4.17.12
+  resolution: "@types/lodash@npm:4.17.12"
+  checksum: 10/3d829f97c0ea713135e6eb48e983feffb315f4cf228d03654ca8a328e3fecd03005bf7dd30bf411f4306967c610d96738d441588283a41456815f2ce1fd7044c
+  languageName: node
+  linkType: hard
+
 "@types/mute-stream@npm:^0.0.4":
   version: 0.0.4
   resolution: "@types/mute-stream@npm:0.0.4"
@@ -5396,6 +5414,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.debounce@npm:4.0.8":
+  version: 4.0.8
+  resolution: "lodash.debounce@npm:4.0.8"
+  checksum: 10/cd0b2819786e6e80cb9f5cda26b1a8fc073daaf04e48d4cb462fa4663ec9adb3a5387aa22d7129e48eed1afa05b482e2a6b79bfc99b86886364449500cbb00fd
+  languageName: node
+  linkType: hard
+
 "lodash.isplainobject@npm:^4.0.6":
   version: 4.0.6
   resolution: "lodash.isplainobject@npm:4.0.6"