Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature Request] Make a Distinction Between Loading and Error States in Image Component #3640

Open
Arian94 opened this issue Aug 12, 2024 · 8 comments · May be fixed by #3664
Open

[Feature Request] Make a Distinction Between Loading and Error States in Image Component #3640

Arian94 opened this issue Aug 12, 2024 · 8 comments · May be fixed by #3664
Assignees
@Arian94
Labels
🔦 Type: Feature New feature or request

Comments

@Arian94
Copy link

Arian94 commented Aug 12, 2024

Is your feature request related to a problem? Please describe.

When using the Image component, one would want to have two different images for the loading state as well as showing a fallback image when an error is encountered.

ATM, there is only one property called fallbackSrc that handles both states and displays one image, so there is no distinction between the loading and the error states.

Describe the solution you'd like

Please, make it possible to display another image on the Error state by adding a new property and modifying the use-image.ts file to handle such case.

Describe alternatives you've considered

Wrap the existing Image component and on the onError handler, set the fallbackSrc to point to another source like:

const [fallbackSrc, setFallbackSrc] = useState('');

<Image
    fallbackSrc={fallbackSrc}
    onError={() => {
         setFallbackSrc('/assets/another-img');
     }}
 ...
/>

Screenshots or Videos

No response
@linear Linear
Copy link

linear bot commented Aug 12, 2024

ENG-1268 [Feature Request] Make a Distinction Between Loading and Error States in Image Component

@kaizerpwn
Copy link

I’ve encountered the same issue recently and I completely agree with you.

@wingkwong wingkwong added the 🔦 Type: Feature New feature or request label Aug 17, 2024
@abhinav700
Copy link

@wingkwong Can you assign this issue to me. I would like to work on it.

@Arian94 Arian94 linked a pull request Aug 18, 2024 that will close this issue
Open
abhinav700 added a commit to abhinav700/nextui that referenced this issue Aug 19, 2024
@abhinav700
fix(nextui-org#3640): added and props to display different fallbacks …
cdc997b 
…for loding and error states
abhinav700 added a commit to abhinav700/nextui that referenced this issue Aug 19, 2024
@abhinav700
fix(nextui-org#3640): removing react import that was added automatically
10d82f2
abhinav700 added a commit to abhinav700/nextui that referenced this issue Aug 19, 2024
@abhinav700
fix(nextui-org#3640): updated changeset
105107b
@abhinav700 abhinav700 mentioned this issue Aug 19, 2024
Closed
@wingkwong
Copy link
Member

wingkwong commented Aug 19, 2024 •
edited
Loading

@Arian94 next time please ask for assignment first before implementation.

@Arian94
Copy link
Author

Arian94 commented Aug 20, 2024

@wingkwong Oh, wasn't used to that. From my experience, the quicker and better you do, the higher chances of success.
But alright, got it :)

@wingkwong
Copy link
Member

I agree but you may at least leave a message saying you will be working on it. Otherwise I'll assume no one is working on it and assign to someone else. This would waste the effort and time for others. I'll check both PR to see which one suits better and close the other one.

cc @abhinav700

@Arian94
Copy link
Author

Arian94 commented Aug 20, 2024

I agree but you may at least leave a message saying you will be working on it. Otherwise I'll assume no one is working on it and assign to someone else. This would waste the effort and time for others. I'll check both PR to see which one suits better and close the other one.

cc @abhinav700

Yeah, it happened so fast.

@abhinav700
Copy link

I'll check both PR to see which one suits better and close the other one.

cc @abhinav700

Okay.

@wingkwong wingkwong assigned Arian94 and unassigned abhinav700 Aug 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Arian94 Arian94

Labels
🔦 Type: Feature New feature or request
Projects
None yet
Milestone
No milestone
4 participants
@wingkwong @Arian94 @kaizerpwn @abhinav700