diff --git a/src/components/layout/global-shortcuts.tsx b/src/components/layout/global-shortcuts.tsx index 0805cd69a..4a8cd5130 100644 --- a/src/components/layout/global-shortcuts.tsx +++ b/src/components/layout/global-shortcuts.tsx @@ -1,7 +1,13 @@ "use client"; import { useRouter } from "next/navigation"; -import { useEffect, useMemo, useRef, useSyncExternalStore } from "react"; +import { + useEffect, + useMemo, + useRef, + useState, + useSyncExternalStore, +} from "react"; import { stepDay, useOpenDay } from "@/components/day/day-layer-controller"; import { useTodayKey } from "@/components/day/use-today-key"; @@ -11,7 +17,7 @@ import { visibleCaptureKinds, } from "@/components/layout/capture-picker"; import { openCommandPalette } from "@/components/command-palette/palette-store"; -import { KeyboardShortcutsDialog } from "@/components/layout/keyboard-shortcuts-dialog"; +import dynamic from "next/dynamic"; import { isSettingsUtilityDestination, visibleNavDestinations, @@ -43,6 +49,15 @@ import { * does not know there is a `?` to press. */ +// The list is loaded the first time it opens; no page pays for it before. +const KeyboardShortcutsDialog = dynamic( + () => + import("@/components/layout/keyboard-shortcuts-dialog").then( + (m) => m.KeyboardShortcutsDialog, + ), + { ssr: false }, +); + let helpOpen = false; const helpListeners = new Set<() => void>(); @@ -192,14 +207,20 @@ export function GlobalShortcuts() { }; }, []); + // Mounted from the first open on, so the close animation still plays. + const [helpWanted, setHelpWanted] = useState(false); + if (open && !helpWanted) setHelpWanted(true); + return ( <> - + {helpWanted ? ( + + ) : null} {offer.canCapture ? ( ) : null}