Description
There are two separate, meaningfully different ImageWithFallback implementations in this repo:
src/app/components/figma/ImageWithFallback.tsx — retries the image load once by appending a ?retry=1 query param, then falls back to a base64-encoded broken-image SVG icon. No URL validation.
src/features/landing/components/ImageWithFallback.tsx — validates src is an http:/https: URL up front (isValidImageUrl), has no retry logic, and falls back to an animated bg-white/10 animate-pulse skeleton block instead of an icon.
A repo-wide search shows the first component (src/app/components/figma/ImageWithFallback.tsx) is never imported by any production code — its only reference anywhere in src/ is its own test file (src/app/components/figma/ImageWithFallback.test.tsx):
$ grep -rln "ImageWithFallback" src --include="*.ts*"
src/app/components/figma/ImageWithFallback.tsx
src/app/components/figma/ImageWithFallback.test.tsx
src/features/landing/components/ImageWithFallback.test.tsx
src/features/landing/pages/LandingPage.test.tsx
src/features/landing/pages/LandingPage.tsx
src/features/landing/components/ImageWithFallback.tsx
Only LandingPage.tsx imports an ImageWithFallback, and it imports the features/landing one. The figma version is fully-formed, exported, documented, and tested — but unreachable from any route, meaning it represents dead production code (and dead test coverage) that anyone searching for "the" ImageWithFallback component would reasonably (and incorrectly) assume is in use, given how central image-fallback handling is across project logos, avatars, and blog art.
Requirements
- Decide on a single canonical
ImageWithFallback implementation (the features/landing one is the actively-used one, and it's also the more defensive of the two since it validates the URL scheme before rendering).
- Delete
src/app/components/figma/ImageWithFallback.tsx and its test, or — if the retry-on-error behavior is considered valuable — merge it into the surviving implementation and move it to a shared location (e.g. src/shared/components/) so both current and future consumers get one behavior.
- No behavior change to
LandingPage.tsx's rendering.
Suggested execution
- Fork the repo and create a branch:
git checkout -b fix/remove-dead-imagewithfallback
- Confirm (via
grep -rln "ImageWithFallback" src) that src/app/components/figma/ImageWithFallback.tsx has zero production importers.
- Delete
src/app/components/figma/ImageWithFallback.tsx and src/app/components/figma/ImageWithFallback.test.tsx.
- If the
src/app/components/figma directory becomes empty, remove it.
- Confirm the build, lint, and test suite are unaffected.
Example commit message
chore: remove dead figma ImageWithFallback duplicate
Acceptance criteria
Security notes
The retained (features/landing) implementation is the more secure of the two since it validates the URL protocol before rendering, rejecting non-http(s) schemes; standardizing on it removes the risk of a future consumer accidentally picking the less-defensive figma copy.
Guidelines
- Minimum 95% test coverage
- Timeframe: 96 hours
Description
There are two separate, meaningfully different
ImageWithFallbackimplementations in this repo:src/app/components/figma/ImageWithFallback.tsx— retries the image load once by appending a?retry=1query param, then falls back to a base64-encoded broken-image SVG icon. No URL validation.src/features/landing/components/ImageWithFallback.tsx— validatessrcis anhttp:/https:URL up front (isValidImageUrl), has no retry logic, and falls back to an animatedbg-white/10 animate-pulseskeleton block instead of an icon.A repo-wide search shows the first component (
src/app/components/figma/ImageWithFallback.tsx) is never imported by any production code — its only reference anywhere insrc/is its own test file (src/app/components/figma/ImageWithFallback.test.tsx):Only
LandingPage.tsximports anImageWithFallback, and it imports thefeatures/landingone. Thefigmaversion is fully-formed, exported, documented, and tested — but unreachable from any route, meaning it represents dead production code (and dead test coverage) that anyone searching for "the"ImageWithFallbackcomponent would reasonably (and incorrectly) assume is in use, given how central image-fallback handling is across project logos, avatars, and blog art.Requirements
ImageWithFallbackimplementation (thefeatures/landingone is the actively-used one, and it's also the more defensive of the two since it validates the URL scheme before rendering).src/app/components/figma/ImageWithFallback.tsxand its test, or — if the retry-on-error behavior is considered valuable — merge it into the surviving implementation and move it to a shared location (e.g.src/shared/components/) so both current and future consumers get one behavior.LandingPage.tsx's rendering.Suggested execution
git checkout -b fix/remove-dead-imagewithfallbackgrep -rln "ImageWithFallback" src) thatsrc/app/components/figma/ImageWithFallback.tsxhas zero production importers.src/app/components/figma/ImageWithFallback.tsxandsrc/app/components/figma/ImageWithFallback.test.tsx.src/app/components/figmadirectory becomes empty, remove it.Example commit message
Acceptance criteria
ImageWithFallbackcomponent remains in the codebase.Security notes
The retained (
features/landing) implementation is the more secure of the two since it validates the URL protocol before rendering, rejecting non-http(s)schemes; standardizing on it removes the risk of a future consumer accidentally picking the less-defensivefigmacopy.Guidelines