Skip to content

enhance ImageWithFallback with retry, accessibility, loading, and tests#216

Merged
Jagadeeshftw merged 2 commits into
Grainlify:mainfrom
Franker24:Grainlify-Frontend
Jun 23, 2026
Merged

enhance ImageWithFallback with retry, accessibility, loading, and tests#216
Jagadeeshftw merged 2 commits into
Grainlify:mainfrom
Franker24:Grainlify-Frontend

Conversation

@Franker24

Copy link
Copy Markdown
Contributor

This PR enhances the Figma ImageWithFallback component with improved accessibility, performance options, security compliance, and robust error-handling retry capabilities. It also adds a comprehensive suite of unit tests, achieving 100% test coverage.

Key Improvements

1. Robust Retry Logic

  • Implemented a one-time retry mechanism when image loading fails.
  • For non-data URLs, a cache-busting query parameter (?retry=1 or &retry=1) is automatically appended on the first failure to guarantee the browser initiates a new network request instead of reusing cached error states.
  • Ensures no infinite loops by limiting the retry count to 1 before resolving to the fallback image.
  • State (hasError and retryCount) is automatically reset when the src prop changes.

2. Enhanced Accessibility

  • Fallback image now includes a descriptive aria-label="Error loading image".
  • Uses a default alt text (alt="Image") when the prop is omitted to prevent screen readers from skipping the image or announcing missing alt tags.

3. Performance Boost

  • Enabled loading="lazy" by default on normal image renders.
  • Allows full customization/override of the loading behavior via props (e.g., loading="eager").

4. DOM Exposure Security

  • Removed the old data-original-url attribute from the fallback image tag. Once the component switches to the fallback state, the original (possibly unsafe/private) source URL is completely unmounted and no longer exposed anywhere in the DOM.

5. High-Coverage Unit Tests

Created src/app/components/figma/ImageWithFallback.test.tsx covering all execution paths:

  • Normal image rendering & parameter defaults
  • Custom overrides (loading="eager")
  • onLoad callback firing
  • First-error retry & cache-buster injection verification
  • Safe data URL retry validation
  • Second-error fallback render
  • Complete safety validation (no original src exposed in DOM during fallback)
  • State reset on src changes

Verification Results

Unit Tests

Ran Vitest checks:

pnpm test src/app/components/figma/ImageWithFallback.test.tsx

Closes #183 

@Jagadeeshftw Jagadeeshftw merged commit 9be493b into Grainlify:main Jun 23, 2026
@Jagadeeshftw

Copy link
Copy Markdown
Contributor

the retry, accessibility, and loading improvements to ImageWithFallback plus the tests are a great robustness upgrade. rebased on latest main and dropped one unused import to keep the typecheck clean. thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants