Desktop: Fixes #11129: Improve performance by allowing note list background timers to be cancelled (#11133)

packages/app-desktop/gui/NoteListItem/utils/useRootElement.test.ts

@@ -0,0 +1,55 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import useRootElement from './useRootElement';
+
+describe('useRootElement', () => {
+	beforeEach(() => {
+		jest.useFakeTimers({ advanceTimers: true });
+	});
+
+	test('should find an element with a matching ID', async () => {
+		const testElement = document.createElement('div');
+		testElement.id = 'test-element-id';
+		document.body.appendChild(testElement);
+
+		const { result } = renderHook(useRootElement, {
+			initialProps: testElement.id,
+		});
+		await act(async () => {
+			await jest.advanceTimersByTimeAsync(100);
+		});
+		expect(result.current).toBe(testElement);
+
+		testElement.remove();
+	});
+
+	test('should redo the element search when the elementId prop changes', async () => {
+		const testElement = document.createElement('div');
+		document.body.appendChild(testElement);
+
+		const { rerender, result } = renderHook(useRootElement, {
+			initialProps: 'some-id-here',
+		});
+		await jest.advanceTimersByTimeAsync(100);
+		expect(result.current).toBe(null);
+
+		// Searching for another non-existent ID: Should not match
+		rerender('updated-id');
+		await jest.advanceTimersByTimeAsync(100);
+		expect(result.current).toBe(null);
+
+		// Should not match the first element if its ID is set to the original (search
+		// should be cancelled).
+		testElement.id = 'some-id-here';
+		await jest.advanceTimersByTimeAsync(100);
+		expect(result.current).toBe(null);
+
+		// Should match if the element ID changes to the updated ID.
+		await act(async () => {
+			testElement.id = 'updated-id';
+			await jest.advanceTimersByTimeAsync(100);
+		});
+		expect(result.current).toBe(testElement);
+
+		testElement.remove();
+	});
+});

packages/app-desktop/gui/NoteListItem/utils/useRootElement.ts

@@ -6,7 +6,7 @@ const useRootElement = (elementId: string) => {
 	const [rootElement, setRootElement] = useState<HTMLDivElement>(null);
 
 	useAsyncEffect(async (event) => {
-		const element = await waitForElement(document, elementId);
+		const element = await waitForElement(document, elementId, event);
 		if (event.cancelled) return;
 		setRootElement(element);
 	}, [document, elementId]);