perf(app): load the keyboard mode intro modal only when it is shown (#1880)

This commit is contained in:
Hampus authored and GitHub committed 2026-08-24 12:37:12 +02:00
1 parent 5821a68816
commit 9b3dc19037
2 files changed
+7 -5

No files matched your search

@@ -52,7 +52,7 @@ export const KeyboardModeListener = observer(() => {
useEffect(() => { useEffect(() => {
let lastWindowFocusTime = document.hasFocus() ? 0 : -Infinity; let lastWindowFocusTime = document.hasFocus() ? 0 : -Infinity;
const REFOCUS_THRESHOLD_MS = 100; const REFOCUS_THRESHOLD_MS = 100;
const handleWindowFocus = () => { const handleWindowFocused = () => {
lastWindowFocusTime = performance.now(); lastWindowFocusTime = performance.now();
}; };
const handleKeyDown = (event: KeyboardEvent) => { const handleKeyDown = (event: KeyboardEvent) => {
@@ -75,12 +75,12 @@ export const KeyboardModeListener = observer(() => {
KeyboardMode.exitKeyboardMode(); KeyboardMode.exitKeyboardMode();
} }
}; };
window.addEventListener('focus', handleWindowFocus); window.addEventListener('focus', handleWindowFocused);
window.addEventListener('keydown', handleKeyDown, true); window.addEventListener('keydown', handleKeyDown, true);
window.addEventListener('mousedown', handlePointer, true); window.addEventListener('mousedown', handlePointer, true);
window.addEventListener('pointerdown', handlePointer, true); window.addEventListener('pointerdown', handlePointer, true);
return () => { return () => {
window.removeEventListener('focus', handleWindowFocus); window.removeEventListener('focus', handleWindowFocused);
window.removeEventListener('keydown', handleKeyDown, true); window.removeEventListener('keydown', handleKeyDown, true);
window.removeEventListener('mousedown', handlePointer, true); window.removeEventListener('mousedown', handlePointer, true);
window.removeEventListener('pointerdown', handlePointer, true); window.removeEventListener('pointerdown', handlePointer, true);
@@ -1,6 +1,5 @@
// SPDX-License-Identifier: AGPL-3.0-or-later // SPDX-License-Identifier: AGPL-3.0-or-later
import {KeyboardModeIntroModal} from '@app/features/input/components/modals/KeyboardModeIntroModal';
import {Logger} from '@app/features/platform/utils/AppLogger'; import {Logger} from '@app/features/platform/utils/AppLogger';
import {registerKeyboardModeRestoreCallback, registerKeyboardModeStateResolver} from '@app/features/ui/state/Modal'; import {registerKeyboardModeRestoreCallback, registerKeyboardModeStateResolver} from '@app/features/ui/state/Modal';
import {makeSyncedField} from '@app/features/user/state/SyncedField'; import {makeSyncedField} from '@app/features/user/state/SyncedField';
@@ -35,7 +34,10 @@ class KeyboardMode {
}); });
if (showIntro && !this.introSeen) { if (showIntro && !this.introSeen) {
this.introSeen = true; this.introSeen = true;
void import('@app/features/ui/commands/ModalCommands').then(({modal, push}) => { void Promise.all([
import('@app/features/ui/commands/ModalCommands'),
import('@app/features/input/components/modals/KeyboardModeIntroModal'),
]).then(([{modal, push}, {KeyboardModeIntroModal}]) => {
push(modal(() => <KeyboardModeIntroModal data-flx="ui.keyboard-mode.keyboard-mode-intro-modal" />)); push(modal(() => <KeyboardModeIntroModal data-flx="ui.keyboard-mode.keyboard-mode-intro-modal" />));
}); });
} }