From 988dd16f6c31c35cf3471d1bdc835864c17f139a 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 | 3 +- .../src/components/Home/results.tsx | 1 + 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 +- .../src/hooks/use-live-price-data.tsx | 74 +- 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 | 10 +- .../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 +- 55 files changed, 2693 insertions(+), 531 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..a0c6b911e5 100644 --- a/apps/entropy-explorer/src/components/Home/request-drawer.tsx +++ b/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 }) => {