AOSSIE-Org / AOSSIE-Org/PictoPy

BUG: UI flicker occurs for missing or invalid image paths

Đang mở
#1,184 5 bình luận 0 reaction 0 người được giao Xem trên GitHub
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



) : (
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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.