Merge pull request #2702 from pyth-network/cprussin/perf-improvements

chore: more UI performance improvements

Author: cprussin

apps/entropy-explorer/next.config.js

@@ -1,4 +1,8 @@
 const config = {
+  experimental: {
+    reactCompiler: true,
+  },
+
   reactStrictMode: true,
 
   pageExtensions: ["ts", "tsx", "mdx"],

apps/entropy-explorer/package.json

@@ -45,6 +45,7 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "autoprefixer": "catalog:",
+    "babel-plugin-react-compiler": "catalog:",
     "eslint": "catalog:",
     "jest": "catalog:",
     "postcss": "catalog:",

apps/entropy-explorer/src/components/Home/chain-select.tsx

@@ -96,7 +96,7 @@ const useResolvedProps = () => {
     textValue: chainTextValue,
     buttonLabel: viemChain?.name ?? "Chain",
     ...(viemChain && {
-      icon: () => <ChainIcon id={viemChain.id} />,
+      icon: <ChainIcon id={viemChain.id} />,
     }),
   };
 };

apps/entropy-explorer/src/components/Home/request-drawer.tsx

@@ -65,7 +65,6 @@ const RequestDrawerBody = ({ request }: { request: Request }) => {
         label="Details"
         fill
         className={styles.details ?? ""}
-        stickyHeader
         columns={[
           {
             id: "field",
@@ -254,7 +253,7 @@ const CallbackFailedInfo = ({ request }: { request: CallbackErrorRequest }) => {
           <Button
             size="sm"
             variant="ghost"
-            beforeIcon={Question}
+            beforeIcon={<Question />}
             rounded
             hideText
             href="https://docs.pyth.network/entropy/debug-callback-failures"

apps/entropy-explorer/src/components/Home/results.tsx

@@ -207,6 +207,7 @@ const defaultProps = {
   label: "Requests",
   rounded: true,
   fill: true,
+  stickyHeader: "appHeader",
   columns: [
     {
       id: "chain" as const,

apps/insights/next.config.js

@@ -1,12 +1,13 @@
 const config = {
-  reactStrictMode: true,
-
-  pageExtensions: ["ts", "tsx", "mdx"],
-
   experimental: {
     useCache: true,
+    reactCompiler: true,
   },
 
+  reactStrictMode: true,
+
+  pageExtensions: ["ts", "tsx", "mdx"],
+
   logging: {
     fetches: {
       fullUrl: true,

apps/insights/package.json

@@ -12,7 +12,7 @@
     "fix:lint:eslint": "eslint --fix .",
     "fix:lint:stylelint": "stylelint --fix 'src/**/*.scss'",
     "pull:env": "[ $CI ] || VERCEL_ORG_ID=team_BKQrg3JJFLxZyTqpuYtIY0rj VERCEL_PROJECT_ID=prj_TBkf9EyQjQF37gs4Vk0sQKJj97kE vercel env pull",
-    "start:dev": "next dev --port 3003 --turbopack",
+    "start:dev": "next dev --port 3003",
     "start:prod": "next start --port 3003",
     "test:format": "prettier --check .",
     "test:lint:eslint": "eslint . --max-warnings 0",
@@ -58,6 +58,7 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "autoprefixer": "catalog:",
+    "babel-plugin-react-compiler": "catalog:",
     "eslint": "catalog:",
     "jest": "catalog:",
     "postcss": "catalog:",

apps/insights/src/components/Explain/index.tsx

@@ -17,7 +17,7 @@ export const Explain = ({ size, title, children }: Props) => (
       className={styles.trigger ?? ""}
       variant="ghost"
       size={size}
-      beforeIcon={(props) => <Info weight="fill" {...props} />}
+      beforeIcon={<Info weight="fill" />}
       rounded
       hideText
       alert={{

apps/insights/src/components/PriceComponentDrawer/index.tsx

@@ -270,7 +270,7 @@ const HeadingExtra = ({ status, ...props }: HeadingExtraProps) => {
       <OpenButton
         variant="ghost"
         hideText
-        beforeIcon={ArrowSquareOut}
+        beforeIcon={<ArrowSquareOut />}
         rounded
         className={styles.ghostOpenButton ?? ""}
         {...props}

apps/insights/src/components/PriceComponentsCard/index.tsx

@@ -489,7 +489,7 @@ export const PriceComponentsCardContents = <
         label={label}
         fill
         rounded
-        stickyHeader
+        stickyHeader="appHeader"
         className={styles.table ?? ""}
         columns={[
           {