-
Notifications
You must be signed in to change notification settings - Fork 50
fix: optimise network page images #1754
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR optimizes the network page by converting inline SVG React components to actual SVG files, using SVGR webpack loader to generate React components from them at build time. This reduces bundle size and improves maintainability.
Key changes:
- Converts 10 inline SVG React components (NodeGraph1-10) to standalone SVG files
- Adds webpack configuration with @svgr/webpack to process SVG files
- Migrates styled-components props to transient props (prefixed with
$) to prevent DOM warnings - Adds a mock feature flag for testing different node counts in the network page
Reviewed changes
Copilot reviewed 26 out of 39 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
yarn.lock |
Added @svgr/webpack and related dependencies for SVG processing |
package.json |
Added @svgr/webpack dependency and build:svg script |
svgs.webpack.config.js |
New webpack config for compiling SVG files to React components |
ts/svgs/tsconfig.json |
TypeScript config for SVG compilation |
ts/svgs/svg.d.ts |
Type definitions for SVG imports |
ts/svgs/node-graph/*.svg |
10 new SVG files extracted from React components |
ts/svgs/index.ts |
Exports for all SVG components |
ts/components/dialog/user-settings/pages/network/NodeImage.tsx |
Refactored to use imported SVG components and CSS variables |
ts/components/dialog/user-settings/pages/network/nodes/NodeGraph*.tsx |
Deleted - replaced with SVG files |
ts/components/dialog/user-settings/pages/network/sections/network/NetworkSection.tsx |
Fixed styled-components transient props, removed unused variables |
ts/components/dialog/user-settings/pages/network/sections/StakeSection.tsx |
Fixed styled-components transient props |
ts/components/dialog/user-settings/pages/network/components.tsx |
Migrated props to transient props |
ts/components/dialog/user-settings/pages/network/SessionNetworkPage.tsx |
Fixed transient prop usage |
ts/components/basic/Flex.tsx |
Migrated overflow props to transient props |
ts/components/loading/spinner/AnimatedSpinnerIcon.tsx |
Fixed SVG attribute names (camelCase) |
ts/components/conversation/composition/CompositionBox.tsx |
Removed unused JSX import |
ts/state/ducks/types/releasedFeaturesReduxTypes.ts |
Added mockNetworkPageNodeCount feature flag |
ts/state/ducks/types/defaultFeatureFlags.ts |
Added default value for mockNetworkPageNodeCount |
ts/components/dialog/debug/FeatureFlags.tsx |
Added min/max support and mockNetworkPageNodeCount input |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
No description provided.