Add fallback alt text, retry, and lazy loading to figma ImageWithFallback

[Jagadeeshftw]

📌 Description

ImageWithFallback (src/app/components/figma/ImageWithFallback.tsx) renders an inline base64 broken-image SVG on error with a generic alt, no default alt when alt is undefined, no retry, no onLoad signal, and no lazy loading.

💡 Why it matters: Images without alt text and without lazy loading hurt accessibility and performance.

🧩 Requirements and context

• Provide a sensible default alt and an aria-label on the fallback.
• Add loading="lazy" (where appropriate) and an onLoad callback.
• Add an optional one-time retry before showing the fallback.
• Extract the base64 SVG into a named constant.

Non-functional requirements

• Must be secure, tested, and documented.
• Should be efficient and easy to review.

🛠️ Suggested execution

1. Fork the repo and create a branch

git checkout -b feat/imagewithfallback

2. Implement changes

• Write/modify the relevant source: src/app/components/figma/ImageWithFallback.tsx
• Write comprehensive tests: src/app/components/figma/ImageWithFallback.test.tsx
• Add documentation: TSDoc
• Include TSDoc doc comments
• Validate security assumptions: do not echo untrusted src into visible text

3. Test and commit

• Run tests:

npm run test

• Cover edge cases: load error, missing alt, retry then success
• Include test output and security notes in the PR description.

Example commit message

feat(image): alt fallback, retry, and lazy loading

✅ Acceptance criteria

• Default alt + fallback aria-label
• Lazy loading + onLoad support
• Optional retry before fallback
• Tests cover error/retry/missing-alt

🔒 Security notes

Avoid rendering untrusted src as user-visible text.

📋 Guidelines

• Minimum 95% test coverage
• Clear documentation
• Timeframe: 96 hours

[444notdotun]

Hi,

With 4 years of hands-on experience across backend, frontend, and smart contract development, I'm confident I can complete this task quickly and to a high standard. I've reviewed the requirements in detail and fully understand what's needed.

My focus is on writing clean, efficient, and maintainable code backed by thorough testing and industry best practices. I'll ensure the solution is production-ready and delivered on time.

I expect to have my PR ready in less than 10 hours.

[Franker24]

Hi! I’d like to contribute to this issue by improving the ImageWithFallback component with better accessibility, performance, and reliability.

I’m a Fullstack Developer with experience building React and TypeScript applications, focusing on reusable components and frontend quality improvements.

For this implementation, I can:

• Add sensible default alt handling and accessible fallback labels
• Implement lazy loading and onLoad support
• Add a controlled retry mechanism before rendering the final fallback state
• Extract the fallback SVG into a reusable constant
• Add tests covering missing alt, load errors, retry behavior, and successful recovery

I’ll keep the component API clean, avoid breaking existing usage, and make sure the solution remains easy to maintain and review.

I’d be happy to help improve the accessibility and performance of the image system.

[leocagli]

I'd love to contribute to this. Please assign me!

[grantfox-oss]

🦊 GrantFox — @Franker24 has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #183)
2. Your PR will be reviewed by the Grainlify maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@Franker24's PR #216 was approved and merged by @Jagadeeshftw.

🏆 @Franker24: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (51 total points). Track your full progress on GrantFox.

👏 Great work, @Franker24! Keep contributing to Grainlify.