Polish Agent Orchestrator landing page#2260
Conversation
|
React Doctor found 31 issues in 10 files · 31 warnings · score 56 / 100 (Critical) · vs 31 warnings
Reviewed by React Doctor for commit |
codebanditssss
force-pushed
the
landing-page-close-to-final
branch
from
785500f to
7057753
Compare
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| <body>{children}</body> | ||
| <html lang="en" suppressHydrationWarning className={`${inter.variable} ${inter.className}`}> | ||
| <head> | ||
| <script dangerouslySetInnerHTML={{ __html: themeScript }} /> |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-native-script (warning)
Plain <script> has no Next.js loading strategy, so it can block rendering.
Fix → Use next/script with strategy="afterInteractive" or "lazyOnload" so third-party scripts do not block rendering.
| ]; | ||
|
|
||
| export function LandingAgentsBar() { | ||
| const marqueeAgents = [...agents, ...agents]; |
There was a problem hiding this comment.
React Doctor · react-doctor/prefer-module-scope-static-value (warning)
marqueeAgents inside LandingAgentsBar uses no local state but is rebuilt every render, so it looks new each time & breaks memoized children. Move it to the top of the file, outside the component.
Fix → Move the value above the component, at the top of the file. It doesn't use local state, so rebuilding it each update is wasted and makes it look new every time.
| className="group flex h-[82px] w-[112px] shrink-0 flex-col items-center justify-end gap-2 px-2 py-2" | ||
| > | ||
| <div className="agent-logo-tile"> | ||
| <img src={agent.src} alt="" referrerPolicy="no-referrer" className="agent-logo-image" /> |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-img-element (warning)
Plain ships unoptimized, oversized images.
Fix → Use next/image so users get optimized formats, responsive srcsets, and lazy loading instead of oversized image downloads.
| Star on GitHub · {formatCompactNumber(stars)} | ||
| <ArrowRightIcon className="h-4 w-4 transition-transform group-hover:translate-x-0.5" /> | ||
| </a> | ||
| <a |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-a-element (warning)
Plain reloads the whole page for internal links, so Next.js loses client-side navigation and prefetching.
Fix → import Link from 'next/link' for client-side navigation, prefetching, and preserved scroll position
| <div className="relative min-h-[460px] w-[44%]"> | ||
| {panels.map((panel, i) => ( | ||
| <div | ||
| key={i} |
There was a problem hiding this comment.
React Doctor · react-doctor/no-array-index-as-key (warning)
Your users can see & submit the wrong data when this list reorders or filters, so use a stable id like key={item.id}, not the array index "i".
Fix → Use a stable id from the item, like key={item.id} or key={item.slug}. Index keys break when the list reorders or filters.
| })} | ||
| </div> | ||
| <div className="mx-1 hidden h-4 w-px bg-[color:var(--border)] lg:block" /> | ||
| <a |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-a-element (warning)
Plain reloads the whole page for internal links, so Next.js loses client-side navigation and prefetching.
Fix → import Link from 'next/link' for client-side navigation, prefetching, and preserved scroll position
|
|
||
| {open && ( | ||
| <div className="absolute inset-x-0 top-full mt-4 flex flex-col gap-1 rounded-2xl border border-[color:var(--border)] bg-[color:var(--bg)]/95 p-4 mx-4 backdrop-blur-xl shadow-2xl md:hidden"> | ||
| <a |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-a-element (warning)
Plain reloads the whole page for internal links, so Next.js loses client-side navigation and prefetching.
Fix → import Link from 'next/link' for client-side navigation, prefetching, and preserved scroll position
| } | ||
|
|
||
| return ( | ||
| <img |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-img-element (warning)
Plain ships unoptimized, oversized images.
Fix → Use next/image so users get optimized formats, responsive srcsets, and lazy loading instead of oversized image downloads.
| className="relative aspect-video overflow-hidden rounded-md border border-[color:var(--border-strong)] bg-black" | ||
| > | ||
| {muxPlaybackId && isPlaying ? ( | ||
| <iframe |
There was a problem hiding this comment.
React Doctor · react-doctor/iframe-missing-sandbox (warning)
An <iframe> with no sandbox is a security hole: the embedded page gets full access to your site.
Fix → Add sandbox="" or a curated value so embedded pages cannot get full access to your site by default.
| className="group absolute inset-0 cursor-pointer overflow-hidden text-left" | ||
| aria-label={`Play ${videoTitle}`} | ||
| > | ||
| <img |
There was a problem hiding this comment.
React Doctor · react-doctor/nextjs-no-img-element (warning)
Plain ships unoptimized, oversized images.
Fix → Use next/image so users get optimized formats, responsive srcsets, and lazy loading instead of oversized image downloads.
2 participants
Preview
Validation