AOSSIE-Org / AOSSIE-Org/PictoPy
BUG: UI flicker occurs for missing or invalid image paths
- Ngôn ngữ chính
- Python
- Star
- 283
- Fork
- 679
- Merge trung bình
- 7 ngày 2 giờ
- Pull request đã merge (30 ngày)
- 3
Mô tả
### 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
Hướng dẫn đóng góp
Đánh giá
Issue này chưa được đánh giá.