AOSSIE-Org / AOSSIE-Org/PictoPy

BUG: UI flicker occurs for missing or invalid image paths

Abierto
#1,184 5 comentarios 0 reacciones 0 asignados Ver en GitHub
Lenguaje dominante
Python
Estrellas
283
Forks
679
Merge medio
7 d 2 h
PR fusionados (30 d)
3

Descripción

### 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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.