From 99d0acdd1623fa032f82a67e746d430d61556d10 Mon Sep 17 00:00:00 2001 From: Connor Prussin Date: Thu, 15 May 2025 17:22:20 -0700 Subject: [PATCH] chore: more UI performance improvements This PR contains a few related performance improvements: 1. Enable react compiler for IH, Entropy Explorer, and component library 2. Refactor Drawer state management to reduce rerenders drastically 3. Rev nextjs patch version 4. Disable turbopack for IH as it's causing major issues with webinspector --- apps/entropy-explorer/next.config.js | 4 + apps/entropy-explorer/package.json | 1 + .../src/components/Home/chain-select.tsx | 2 +- .../src/components/Home/request-drawer.tsx | 4 +- apps/insights/next.config.js | 9 +- apps/insights/package.json | 3 +- .../insights/src/components/Explain/index.tsx | 2 +- .../components/PriceComponentDrawer/index.tsx | 2 +- .../components/PriceComponentsCard/index.tsx | 2 +- .../src/components/PriceFeed/header.tsx | 2 +- .../components/PriceFeed/reference-data.tsx | 2 +- .../PriceFeeds/asset-class-table.tsx | 2 +- .../PriceFeeds/coming-soon-list.module.scss | 1 - .../PriceFeeds/coming-soon-list.tsx | 2 +- .../components/PriceFeeds/index.module.scss | 4 + .../src/components/PriceFeeds/index.tsx | 2 +- .../PriceFeeds/price-feeds-card.tsx | 2 +- .../src/components/Publisher/layout.tsx | 4 +- .../src/components/Publishers/index.tsx | 2 +- .../components/Publishers/publishers-card.tsx | 4 +- .../src/components/Root/search-button.tsx | 6 +- packages/component-library/babel.config.js | 6 + packages/component-library/package.json | 7 +- .../component-library/src/AppShell/index.tsx | 2 + .../component-library/src/Badge/index.tsx | 2 + .../src/Breadcrumbs/index.tsx | 2 +- .../src/Button/index.module.scss | 7 +- .../src/Button/index.stories.tsx | 21 +- .../component-library/src/Button/index.tsx | 31 +- .../src/DropdownCaretDown/index.tsx | 2 + .../component-library/src/ErrorPage/index.tsx | 4 +- .../component-library/src/Footer/index.tsx | 2 +- .../component-library/src/Header/index.tsx | 12 +- .../src/Header/theme-switch.module.scss | 2 + .../src/Header/theme-switch.tsx | 19 +- .../component-library/src/InfoBox/index.tsx | 2 + packages/component-library/src/Link/index.tsx | 2 + .../src/ModalDialog/index.tsx | 219 +- .../src/NotFoundPage/index.tsx | 4 +- .../component-library/src/Paginator/index.tsx | 4 +- .../component-library/src/Select/index.tsx | 4 +- .../component-library/src/Skeleton/index.tsx | 2 + .../component-library/src/StatCard/index.tsx | 2 + .../src/Table/index.module.scss | 9 +- .../component-library/src/Table/index.tsx | 9 +- .../src/{social-links.ts => social-links.tsx} | 10 +- .../component-library/src/useAlert/index.tsx | 6 +- .../src/useDrawer/index.stories.tsx | 5 + .../component-library/src/useDrawer/index.tsx | 6 +- .../component-library/tsconfig.build.json | 3 +- packages/component-library/turbo.json | 6 + pnpm-lock.yaml | 2667 ++++++++++++++--- pnpm-workspace.yaml | 8 +- 53 files changed, 2648 insertions(+), 501 deletions(-) create mode 100644 packages/component-library/babel.config.js rename packages/component-library/src/{social-links.ts => social-links.tsx} (85%) diff --git a/apps/entropy-explorer/next.config.js b/apps/entropy-explorer/next.config.js index 99436c39c8..8c1b95438e 100644 --- a/apps/entropy-explorer/next.config.js +++ b/apps/entropy-explorer/next.config.js @@ -1,4 +1,8 @@ const config = { + experimental: { + reactCompiler: true, + }, + reactStrictMode: true, pageExtensions: ["ts", "tsx", "mdx"], diff --git a/apps/entropy-explorer/package.json b/apps/entropy-explorer/package.json index 6a419a99ae..e358138090 100644 --- a/apps/entropy-explorer/package.json +++ b/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:", diff --git a/apps/entropy-explorer/src/components/Home/chain-select.tsx b/apps/entropy-explorer/src/components/Home/chain-select.tsx index e3f7bcf8bd..4d7216ee8e 100644 --- a/apps/entropy-explorer/src/components/Home/chain-select.tsx +++ b/apps/entropy-explorer/src/components/Home/chain-select.tsx @@ -96,7 +96,7 @@ const useResolvedProps = () => { textValue: chainTextValue, buttonLabel: viemChain?.name ?? "Chain", ...(viemChain && { - icon: () => , + icon: , }), }; }; diff --git a/apps/entropy-explorer/src/components/Home/request-drawer.tsx b/apps/entropy-explorer/src/components/Home/request-drawer.tsx index a20f7ab0ad..824de1f2c3 100644 --- a/apps/entropy-explorer/src/components/Home/request-drawer.tsx +++ b/apps/entropy-explorer/src/components/Home/request-drawer.tsx @@ -65,7 +65,7 @@ const RequestDrawerBody = ({ request }: { request: Request }) => { label="Details" fill className={styles.details ?? ""} - stickyHeader + stickyHeader="top" columns={[ { id: "field", @@ -254,7 +254,7 @@ const CallbackFailedInfo = ({ request }: { request: CallbackErrorRequest }) => {