AOSSIE-Org / AOSSIE-Org/PictoPy

BUG: UI flicker occurs for missing or invalid image paths

Open
#1,184 5 comments 0 reactions 0 assignees View on GitHub
Dominant language
Python
Stars
283
Forks
679
Avg merge
7d 2h
Merged PRs (30d)
3

Description

### Is there an existing issue for this?

- [x] 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
```tsx
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)
```tsx
{
console.log("qwertyuiop") // Printed forever
const img = e.target as HTMLImageElement;
img.src = '/placeholder.svg'; // Triggered error again if svg was missing
}}
/>
```
- Displaying message
```tsx
{hasError ? (
// Show a polished fallback UI instead of a broken image



Image could not be loaded



) : (
setHasError(true)} // Set state once, React removes the
className="..."
/>
)}
```

## Screen Recordings
### Before

https://github.com/user-attachments/assets/bf5e7825-f152-4d11-a025-073e0e12275e

### After

https://github.com/user-attachments/assets/0cd7f9ca-b312-4ec0-be75-6cbf9dc87ce7

### Record

- [x] I agree to follow this project's Code of Conduct

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.