AOSSIE-Org / AOSSIE-Org/PictoPy
BUG: UI flicker occurs for missing or invalid image paths
- 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
) : (
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
Assessment
This issue has not been assessed yet.