BUG: UI flicker occurs for missing or invalid image paths

[codex-yv]

Is there an existing issue for this?

• I have searched the existing issues

What happened?

Description

When we click on the image whose path no longer exist the UI in MediaView.tsx flickers.

Steps to reproduce the Bug

• Before launching the PictoPy app (backend/sync/frontend), delete a folder that has already been added to PictoPy.
• Launch the PictoPy application.
• Navigate to the Home section (or any gallery view).
  • Images from the deleted folder may still appear because thumbnail paths are still there.
    (This behavior is acceptable.)
• Click on one of these images.
• Observe that the UI flickers instead of handling the missing image.

Expected Behaviour

• When an image file is missing or its path is invalid:
  • The UI should not flicker
  • A clear message should be shown (e.g., “Image not found” or “File unavailable”)

Actual Behavior

• The UI flickers when attempting to open an image whose file path is invalid.

Implementation (ImageViewer.tsx)

• State-Driven Error Tracking

const [hasError, setHasError] = React.useState(false);

// Reset error state when imagePath changes (e.g., user clicks Next)
React.useEffect(() => {
  setHasError(false);
}, [imagePath]);

• Conditional Rendering (The Fix)

<img
  src={convertFileSrc(imagePath)}
  onError={(e) => {
    console.log("qwertyuiop") // Printed forever
    const img = e.target as HTMLImageElement;
    img.src = '/placeholder.svg'; // Triggered error again if svg was missing
  }}
/>

• Displaying message

{hasError ? (
  // Show a polished fallback UI instead of a broken image
  <div className="flex flex-col items-center ...">
    <ImageOff className="h-24 w-24 ..." />
    <p>Image could not be loaded</p>
  </div>
) : (
  <img
    src={convertFileSrc(imagePath)}
    onError={() => setHasError(true)} // Set state once, React removes the <img>
    className="..."
  />
)}

Screen Recordings

Before

2026-02-19.21-27-00.mp4

After

2026-02-19.21-44-42.mp4

Record

• I agree to follow this project's Code of Conduct

[github-actions]

👋 Thanks for opening this issue! The maintainers will review it shortly. Till then, do not open any PR. This is a strict rule we like to follow around here :)

[codex-yv]

Hi @rahulharpal1603 sir, i have fixed this bug locally. Could you please assign it to me ?

[studyonly631-sys]

/assign

[nonehxrry]

Hi @rahulharpal1603! I'm Harjit (GitHub: nonehxrry), a GSoC 2026 applicant for PictoPy. I'd like to work on this UI flicker bug. I'll implement proper error state handling in MediaView.tsx with a clean fallback UI showing "Image could not be loaded". Is this available?

[nonehxrry]

Hi @rahulharpal1603! I'm Harjit (GitHub: nonehxrry), a GSoC 2026 applicant for PictoPy. I'd like to work on this UI flicker bug in ZoomableImage. I'll replace the broken onError handler that causes infinite flicker with a proper React error state and a clean fallback UI. Is this still available?