ENG-1790 Reduce repeated settings reads during page load (#1069)

Author: sid597

apps/roam/src/components/DiscourseNodeMenu.tsx

@@ -27,7 +27,10 @@ import { getNewDiscourseNodeText } from "~/utils/formatUtils";
 import { OnloadArgs } from "roamjs-components/types";
 import { formatHexColor } from "./settings/DiscourseNodeCanvasSettings";
 import posthog from "posthog-js";
-import { setPersonalSetting } from "~/components/settings/utils/accessors";
+import {
+  setPersonalSetting,
+  type SettingsSnapshot,
+} from "~/components/settings/utils/accessors";
 import { PERSONAL_KEYS } from "~/components/settings/utils/settingKeys";
 import type { PersonalSettings } from "~/components/settings/utils/zodSchema";
 
@@ -38,6 +41,7 @@ type Props = {
   trigger?: JSX.Element;
   isShift?: boolean;
   menuMaxHeight?: number;
+  settingsSnapshot?: SettingsSnapshot;
 };
 
 const NodeMenu = ({
@@ -48,6 +52,7 @@ const NodeMenu = ({
   trigger,
   isShift,
   menuMaxHeight,
+  settingsSnapshot,
 }: { onClose: () => void } & Props) => {
   const isInitialTextSelected =
     !!textarea && textarea.selectionStart !== textarea.selectionEnd;
@@ -56,8 +61,11 @@ const NodeMenu = ({
     isInitialTextSelected || (isShift ?? false),
   );
   const userDiscourseNodes = useMemo(
-    () => getDiscourseNodes().filter((n) => n.backedBy === "user"),
-    [],
+    () =>
+      getDiscourseNodes(undefined, settingsSnapshot).filter(
+        (n) => n.backedBy === "user",
+      ),
+    [settingsSnapshot],
   );
   const discourseNodes = userDiscourseNodes.filter(
     (n) => showNodeTypes || n.tag,
@@ -359,10 +367,12 @@ export const TextSelectionNodeMenu = ({
   textarea,
   extensionAPI,
   onClose,
+  settingsSnapshot,
 }: {
   textarea: HTMLTextAreaElement;
   extensionAPI: OnloadArgs["extensionAPI"];
   onClose: () => void;
+  settingsSnapshot?: SettingsSnapshot;
 }) => {
   const trigger = (
     <Button
@@ -403,6 +413,7 @@ export const TextSelectionNodeMenu = ({
       onClose={onClose}
       isShift
       menuMaxHeight={menuMaxHeight}
+      settingsSnapshot={settingsSnapshot}
     />
   );
 };

apps/roam/src/utils/getExportTypes.ts

@@ -21,6 +21,10 @@ import {
   pullBlockToTreeNode,
   collectUids,
 } from "./exportUtils";
+import {
+  bulkReadSettings,
+  type SettingsSnapshot,
+} from "~/components/settings/utils/accessors";
 
 export const updateExportProgress = (detail: {
   progress: number;
@@ -36,6 +40,7 @@ type getExportTypesProps = {
   results?: ExportDialogProps["results"];
   exportId: string;
   isExportDiscourseGraph: boolean;
+  settingsSnapshot?: SettingsSnapshot;
 };
 
 type RoamImportUser = {
@@ -66,9 +71,11 @@ const getExportTypes = ({
   results,
   exportId,
   isExportDiscourseGraph,
+  settingsSnapshot,
 }: getExportTypesProps): ExportTypes => {
-  const allRelations = getDiscourseRelations();
-  const allNodes = getDiscourseNodes(allRelations);
+  const settings = settingsSnapshot ?? bulkReadSettings();
+  const allRelations = getDiscourseRelations(settings);
+  const allNodes = getDiscourseNodes(allRelations, settings);
   const nodeLabelByType = Object.fromEntries(
     allNodes.map((a) => [a.type, a.text]),
   );

apps/roam/src/utils/initializeObserversAndListeners.ts

@@ -229,7 +229,7 @@ export const initObservers = ({
     className: "rm-inline-img",
     callback: (img: HTMLElement) => {
       if (img instanceof HTMLImageElement) {
-        renderImageToolsMenu(img, onloadArgs.extensionAPI);
+        renderImageToolsMenu(img, onloadArgs.extensionAPI, settings);
       }
     },
   });
@@ -443,6 +443,7 @@ export const initObservers = ({
         extensionAPI: onloadArgs.extensionAPI,
         blockElement,
         textarea,
+        settingsSnapshot: settings,
       });
     } else {
       removeTextSelectionPopup();

apps/roam/src/utils/pageRefObserverHandlers.ts

@@ -6,6 +6,10 @@ import { OnloadArgs } from "roamjs-components/types";
 import { renderSuggestive as renderSuggestiveOverlay } from "~/components/SuggestiveModeOverlay";
 import getDiscourseNodes, { type DiscourseNode } from "./getDiscourseNodes";
 import findDiscourseNode from "./findDiscourseNode";
+import {
+  bulkReadSettings,
+  type SettingsSnapshot,
+} from "~/components/settings/utils/accessors";
 
 const PAGE_REF_SELECTOR = "span.rm-page-ref";
 const DISCOURSE_OVERLAY_CLASS = "roamjs-discourse-context-overlay";
@@ -24,11 +28,13 @@ type PageRefDiscourseNodeStatus = {
 };
 
 let batchDiscourseNodes: DiscourseNode[] | null = null;
+let batchSettingsSnapshot: SettingsSnapshot | null = null;
 let clearBatchCacheQueued = false;
 const pageRefDiscourseNodeCache = new Map<string, PageRefDiscourseNodeStatus>();
 
 const clearBatchCache = (): void => {
   batchDiscourseNodes = null;
+  batchSettingsSnapshot = null;
   pageRefDiscourseNodeCache.clear();
   clearBatchCacheQueued = false;
 };
@@ -39,10 +45,21 @@ const queueBatchCacheClear = (): void => {
   queueMicrotask(clearBatchCache);
 };
 
+const getBatchSettingsSnapshot = (): SettingsSnapshot => {
+  if (batchSettingsSnapshot) return batchSettingsSnapshot;
+
+  batchSettingsSnapshot = bulkReadSettings();
+  queueBatchCacheClear();
+  return batchSettingsSnapshot;
+};
+
 const getBatchDiscourseNodes = (): DiscourseNode[] => {
   if (batchDiscourseNodes) return batchDiscourseNodes;
 
-  batchDiscourseNodes = getDiscourseNodes();
+  batchDiscourseNodes = getDiscourseNodes(
+    undefined,
+    getBatchSettingsSnapshot(),
+  );
   queueBatchCacheClear();
   return batchDiscourseNodes;
 };

apps/roam/src/utils/renderImageToolsMenu.tsx

@@ -5,17 +5,24 @@ import getUids from "roamjs-components/dom/getUids";
 import NodeMenu from "~/components/DiscourseNodeMenu";
 import { OnloadArgs } from "roamjs-components/types";
 import posthog from "posthog-js";
+import {
+  bulkReadSettings,
+  type SettingsSnapshot,
+} from "~/components/settings/utils/accessors";
 
 type ImageToolsMenuProps = {
   blockUid: string;
   extensionAPI: OnloadArgs["extensionAPI"];
+  initialSettings: SettingsSnapshot;
 };
 
 const ImageToolsMenu = ({
   blockUid,
   extensionAPI,
+  initialSettings,
 }: ImageToolsMenuProps): JSX.Element => {
   const [menuKey, setMenuKey] = useState(0);
+  const [settings, setSettings] = useState(initialSettings);
 
   const handleEditBlock = useCallback((): void => {
     posthog.capture("Image Tools Menu: Edit Block Clicked");
@@ -24,12 +31,22 @@ const ImageToolsMenu = ({
     });
   }, [blockUid]);
 
+  const refreshSettings = useCallback((): void => {
+    setSettings(bulkReadSettings());
+  }, []);
+
   const handleMenuClose = useCallback(() => {
     setMenuKey((prev) => prev + 1);
   }, []);
 
   const trigger = (
-    <Button icon={"label" as IconName} minimal small title="Add Node Tag" />
+    <Button
+      icon={"label" as IconName}
+      minimal
+      small
+      title="Add Node Tag"
+      onMouseDown={refreshSettings}
+    />
   );
 
   return (
@@ -45,6 +62,7 @@ const ImageToolsMenu = ({
         extensionAPI={extensionAPI}
         trigger={trigger}
         isShift={false}
+        settingsSnapshot={settings}
       />
 
       <Button
@@ -125,6 +143,7 @@ const attachHoverListeners = (
 export const renderImageToolsMenu = (
   imageElement: HTMLImageElement,
   extensionAPI: OnloadArgs["extensionAPI"],
+  initialSettings: SettingsSnapshot,
 ): void => {
   const wrapper = getImageWrapper(imageElement);
   if (!wrapper) return;
@@ -142,7 +161,11 @@ export const renderImageToolsMenu = (
 
   // eslint-disable-next-line react/no-deprecated
   ReactDOM.render(
-    <ImageToolsMenu blockUid={blockUid} extensionAPI={extensionAPI} />,
+    <ImageToolsMenu
+      blockUid={blockUid}
+      extensionAPI={extensionAPI}
+      initialSettings={initialSettings}
+    />,
     menuContainer,
   );
 };

apps/roam/src/utils/renderTextSelectionPopup.tsx

@@ -4,6 +4,7 @@ import { TextSelectionNodeMenu } from "~/components/DiscourseNodeMenu";
 import { getCoordsFromTextarea } from "roamjs-components/components/CursorMenu";
 import { OnloadArgs } from "roamjs-components/types";
 import posthog from "posthog-js";
+import type { SettingsSnapshot } from "~/components/settings/utils/accessors";
 
 let currentPopupContainer: HTMLDivElement | null = null;
 
@@ -44,10 +45,12 @@ export const renderTextSelectionPopup = ({
   extensionAPI,
   blockElement,
   textarea,
+  settingsSnapshot,
 }: {
   extensionAPI: OnloadArgs["extensionAPI"];
   blockElement: Element;
   textarea: HTMLTextAreaElement;
+  settingsSnapshot: SettingsSnapshot;
 }) => {
   posthog.capture("Text Selection Popup: Opened");
   removeTextSelectionPopup();
@@ -66,6 +69,7 @@ export const renderTextSelectionPopup = ({
       textarea={textarea}
       extensionAPI={extensionAPI}
       onClose={removeTextSelectionPopup}
+      settingsSnapshot={settingsSnapshot}
     />,
     currentPopupContainer,
   );