[Performance] LogoCarousel causes repeated image requests flooding backend on onboarding dialog

[yuancjun]

Environment

• All environments (dev / production)
• Component: frontend/components/ui/logo-carousel.tsx
• Triggered via: InitialSecurityGuard → OnboardingFeatureCarousel → LogoCarousel
• Scenario: first-time user after registration lands on /chat

Current Behavior

When a newly registered user arrives at /chat, the onboarding dialog displays an animated logo carousel cycling through 34 LLM vendor icons across 3 columns every 2 seconds. Each cycle renders new <img> elements pointing to /vendor/lobehub-icons/*.svg.

Because AnimatePresence with mode="wait" unmounts the previous <img> and mounts a new one, the browser re-fetches these SVGs from the backend on every cycle. This occurs despite:

• The image URLs never changing across cycles
• The backend already serving Cache-Control: public, max-age=3600
• The images being static, immutable assets

The result is a sustained stream of redundant HTTP requests and unnecessary TCP connections for as long as the dialog remains open.

Expected Behavior

All vendor logo SVGs should be fetched once when the carousel mounts and served from the browser cache for all subsequent animation cycles. Zero redundant network requests should occur during the carousel's lifetime.

Root Cause

1. No preloading — LogoCarousel accepts LogoCarouselLogo items with optional src URLs. When rendered, a raw <img> tag is created. The browser has no opportunity to pre-cache these images
   before the rapid cycling begins.

2. Unstable React keys — The animated wrapper uses key={currentLogo.id}-${currentIndex}. Since currentIndex changes every cycle, React tears down and recreates the DOM element, forcing the
   browser to re-resolve the image resource.

3. loading="lazy" conflicts with AnimatePresence — The <img> enters with opacity: 0 + blur(8px), which can cause the browser to defer loading until the entrance animation is mid-flight, compounding the repeated-request problem.

Proposed Fix

In LogoCarousel:

• Preload all src-based logos on mount using new Image() to populate the browser cache before the carousel starts cycling.
• Remove loading="lazy" — the images are always in-viewport, and the attribute interacts poorly with AnimatePresence entrance animations.

Affected Files

• frontend/components/ui/logo-carousel.tsx

[chenyme]

CI failed because the commit subject did not conform to project specifications.

The current commit message is:

fix(ui): preload logo carousel images to prevent repeated network requests

The project requires the following format:

type: subject

The current fix(ui): includes a scope, which is not allowed in the project specifications. Only allowed type prefixes should be used, such as fix:.

Allowed types include: build, chore, ci, docs, feat, fix, perf, refactor, revert, style, and test.

Additionally, the subject only allows English letters, numbers, spaces, periods, hyphens, and underscores.

Please resubmit.

---

CI 未通过是因为 commit subject 不符合项目规范。

当前提交信息为：

fix(ui): preload logo carousel images to prevent repeated network requests

项目要求格式为：

type: subject

当前的 fix(ui): 带了 scope，而项目规范不允许 scope 语法；应只使用允许的类型前缀，例如 fix:。

允许的类型包括：build、chore、ci、docs、feat、fix、perf、refactor、revert、style、test。

另外，subject 仅允许英文、数字、空格、英文句号、连字符和下划线。

请重新提交～

[yuancjun]

@chenyme
已重新提交 commit message fix: preload logo carousel images to prevent repeated network requests