AOSSIE-Org / AOSSIE-Org/PictoPy

BUG: UI flicker occurs for missing or invalid image paths

Aberta
#1,184 5 comentários 0 reações 0 responsáveis Ver no GitHub
Linguagem predominante
Python
Estrelas
283
Forks
679
Merge médio
7d 2h
PRs com merge (30d)
3

Descrição

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

Guia de contribuição

Abrir o guia de contribuição

Avaliação

Esta issue ainda não foi avaliada.

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.