Merge pull request #469 from Jaspreet-singh-1032/issue-461-optimize-u…

…seKWindowDimensions-performance debounced updateWindow
learningequality · Oct 19, 2023 · 6aab0a6 · 6aab0a6
2 parents 776c0a6 + cf2909e
commit 6aab0a6
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,17 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 <!-- All new changelog items should come here -->
 
+- [#469]
+  - **Description:** Throttle the resize listener handler
+  - **Products impact:** updated API
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/461
+  - **Components:** useKResponsiveWindow
+  - **Breaking:** no
+  - **Impacts a11y:** no
+  - **Guidance:** -
+
+[#469]: https://github.com/learningequality/kolibri-design-system/pull/469
+
 - [#472]
   - **Description:** Fix useKShow bug and add tests
   - **Products impact:** bugfix

diff --git a/lib/__tests__/useKWindowDimensions.spec.js b/lib/__tests__/useKWindowDimensions.spec.js
@@ -22,16 +22,22 @@ describe('useKWindowDimensions composable', () => {
 
   it('check if windowWidth and windowHeight properties are initialized on mount', () => {
     const wrapper = mount(TestComponent);
-    expect(wrapper.vm.windowWidth).toEqual(expect.any(Number));
-    expect(wrapper.vm.windowHeight).toEqual(expect.any(Number));
+    // Wait for the throttling delay
+    setTimeout(() => {
+      expect(wrapper.vm.windowWidth).toEqual(expect.any(Number));
+      expect(wrapper.vm.windowHeight).toEqual(expect.any(Number));
+    }, 20);
   });
 
   it('check if windowWidth and windowHeight change when window is resized', () => {
     const wrapper = mount(TestComponent);
     expect(wrapper.vm.windowWidth).not.toEqual(600);
     expect(wrapper.vm.windowHeight).not.toEqual(400);
     resizeWindow(600, 400);
-    expect(wrapper.vm.windowWidth).toEqual(600);
-    expect(wrapper.vm.windowHeight).toEqual(400);
+    // Wait for the throttling delay
+    setTimeout(() => {
+      expect(wrapper.vm.windowWidth).toEqual(600);
+      expect(wrapper.vm.windowHeight).toEqual(400);
+    }, 20);
   });
 });
diff --git a/lib/useKResponsiveWindow/__tests__/useKResponsiveWindow.spec.js b/lib/useKResponsiveWindow/__tests__/useKResponsiveWindow.spec.js
@@ -36,73 +36,100 @@ describe('useKResponsiveWindow composable', () => {
     resizeWindow(1700);
     const wrapper = mount(TestComponent());
     await wrapper.vm.$nextTick();
-    expect(wrapper.vm.windowWidth).toEqual(1700);
-    expect(wrapper.vm.windowHeight).toEqual(768);
-    expect(wrapper.vm.windowBreakpoint).toEqual(7);
-    expect(wrapper.vm.windowIsPortrait).toEqual(false);
-    expect(wrapper.vm.windowIsLandscape).toEqual(true);
-    expect(wrapper.vm.windowGutter).toEqual(24);
-    expect(wrapper.vm.windowIsShort).toEqual(false);
-    expect(wrapper.vm.windowIsLarge).toEqual(true);
-    expect(wrapper.vm.windowIsMedium).toEqual(false);
-    expect(wrapper.vm.windowIsSmall).toEqual(false);
+    // Wait for the throttling delay
+    setTimeout(() => {
+      expect(wrapper.vm.windowWidth).toEqual(1700);
+      expect(wrapper.vm.windowHeight).toEqual(768);
+      expect(wrapper.vm.windowBreakpoint).toEqual(7);
+      expect(wrapper.vm.windowIsPortrait).toEqual(false);
+      expect(wrapper.vm.windowIsLandscape).toEqual(true);
+      expect(wrapper.vm.windowGutter).toEqual(24);
+      expect(wrapper.vm.windowIsShort).toEqual(false);
+      expect(wrapper.vm.windowIsLarge).toEqual(true);
+      expect(wrapper.vm.windowIsMedium).toEqual(false);
+      expect(wrapper.vm.windowIsSmall).toEqual(false);
+    }, 20);
   });
 
   describe('check if windowBreakpoint is set on width change', () => {
     it('windowBreakpoint is 0 if width <= 480px', async () => {
       resizeWindow(400);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.windowBreakpoint).toEqual(0);
+      // Wait for the throttling delay
+      setTimeout(() => {
+        expect(wrapper.vm.windowBreakpoint).toEqual(0);
+      }, 20);
     });
 
     it('windowBreakpoint is 1 if 480px < width <= 600px', async () => {
       resizeWindow(540);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.windowBreakpoint).toEqual(1);
+      // Wait for the throttling delay
+      setTimeout(() => {
+        expect(wrapper.vm.windowBreakpoint).toEqual(1);
+      }, 20);
     });
 
     it('windowBreakpoint is 2 if 600px < width <= 840px', async () => {
       resizeWindow(800);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.windowBreakpoint).toEqual(2);
+      // Wait for the throttling delay
+      setInterval(() => {
+        expect(wrapper.vm.windowBreakpoint).toEqual(2);
+      }, 20);
     });
 
     it('windowBreakpoint is 3 if 840px < width <= 944px', async () => {
       resizeWindow(944);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.windowBreakpoint).toEqual(3);
+      // Wait for the throttling delay
+      setTimeout(() => {
+        expect(wrapper.vm.windowBreakpoint).toEqual(3);
+      }, 20);
     });
 
     it('windowBreakpoint is 4 if 944px < width <= 1264px', async () => {
       resizeWindow(1264);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.windowBreakpoint).toEqual(4);
+      // Wait for the throttling delay
+      setTimeout(() => {
+        expect(wrapper.vm.windowBreakpoint).toEqual(4);
+      }, 20);
     });
 
     it('windowBreakpoint is 5 if 1264px < width <= 1424px', async () => {
       resizeWindow(1424);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.windowBreakpoint).toEqual(5);
+      // Wait for the throttling delay
+      setTimeout(() => {
+        expect(wrapper.vm.windowBreakpoint).toEqual(5);
+      }, 20);
     });
 
     it('windowBreakpoint is 6 if 1424px < width <= 1584px', async () => {
       resizeWindow(1584);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.windowBreakpoint).toEqual(6);
+      // Wait for the throttling delay
+      setTimeout(() => {
+        expect(wrapper.vm.windowBreakpoint).toEqual(6);
+      }, 20);
     });
 
     it('windowBreakpoint is 7 if width >= 1601px', async () => {
       resizeWindow(1800);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.windowBreakpoint).toEqual(7);
+      // Wait for the throttling delay
+      setTimeout(() => {
+        expect(wrapper.vm.windowBreakpoint).toEqual(7);
+      }, 20);
     });
   });
 
@@ -111,7 +138,10 @@ describe('useKResponsiveWindow composable', () => {
       resizeWindow(601);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.windowIsSmall).toEqual(false);
+      // Wait for the throttling delay
+      setTimeout(() => {
+        expect(wrapper.vm.windowIsSmall).toEqual(false);
+      }, 20);
     });
 
     it('windowIsSmall is true if width <= 600px', async () => {
@@ -134,7 +164,10 @@ describe('useKResponsiveWindow composable', () => {
       resizeWindow(700);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.windowIsMedium).toEqual(true);
+      // Wait for the throttling delay
+      setTimeout(() => {
+        expect(wrapper.vm.windowIsMedium).toEqual(true);
+      }, 20);
     });
   });
 
@@ -150,7 +183,10 @@ describe('useKResponsiveWindow composable', () => {
       resizeWindow(841);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.windowIsLarge).toEqual(true);
+      // Wait for the throttling delay
+      setTimeout(() => {
+        expect(wrapper.vm.windowIsLarge).toEqual(true);
+      }, 20);
     });
   });
 
@@ -193,14 +229,20 @@ describe('useKResponsiveWindow composable', () => {
       resizeWindow(500, 500);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.windowBreakpoint).toEqual(1);
-      expect(wrapper.vm.windowGutter).toEqual(16);
+      // Wait for the throttling delay
+      setTimeout(() => {
+        expect(wrapper.vm.windowBreakpoint).toEqual(1);
+        expect(wrapper.vm.windowGutter).toEqual(16);
+      }, 20);
     });
     it('windowGutter is 24px if windowIsSmall is false(width > 600px)', async () => {
       resizeWindow(841);
       const wrapper = mount(TestComponent());
       await wrapper.vm.$nextTick();
-      expect(wrapper.vm.windowGutter).toEqual(24);
+      // Wait for the throttling delay
+      setTimeout(() => {
+        expect(wrapper.vm.windowGutter).toEqual(24);
+      }, 20);
     });
   });
 });
diff --git a/lib/useKWindowDimensions.js b/lib/useKWindowDimensions.js
@@ -1,5 +1,6 @@
 import './composition-api'; //Due to @vue/composition-api shortcomings, add plugin prior to use in kolibri, studio and tests
 import { onMounted, onUnmounted, ref } from '@vue/composition-api';
+import { throttle } from 'frame-throttle';
 
 /** Global variables */
 export const windowWidth = ref(null);
@@ -16,6 +17,8 @@ const updateWindow = () => {
   windowHeight.value = metrics.height;
 };
 
+const throttledUpdateWindow = throttle(updateWindow);
+
 /**
  * Returns window inner width and height
  * @returns {Object} The window's inner width and height
@@ -73,12 +76,12 @@ function isUseKWindowDimensionsActiveElsewhere() {
 export default function useKWindowDimensions() {
   onMounted(() => {
     usageCount.value++;
-    addWindowListener(updateWindow);
+    addWindowListener(throttledUpdateWindow);
   });
 
   onUnmounted(() => {
     usageCount.value--;
-    removeWindowListener(updateWindow);
+    removeWindowListener(throttledUpdateWindow);
   });
 
   return {