fix(devtools): perf optimizations

artalar · Oct 14, 2024 · 042a77c · 042a77c
1 parent 24d6146
commit 042a77c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/packages/devtools/src/Graph.tsx b/packages/devtools/src/Graph.tsx
@@ -280,13 +280,15 @@ export const Graph = ({ clientCtx, getColor, width, height }: Props) => {
           insert(patch)
         }
 
-        const isBottom =
-          listEl.parentElement!.scrollHeight - listEl.parentElement!.scrollTop < listEl.parentElement!.clientHeight + 10
-        if (isBottom) {
-          requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          const isBottom =
+            listEl.parentElement!.scrollHeight - listEl.parentElement!.scrollTop <
+            listEl.parentElement!.clientHeight + 10
+
+          if (isBottom) {
             listEl.parentElement!.scrollTop = listEl.parentElement!.scrollHeight
-          })
-        }
+          }
+        })
       })
     })
 
@@ -301,6 +303,7 @@ export const Graph = ({ clientCtx, getColor, width, height }: Props) => {
         top: 0;
         left: 68px;
         pointer-events: var(--pe);
+        will-change: height;
       `}
     >
       {lines}
@@ -312,6 +315,7 @@ export const Graph = ({ clientCtx, getColor, width, height }: Props) => {
       ref={subscribe}
       css={`
         padding: 0;
+        content-visibility: auto;
       `}
     >
       {list}

diff --git a/packages/devtools/src/index.tsx b/packages/devtools/src/index.tsx
@@ -205,6 +205,7 @@ export const _connectDevtools = async (
         height: var(--height);
         z-index: ${MAX_Z};
         background: var(--devtools-bg);
+        will-change: width, height;
       `}
       css:devtools-bg="hsl(244deg 20% 90%)"
       css:width={width}