fix(#3640) : errorFallbackSrc and loadingFallbackSrc props to image component
#3665
Conversation
🦋 Changeset detectedLatest commit: 105107b The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@abhinav700 is attempting to deploy a commit to the NextUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis change enhances the Changes
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (5)
- .changeset/small-gifts-learn.md (1 hunks)
- apps/docs/content/components/image/fallback.ts (1 hunks)
- apps/docs/content/docs/components/image.mdx (2 hunks)
- packages/components/image/src/use-image.ts (5 hunks)
- packages/components/image/stories/image.stories.tsx (1 hunks)
Additional comments not posted (8)
.changeset/small-gifts-learn.md (1)
1-5: Changeset looks good.The changeset entry accurately describes the introduction of
errorFallbackSrcandloadingFallbackSrcproperties as a minor change.apps/docs/content/components/image/fallback.ts (1)
10-11: Example usage looks good.The example correctly demonstrates how to use
errorFallbackSrcandloadingFallbackSrcproperties.Consider verifying that this example is referenced in the documentation to ensure users can easily find it.
packages/components/image/stories/image.stories.tsx (1)
135-136: Storybook example updated correctly.The
Fallbackstory now includeserrorFallbackSrcandloadingFallbackSrc, providing a clear demonstration of the new functionality.packages/components/image/src/use-image.ts (3)
33-34: New properties added to Props interface.The
errorFallbackSrcandloadingFallbackSrcproperties are correctly added to thePropsinterface.
190-200: Fallback logic correctly implemented.The logic for determining which fallback image to display is well-structured and ensures the correct image is shown based on the loading state.
94-95: New properties integrated into useImage hook.The
useImagehook now includes logic to handleerrorFallbackSrcandloadingFallbackSrc, enhancing the component's flexibility.Consider verifying that existing functionality is not adversely affected by these changes.
apps/docs/content/docs/components/image.mdx (2)
71-82: Documentation updated with new properties.The documentation correctly explains the usage of
errorFallbackSrcandloadingFallbackSrc, providing clear guidance for developers.
118-119: API table updated with new properties.The API table now includes
errorFallbackSrcandloadingFallbackSrc, ensuring comprehensive documentation of the component's capabilities.
|
will be handled in #3664 |
Closes #3640
📝 Description
⛳️ Current behavior (updates)
Fallback displays same fallback image for error and loading state
🚀 New behavior
errorFallbackSrcandloadingFallbackSrcprops are added to display different fallbacks for both states.💣 Is this a breaking change (Yes/No):
I don't know
Summary by CodeRabbit
New Features
errorFallbackSrcandloadingFallbackSrcproperties for improved image handling during loading and error states.Documentation
Imagecomponent.