ENG-1579: Fix plugin init performance

apps/roam/src/components/LeftSidebarView.tsx

@@ -52,9 +52,8 @@ import deleteBlock from "roamjs-components/writes/deleteBlock";
 import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 import { Dispatch, SetStateAction } from "react";
-import { SettingsDialog } from "./settings/Settings";
+import { openSettingsDialog } from "./settings/Settings";
 import { OnloadArgs } from "roamjs-components/types";
-import renderOverlay from "roamjs-components/util/renderOverlay";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
 import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/data/constants";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
@@ -445,12 +444,9 @@ const FavoritesPopover = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
   }, [handleGlobalPointerDownCapture, isMenuOpen]);
 
   const renderSettingsDialog = (tabId: TabId) => {
-    renderOverlay({
-      Overlay: SettingsDialog,
-      props: {
-        onloadArgs,
-        selectedTabId: tabId,
-      },
+    openSettingsDialog({
+      onloadArgs,
+      selectedTabId: tabId,
     });
   };
 

apps/roam/src/components/settings/Settings.tsx

@@ -50,7 +50,7 @@ export const SettingsPanel = ({ onloadArgs }: { onloadArgs: OnloadArgs }) => {
       <Button
         onClick={() => {
           posthog.capture("Settings: Opened from Roam Settings Panel");
-          render({
+          openSettingsDialog({
             onloadArgs,
           });
         }}
@@ -66,11 +66,13 @@ export const SettingsDialog = ({
   isOpen,
   onClose,
   selectedTabId,
+  openedAt,
 }: {
   onloadArgs: OnloadArgs;
   isOpen?: boolean;
   onClose?: () => void;
   selectedTabId?: TabId;
+  openedAt?: number;
 }) => {
   const extensionAPI = onloadArgs.extensionAPI;
   const grammarNode = discourseConfigRef.tree.find(
@@ -108,6 +110,20 @@ export const SettingsDialog = ({
     window.addEventListener("keydown", handleKeyPress);
     return () => window.removeEventListener("keydown", handleKeyPress);
   }, []);
+
+  useEffect(() => {
+    if (!isOpen || openedAt === undefined) {
+      return;
+    }
+
+    const rafId = window.requestAnimationFrame(() => {
+      console.log(
+        `[DG Perf] Settings open: ${performance.now() - openedAt} ms`,
+      );
+    });
+
+    return () => window.cancelAnimationFrame(rafId);
+  }, [isOpen, openedAt]);
   return (
     <Dialog
       isOpen={isOpen}
@@ -281,11 +297,18 @@ export const SettingsDialog = ({
 
 type Props = {
   onloadArgs: OnloadArgs;
+  selectedTabId?: TabId;
 };
-export const render = (props: Props) =>
-  renderOverlay({
+
+export const openSettingsDialog = (props: Props) => {
+  const openedAt = performance.now();
+  return renderOverlay({
     Overlay: SettingsDialog,
     props: {
-      onloadArgs: props.onloadArgs,
+      ...props,
+      openedAt,
     },
   });
+};
+
+export const render = openSettingsDialog;