various changes : #273 #272
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Implemented a loader component in Resources.jsx to enhance user experience during data fetching. - Updated yarn.lock to include new dependencies and their respective versions, including @babel/runtime, d3 types, and zustand.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdds a new Flow page with SVG-rendered nodes and dynamic connections, integrates it into routing at /flow, expands CSS with flow designer styles and animations, updates dependencies (react-flow-renderer, uuid), adjusts a single doc page to always render (with a console log), and applies minor formatting to Resources. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Router as Router
participant Flow as Flow Page
participant State as Nodes State
participant Effect as useEffect (compute connections)
participant View as SVG Render
User->>Router: Navigate to /flow
Router-->>Flow: Mount Flow
Flow->>State: Initialize nodes (ids, positions, colors)
State-->>Effect: nodes changed
Effect->>State: Set connections (consecutive nodes)
State-->>View: nodes + connections
View-->>User: Render SVG (nodes, gradients, paths)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (2)
src/pages/Flow/index.jsx (2)
4-16: Consolidate duplicate components.The
EventTransformandTriggercomponents are identical in implementation. Consider consolidating them into a single reusable component to eliminate code duplication.Apply this diff to consolidate the components:
-const EventTransform = ({ id, x, y, label, color }) => ( +const Node = ({ id, x, y, label, color }) => ( <g transform={`translate(${x},${y})`} id={id}> <rect width="120" height="60" rx="5" fill={color} /> <text x="60" y="30" textAnchor="middle" fill="white">{label}</text> </g> ); -const Trigger = ({ id, x, y, label, color }) => ( - <g transform={`translate(${x},${y})`} id={id}> - <rect width="120" height="60" rx="5" fill={color} /> - <text x="60" y="30" textAnchor="middle" fill="white">{label}</text> - </g> -);Then update the rendering logic at lines 51-55:
- {nodes.map(node => - node.type === 'eventTransform' - ? <EventTransform key={node.id} {...node} /> - : <Trigger key={node.id} {...node} /> - )} + {nodes.map(node => ( + <Node key={node.id} {...node} /> + ))}
28-33: Consider extracting node dimensions as constants.The node dimensions (width: 120, height: 60) and center offsets (60, 30) are hardcoded in multiple places. Consider extracting these as constants for better maintainability.
Add constants at the top of the file:
+const NODE_WIDTH = 120; +const NODE_HEIGHT = 60; +const NODE_CENTER_X = NODE_WIDTH / 2; +const NODE_CENTER_Y = NODE_HEIGHT / 2; + const EventTransform = ({ id, x, y, label, color }) => ( <g transform={`translate(${x},${y})`} id={id}> - <rect width="120" height="60" rx="5" fill={color} /> - <text x="60" y="30" textAnchor="middle" fill="white">{label}</text> + <rect width={NODE_WIDTH} height={NODE_HEIGHT} rx="5" fill={color} /> + <text x={NODE_CENTER_X} y={NODE_CENTER_Y} textAnchor="middle" fill="white">{label}</text> </g> );Then update line 77-78 to use the constants:
- startX={start.x + 60} startY={start.y + 30} - endX={end.x + 60} endY={end.y + 30} + startX={start.x + NODE_CENTER_X} startY={start.y + NODE_CENTER_Y} + endX={end.x + NODE_CENTER_X} endY={end.y + NODE_CENTER_Y}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (6)
package.json(2 hunks)src/index.css(2 hunks)src/main.jsx(2 hunks)src/pages/Doc/single doc/index.jsx(1 hunks)src/pages/Flow/index.jsx(1 hunks)src/pages/Resources.jsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
src/main.jsx (1)
src/pages/Flow/index.jsx (1)
Flow(27-87)
src/pages/Resources.jsx (1)
src/components/Resources/ResourceSection.jsx (1)
ResourceSection(3-17)
🔇 Additional comments (6)
src/index.css (2)
172-174: LGTM!The adjustments to
.whiteclass dimensions and blur effect are appropriate for the updated UI design.
459-599: LGTM!The added CSS provides comprehensive styling for the Flow designer UI and loader animations. The keyframes and component classes are well-structured and support the new Flow page functionality.
src/pages/Resources.jsx (1)
135-144: LGTM!The formatting adjustments to the
ResourceSectioncomponent usage are acceptable and improve code consistency.src/main.jsx (2)
17-17: LGTM!The Flow component import is properly placed and follows the existing import pattern.
49-52: LGTM!The new
/flowroute is correctly configured and follows the existing routing pattern in the application.src/pages/Flow/index.jsx (1)
38-46: Verify useEffect dependency stability.The
useEffectdepends on thenodesarray, which could trigger unnecessary re-renders if the nodes object identity changes without actual data changes. Ensure that node updates maintain referential stability when possible, or consider using a more specific dependency likenodes.lengthor a memoized value if appropriate.
| "prettier": "^3.3.3", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0", | ||
| "react-flow-renderer": "^10.3.17", |
There was a problem hiding this comment.
Remove unused dependency.
The react-flow-renderer package is added to dependencies but is never imported or used in the codebase. The Flow component at src/pages/Flow/index.jsx implements custom SVG rendering instead of using this library.
Apply this diff to remove the unused dependency:
- "react-flow-renderer": "^10.3.17",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "react-flow-renderer": "^10.3.17", |
🤖 Prompt for AI Agents
In package.json at line 23, the dependency "react-flow-renderer": "^10.3.17" is
unused; remove that entry from the dependencies object, save package.json, then
run your package manager (npm install or yarn install) to update the lockfile
(package-lock.json or yarn.lock) accordingly; finally run the test/build to
ensure no usages remain and commit both the updated package.json and updated
lockfile.
| const [activeSection, setActiveSection] = useState(null); | ||
| const [headings, setHeadings] = useState([]); | ||
|
|
||
| console.log(content) |
There was a problem hiding this comment.
Remove debugging artifact.
The console.log(content) statement appears to be a debugging artifact that should be removed before merging to production.
Apply this diff to remove the console.log:
-console.log(content)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| console.log(content) |
🤖 Prompt for AI Agents
In src/pages/Doc/single doc/index.jsx around line 33 there is a leftover
debugging statement `console.log(content)`; remove that line from the file so no
console logging of content remains in production.
Comment on lines
+51
to
+82
| {nodes.map(node => | ||
| node.type === 'eventTransform' | ||
| ? <EventTransform key={node.id} {...node} /> | ||
| : <Trigger key={node.id} {...node} /> | ||
| )} | ||
| <defs> | ||
| {connections.map(conn => { | ||
| const startNode = nodes.find(n => n.id === conn.start); | ||
| const endNode = nodes.find(n => n.id === conn.end); | ||
|
|
||
| return ( | ||
| <linearGradient key={conn.gradientId} id={conn.gradientId}> | ||
| <stop offset="0%" stopColor={startNode.color} /> | ||
| <stop offset="100%" stopColor={endNode.color} /> | ||
| </linearGradient> | ||
| ); | ||
| })} | ||
| </defs> | ||
|
|
||
| {/* Render connections before nodes */} | ||
| {connections.map(conn => { | ||
| const start = nodes.find(n => n.id === conn.start); | ||
| const end = nodes.find(n => n.id === conn.end); | ||
| return ( | ||
| <Connection | ||
| key={`${conn.start}-${conn.end}`} | ||
| startX={start.x + 60} startY={start.y + 30} | ||
| endX={end.x + 60} endY={end.y + 30} | ||
| gradientId={conn.gradientId} | ||
| /> | ||
| ); | ||
| })} |
There was a problem hiding this comment.
Fix rendering order for proper layering.
The nodes are currently rendered before the connections (line 51 vs line 71). In SVG, elements are rendered in document order, so nodes will appear below connections. For proper visual layering, connections should be rendered first, followed by nodes.
Apply this diff to fix the rendering order:
<svg width="800" height="600" style={{ background: '#333' }}>
- {/* Render nodes */}
- {nodes.map(node =>
- node.type === 'eventTransform'
- ? <EventTransform key={node.id} {...node} />
- : <Trigger key={node.id} {...node} />
- )}
<defs>
{connections.map(conn => {
const startNode = nodes.find(n => n.id === conn.start);
const endNode = nodes.find(n => n.id === conn.end);
return (
<linearGradient key={conn.gradientId} id={conn.gradientId}>
<stop offset="0%" stopColor={startNode.color} />
<stop offset="100%" stopColor={endNode.color} />
</linearGradient>
);
})}
</defs>
{/* Render connections before nodes */}
{connections.map(conn => {
const start = nodes.find(n => n.id === conn.start);
const end = nodes.find(n => n.id === conn.end);
return (
<Connection
key={`${conn.start}-${conn.end}`}
startX={start.x + 60} startY={start.y + 30}
endX={end.x + 60} endY={end.y + 30}
gradientId={conn.gradientId}
/>
);
})}
+ {/* Render nodes */}
+ {nodes.map(node =>
+ node.type === 'eventTransform'
+ ? <EventTransform key={node.id} {...node} />
+ : <Trigger key={node.id} {...node} />
+ )}
</svg>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| {nodes.map(node => | |
| node.type === 'eventTransform' | |
| ? <EventTransform key={node.id} {...node} /> | |
| : <Trigger key={node.id} {...node} /> | |
| )} | |
| <defs> | |
| {connections.map(conn => { | |
| const startNode = nodes.find(n => n.id === conn.start); | |
| const endNode = nodes.find(n => n.id === conn.end); | |
| return ( | |
| <linearGradient key={conn.gradientId} id={conn.gradientId}> | |
| <stop offset="0%" stopColor={startNode.color} /> | |
| <stop offset="100%" stopColor={endNode.color} /> | |
| </linearGradient> | |
| ); | |
| })} | |
| </defs> | |
| {/* Render connections before nodes */} | |
| {connections.map(conn => { | |
| const start = nodes.find(n => n.id === conn.start); | |
| const end = nodes.find(n => n.id === conn.end); | |
| return ( | |
| <Connection | |
| key={`${conn.start}-${conn.end}`} | |
| startX={start.x + 60} startY={start.y + 30} | |
| endX={end.x + 60} endY={end.y + 30} | |
| gradientId={conn.gradientId} | |
| /> | |
| ); | |
| })} | |
| <svg width="800" height="600" style={{ background: '#333' }}> | |
| <defs> | |
| {connections.map(conn => { | |
| const startNode = nodes.find(n => n.id === conn.start); | |
| const endNode = nodes.find(n => n.id === conn.end); | |
| return ( | |
| <linearGradient key={conn.gradientId} id={conn.gradientId}> | |
| <stop offset="0%" stopColor={startNode.color} /> | |
| <stop offset="100%" stopColor={endNode.color} /> | |
| </linearGradient> | |
| ); | |
| })} | |
| </defs> | |
| {/* Render connections before nodes */} | |
| {connections.map(conn => { | |
| const start = nodes.find(n => n.id === conn.start); | |
| const end = nodes.find(n => n.id === conn.end); | |
| return ( | |
| <Connection | |
| key={`${conn.start}-${conn.end}`} | |
| startX={start.x + 60} startY={start.y + 30} | |
| endX={end.x + 60} endY={end.y + 30} | |
| gradientId={conn.gradientId} | |
| /> | |
| ); | |
| })} | |
| {/* Render nodes */} | |
| {nodes.map(node => | |
| node.type === 'eventTransform' | |
| ? <EventTransform key={node.id} {...node} /> | |
| : <Trigger key={node.id} {...node} /> | |
| )} | |
| </svg> |
🤖 Prompt for AI Agents
In src/pages/Flow/index.jsx around lines 51 to 82 the nodes are rendered before
the connections which causes nodes to appear under connection paths in the SVG;
move the block that renders the <defs> (linearGradient entries) and the
connections map so they are rendered before the nodes map (i.e., render
gradients and the connections <Connection /> elements first, then map and render
the node components), keeping existing props/keys intact so layering displays
connections beneath nodes.
Comment on lines
+71
to
+82
| {connections.map(conn => { | ||
| const start = nodes.find(n => n.id === conn.start); | ||
| const end = nodes.find(n => n.id === conn.end); | ||
| return ( | ||
| <Connection | ||
| key={`${conn.start}-${conn.end}`} | ||
| startX={start.x + 60} startY={start.y + 30} | ||
| endX={end.x + 60} endY={end.y + 30} | ||
| gradientId={conn.gradientId} | ||
| /> | ||
| ); | ||
| })} |
There was a problem hiding this comment.
Add error handling for missing nodes.
The code uses nodes.find() to locate start and end nodes for connections (lines 72-73). If a node ID is not found, this will result in undefined, which could cause runtime errors when accessing properties like start.x.
Apply this diff to add error handling:
{connections.map(conn => {
const start = nodes.find(n => n.id === conn.start);
const end = nodes.find(n => n.id === conn.end);
+
+ // Skip rendering if nodes are not found
+ if (!start || !end) {
+ console.warn(`Connection skipped: missing node (start: ${conn.start}, end: ${conn.end})`);
+ return null;
+ }
+
return (
<Connection
key={`${conn.start}-${conn.end}`}
startX={start.x + 60} startY={start.y + 30}
endX={end.x + 60} endY={end.y + 30}
gradientId={conn.gradientId}
/>
);
})}Similarly, add error handling for gradient definitions at lines 57-67:
<defs>
{connections.map(conn => {
const startNode = nodes.find(n => n.id === conn.start);
const endNode = nodes.find(n => n.id === conn.end);
+ // Skip gradient if nodes are not found
+ if (!startNode || !endNode) {
+ return null;
+ }
+
return (
<linearGradient key={conn.gradientId} id={conn.gradientId}>
<stop offset="0%" stopColor={startNode.color} />
<stop offset="100%" stopColor={endNode.color} />
</linearGradient>
);
})}
</defs>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| {connections.map(conn => { | |
| const start = nodes.find(n => n.id === conn.start); | |
| const end = nodes.find(n => n.id === conn.end); | |
| return ( | |
| <Connection | |
| key={`${conn.start}-${conn.end}`} | |
| startX={start.x + 60} startY={start.y + 30} | |
| endX={end.x + 60} endY={end.y + 30} | |
| gradientId={conn.gradientId} | |
| /> | |
| ); | |
| })} | |
| // … around line 71 in src/pages/Flow/index.jsx | |
| {connections.map(conn => { | |
| const start = nodes.find(n => n.id === conn.start); | |
| const end = nodes.find(n => n.id === conn.end); | |
| // Skip rendering if nodes are not found | |
| if (!start || !end) { | |
| console.warn(`Connection skipped: missing node (start: ${conn.start}, end: ${conn.end})`); | |
| return null; | |
| } | |
| return ( | |
| <Connection | |
| key={`${conn.start}-${conn.end}`} | |
| startX={start.x + 60} startY={start.y + 30} | |
| endX={end.x + 60} endY={end.y + 30} | |
| gradientId={conn.gradientId} | |
| /> | |
| ); | |
| })} | |
| // … around lines 57–67 in the same file | |
| <defs> | |
| {connections.map(conn => { | |
| const startNode = nodes.find(n => n.id === conn.start); | |
| const endNode = nodes.find(n => n.id === conn.end); | |
| // Skip gradient if nodes are not found | |
| if (!startNode || !endNode) { | |
| return null; | |
| } | |
| return ( | |
| <linearGradient key={conn.gradientId} id={conn.gradientId}> | |
| <stop offset="0%" stopColor={startNode.color} /> | |
| <stop offset="100%" stopColor={endNode.color} /> | |
| </linearGradient> | |
| ); | |
| })} | |
| </defs> |
🤖 Prompt for AI Agents
In src/pages/Flow/index.jsx around lines 71 to 82 (and also check lines 57 to
67), the code assumes nodes and gradients exist when using nodes.find(...) and
gradient lookups which can return undefined; update the rendering to guard
against missing data by checking that start and end nodes are found before
accessing their x/y (skip rendering the Connection and optionally log a warning
or render a placeholder), and likewise verify the gradient definition exists
before referencing it (skip or use a default gradient and log a warning); ensure
these checks are added inline where the map/lookup happens so no runtime
property access occurs on undefined.
Comment on lines
+60
to
+116
| {/* <div className="loader h-24 w-full"> | ||
| <svg height="0" width="0" viewBox="0 0 64 64" className="absolute"> | ||
| <defs> | ||
| <linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="b"> | ||
| <stop stop-color="#973BED"></stop> | ||
| <stop stop-color="#007CFF" offset="1"></stop> | ||
| </linearGradient> | ||
| <linearGradient gradientUnits="userSpaceOnUse" y2="0" x2="0" y1="64" x1="0" id="c"> | ||
| <stop stop-color="#FFC800"></stop> | ||
| <stop stop-color="#F0F" offset="1"></stop> | ||
| </linearGradient> | ||
| <linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="d"> | ||
| <stop stop-color="#00E0ED"></stop> | ||
| <stop stop-color="#00DA72" offset="1"></stop> | ||
| </linearGradient> | ||
| </defs> | ||
| </svg> | ||
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | ||
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 10,4 H 32 C 48,4 54,20 54,32 54,44 48,60 32,60 H 10 Z" className="dash" id="d" pathLength="360"></path> | ||
| </svg> | ||
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | ||
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 54,32 C 54,18 43,4 28,4 13,4 4,18 4,32 4,46 13,60 28,60 43,60 54,46 54,32 Z M 54,32 H 4" className="dash" id="e" pathLength="360"></path> | ||
| </svg> | ||
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | ||
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,4 L 32,60 L 60,4" className="dash" id="v" pathLength="360"></path> | ||
| </svg> | ||
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | ||
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 4,4 H 60 M 32,4 V 60" className="dash" id="t" pathLength="360"></path> | ||
| </svg> | ||
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" style={{ "--rotation-duration": "0ms", "--rotation-direction": "normal" }} viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | ||
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 32 32 m 0 -28 a 28 28 0 1 1 0 56 a 28 28 0 1 1 0 -56" className="spin" id="o" pathLength="360"></path> | ||
| </svg> | ||
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" style={{ "--rotation-duration": "0ms", "--rotation-direction": "normal" }} viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | ||
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 32 32 m 0 -28 a 28 28 0 1 1 0 56 a 28 28 0 1 1 0 -56" className="spin" id="o2" pathLength="360"></path> | ||
| </svg> | ||
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | ||
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 32,4 V 60" className="dash" id="l" pathLength="360"></path> | ||
| </svg> | ||
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | ||
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 60,16 C 60,8 52,4 32,4 12,4 4,8 4,16 4,24 12,28 32,28 52,28 60,32 60,40 60,48 52,52 32,52 12,52 4,48 4,40" className="dash" id="s" pathLength="360"></path> | ||
| </svg> | ||
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | ||
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,60 L 32,4 L 60,60 M 16,40 H 48" className="dash" id="a" pathLength="360"></path> | ||
| </svg> | ||
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | ||
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 4,32 V 60 M 4,32 C 4,16 16,16 32,16" className="dash" id="r" pathLength="360"></path> | ||
| </svg> | ||
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | ||
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 54,32 C 54,18 43,4 28,4 13,4 4,18 4,32 4,46 13,60 28,60 43,60 54,46 54,32 Z M 54,32 H 4" className="dash" id="e2" pathLength="360"></path> | ||
| </svg> | ||
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | ||
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,60 V 16 C 4,8 12,4 32,4 52,4 60,8 60,16 V 60" className="dash" id="n" pathLength="360"></path> | ||
| </svg> | ||
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | ||
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 60,44 C 60,52 52,60 32,60 12,60 4,52 4,44 V 32 C 4,24 12,16 32,16 52,16 60,24 60,32 V 60" className="dash" id="a2" pathLength="360"></path> | ||
| </svg> | ||
| </div> */} |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Remove commented-out code.
The large commented-out loader JSX block (57 lines) should be removed rather than left as dead code. If this loader functionality is needed for future reference, consider keeping it in version control history instead.
Apply this diff to remove the commented block:
- {/* <div className="loader h-24 w-full">
- <svg height="0" width="0" viewBox="0 0 64 64" className="absolute">
- <defs>
- <linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="b">
- <stop stop-color="#973BED"></stop>
- <stop stop-color="#007CFF" offset="1"></stop>
- </linearGradient>
- <linearGradient gradientUnits="userSpaceOnUse" y2="0" x2="0" y1="64" x1="0" id="c">
- <stop stop-color="#FFC800"></stop>
- <stop stop-color="#F0F" offset="1"></stop>
- </linearGradient>
- <linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="d">
- <stop stop-color="#00E0ED"></stop>
- <stop stop-color="#00DA72" offset="1"></stop>
- </linearGradient>
- </defs>
- </svg>
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
- <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 10,4 H 32 C 48,4 54,20 54,32 54,44 48,60 32,60 H 10 Z" className="dash" id="d" pathLength="360"></path>
- </svg>
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
- <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 54,32 C 54,18 43,4 28,4 13,4 4,18 4,32 4,46 13,60 28,60 43,60 54,46 54,32 Z M 54,32 H 4" className="dash" id="e" pathLength="360"></path>
- </svg>
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
- <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,4 L 32,60 L 60,4" className="dash" id="v" pathLength="360"></path>
- </svg>
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
- <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 4,4 H 60 M 32,4 V 60" className="dash" id="t" pathLength="360"></path>
- </svg>
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" style={{ "--rotation-duration": "0ms", "--rotation-direction": "normal" }} viewBox="0 0 64 64" height="64" width="64" className="inline-block">
- <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 32 32 m 0 -28 a 28 28 0 1 1 0 56 a 28 28 0 1 1 0 -56" className="spin" id="o" pathLength="360"></path>
- </svg>
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" style={{ "--rotation-duration": "0ms", "--rotation-direction": "normal" }} viewBox="0 0 64 64" height="64" width="64" className="inline-block">
- <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 32 32 m 0 -28 a 28 28 0 1 1 0 56 a 28 28 0 1 1 0 -56" className="spin" id="o2" pathLength="360"></path>
- </svg>
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
- <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 32,4 V 60" className="dash" id="l" pathLength="360"></path>
- </svg>
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
- <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 60,16 C 60,8 52,4 32,4 12,4 4,8 4,16 4,24 12,28 32,28 52,28 60,32 60,40 60,48 52,52 32,52 12,52 4,48 4,40" className="dash" id="s" pathLength="360"></path>
- </svg>
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
- <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,60 L 32,4 L 60,60 M 16,40 H 48" className="dash" id="a" pathLength="360"></path>
- </svg>
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
- <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 4,32 V 60 M 4,32 C 4,16 16,16 32,16" className="dash" id="r" pathLength="360"></path>
- </svg>
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
- <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 54,32 C 54,18 43,4 28,4 13,4 4,18 4,32 4,46 13,60 28,60 43,60 54,46 54,32 Z M 54,32 H 4" className="dash" id="e2" pathLength="360"></path>
- </svg>
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
- <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,60 V 16 C 4,8 12,4 32,4 52,4 60,8 60,16 V 60" className="dash" id="n" pathLength="360"></path>
- </svg>
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block">
- <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 60,44 C 60,52 52,60 32,60 12,60 4,52 4,44 V 32 C 4,24 12,16 32,16 52,16 60,24 60,32 V 60" className="dash" id="a2" pathLength="360"></path>
- </svg>
- </div> */}
-📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| {/* <div className="loader h-24 w-full"> | |
| <svg height="0" width="0" viewBox="0 0 64 64" className="absolute"> | |
| <defs> | |
| <linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="b"> | |
| <stop stop-color="#973BED"></stop> | |
| <stop stop-color="#007CFF" offset="1"></stop> | |
| </linearGradient> | |
| <linearGradient gradientUnits="userSpaceOnUse" y2="0" x2="0" y1="64" x1="0" id="c"> | |
| <stop stop-color="#FFC800"></stop> | |
| <stop stop-color="#F0F" offset="1"></stop> | |
| </linearGradient> | |
| <linearGradient gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="d"> | |
| <stop stop-color="#00E0ED"></stop> | |
| <stop stop-color="#00DA72" offset="1"></stop> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | |
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 10,4 H 32 C 48,4 54,20 54,32 54,44 48,60 32,60 H 10 Z" className="dash" id="d" pathLength="360"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | |
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 54,32 C 54,18 43,4 28,4 13,4 4,18 4,32 4,46 13,60 28,60 43,60 54,46 54,32 Z M 54,32 H 4" className="dash" id="e" pathLength="360"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | |
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,4 L 32,60 L 60,4" className="dash" id="v" pathLength="360"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | |
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 4,4 H 60 M 32,4 V 60" className="dash" id="t" pathLength="360"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" style={{ "--rotation-duration": "0ms", "--rotation-direction": "normal" }} viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | |
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 32 32 m 0 -28 a 28 28 0 1 1 0 56 a 28 28 0 1 1 0 -56" className="spin" id="o" pathLength="360"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" style={{ "--rotation-duration": "0ms", "--rotation-direction": "normal" }} viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | |
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 32 32 m 0 -28 a 28 28 0 1 1 0 56 a 28 28 0 1 1 0 -56" className="spin" id="o2" pathLength="360"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | |
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 32,4 V 60" className="dash" id="l" pathLength="360"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | |
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 60,16 C 60,8 52,4 32,4 12,4 4,8 4,16 4,24 12,28 32,28 52,28 60,32 60,40 60,48 52,52 32,52 12,52 4,48 4,40" className="dash" id="s" pathLength="360"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | |
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,60 L 32,4 L 60,60 M 16,40 H 48" className="dash" id="a" pathLength="360"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | |
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 4,32 V 60 M 4,32 C 4,16 16,16 32,16" className="dash" id="r" pathLength="360"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | |
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 54,32 C 54,18 43,4 28,4 13,4 4,18 4,32 4,46 13,60 28,60 43,60 54,46 54,32 Z M 54,32 H 4" className="dash" id="e2" pathLength="360"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | |
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,60 V 16 C 4,8 12,4 32,4 52,4 60,8 60,16 V 60" className="dash" id="n" pathLength="360"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" className="inline-block"> | |
| <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 60,44 C 60,52 52,60 32,60 12,60 4,52 4,44 V 32 C 4,24 12,16 32,16 52,16 60,24 60,32 V 60" className="dash" id="a2" pathLength="360"></path> | |
| </svg> | |
| </div> */} |
🤖 Prompt for AI Agents
In src/pages/Resources.jsx around lines 60 to 116, remove the entire large
commented-out loader JSX block (the multi-line /* ... */ wrapper and its SVG
contents) so there is no dead commented code; ensure you also remove any
now-unused imports or extra blank lines introduced by the deletion and run
Prettier/ESLint formatting to keep file style consistent.
Owner
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit